nmilc
-
Posts
3 -
Joined
-
Last visited
nmilc's Achievements
Level 1 (1/20)
0
Reputation
-
We're attempting to use the JQuery Datepicker widget (link) in our website. However, it doesn't work on Squarespace. It does work in Chrome. It just doesn't work in Squarespace, and I'm hoping someone will be able to help me out with why. Prior googling for solutions leads me to point out that in our code below, JQuery is imported before the datepicker function is called. The datepicker function is nested within a document.ready() section (two, actually), so it's not a pageload problem. It does, as mentioned, work in regular browsers, but it doesn't when it's passed through Squarespace - does anyone know why? Some additional information: The flow of information runs: available dates pulled in from external site via HTTP REST > dates extracted into an array > dates passed to JQuery widget > conditional highlighting applied to matching dates > users can parse through widget. I've looked into the built-in Squarespace datepicker/calendar widgets, and would be open to using those if and only if an array of dates can be passed into those widgets. Being able to highlight the dates the users can select is a spec for this code, and this array can only be extracted using code injection, so we need to use the code block either way. I can't find any APIs that mention being able to accept dates - if there is somewhere else I can look, I would be open to the idea. Here's the code we're using so far: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" /> <style> .highlight { background-color: blue; color: red; } </style> </head> <body> <div class="content-body"></div> <div> <p>Date:</p> <input type="text" id="datepicker" width="276" value="Please pick a date: " /> </div> <script src="jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> console.clear(); $(document).ready(function () { // Variable Declaration.............................................. VARIABLE DECLARATION #region [rgba(26, 188, 156, 0.2)] var authUser = "REDACTED"; var authPass = "REDACTED"; var getURL = "REDACTED"; bodydom = $(".content-body")[0]; var eventResponse = []; var clinicDates = []; // FOR CLINIC ID INFORMATION const clinicSettings = { async: true, crossDomain: true, url: getURL, method: "GET", headers: { "Content-Type": "application/json", Authorization: "Basic " + btoa(authUser + ":" + authPass), // btoa() takes the binary string and converts to ASCII string; authUser and authPass were both set in global variables section }, }; $.ajax(clinicSettings).done(function (clinicResponse) { // Gets list of clinics and basic clinic information for (let i = 0; i < clinicResponse.data.length; i++) { eventResponse = clinicResponse.data[i].events; for (let j = 0; j < eventResponse.length; j++) { clinicDates.push(eventResponse[j].date); } } $(document).ready(function () { $("#datepicker").datepicker({ dateFormat: "mm/dd/yy", // Function requires a returned array for each date beforeShowDay: function (date) { var arr; // Converts date to format, using slice to take final two characters, prepending 0 exclusively to single digits var search = date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2); // Iterates through the array of dates that have clinics and, if they match the date in the widget, highlights them as available for (let i = 0; i < clinicDates.length; i++) { console.log(clinicDates[i]); if (clinicDates[i] == search) { // If the converted date matches with an entry on the array, makes selectable and adds "highlight" CSS class return [true, "highlight"]; } } // If it isn't, adds no class and makes unselectable return [false, ""]; }, }); }); }); </script> </body> </html>
-
appendChild Workaround (Javascript, HTML, CSS)
nmilc replied to nmilc's topic in Customize with code
Hey, thanks so much for taking a look at this! I gave it a shot, adding the div class results and appending the buttons there instead of to the document body, but no luck. Anything else I might be able to try? For the HTML section: <body> <h1>NMILC Pro Bono Opportunities</h1> <div class="results"></div> <script src = "jquery-3.6.0.js"></script> ... </body> For the output section in the JS code: // Adds all relevant HTML elements to document results.appendChild(nameEl); results.appendChild(availEl); results.appendChild(descripEl); results.appendChild(claimBtn); results.appendChild(releaseBtn); -
I'm looking for a workaround to the appendChild() function. Hoping someone can help me out here! We're currently using a code block on our Squarespace site, which integrates HTML, CSS, and Javascript. Briefly, the point of the page is to display information pulled from a secure database. The code in question uses a number of HTTP methods: both GET and PATCH methods, at different points. The GET method (called in Javascript) reads in the number of cases that need to be displayed on the page. Based on that number of cases, we want to create the corresponding number of HTML elements (n number of headers, 2*n number of buttons, etc). Right now, the code calls the GET method and stores information on each case in the resultant array. The length of that array is the number of cases, and that's what we iterate to in our for loop. We then create the necessary headers and buttons using the .createElement() method and add them to HTML using the .appendChild() method. This method works outside of Squarespace. However, according to a technical representative, Squarespace doesn't support the use of the appendChild() method, so none of the HTML elements created inside the Javascript for loop actually show up on the page. Because we don't know before calling the HTTP GET method, we can't declare the correct number of headers and buttons within the HTML script. So! Any workarounds to this restriction on the appendChild method? Attached is the Javascript and HTML codes currently in use. (Some information, such as URLs and authorizations, have been redacted for confidentiality purposes, but the skeleton structure of the code is still there.) Any thoughts are much appreciated! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Results: </h1> <script src = "jquery-3.6.0.js"></script> <script> // Initialization clear console.clear(); // GET SECTION: Retrieves and populates information on available cases const getSettings = { "async": true, "crossDomain": true, "url": "method": "GET", "headers": { "Content-Type": "application/json", "Authorization": } }; // PATH SECTION, TAKE: Takes opportunity when button is clicked const claimSettings = { "async": true, "crossDomain": true, "method": "PATCH", "headers": { "Content-Type": "multipart/form-data", "Authorization": }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form }; // PATCH SECTION, RELEASE: Releases opportunity when button is clicked const releaseSettings = { "async": true, "crossDomain": true, "method": "PATCH", "headers": { "Content-Type": "multipart/form-data", "Authorization": }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form }; $.ajax(getSettings).done(function (response) { // Iterates through each of the cases let numCases = response.results.length; for (let i = 0; i < numCases; i++) { // Populates array of case numbers idArray[i]=response.results[i].id.raw_value; // Creates basic HTML elements on page let nameEl = document.createElement("h2"); nameEl.innerHTML = "Case Number: " + idArray[i]; let lpcEl = document.createElement("h3"); let availEl = document.createElement("h3"); let descripEl = document.createElement("h4"); let claimBtn = document.createElement("button"); let releaseBtn = document.createElement("button"); // Adds all relevant HTML elements to document document.body.appendChild(nameEl); document.body.appendChild(availEl); document.body.appendChild(lpcEl); document.body.appendChild(descripEl); document.body.appendChild(claimBtn); document.body.appendChild(releaseBtn); } }) </script> </body> </html>
