I’m having trouble populating a text field (within a repeater) with a date, which needs to be retrieved from a database. Here is the text element on the page see the ID “formDate” Here is the database Field Key and database screenshot. Note the Field Key is “dateField”. Here is my code: $w.onReady(function () { console.log("Start"); // Get the date from the date field of the current item const date = $w("#dynamicDataset").getCurrentItem().dateField; // Sets formatting options for date console.log(date); const options = { day: "numeric", month: "long", year: "numeric" }; console.log("Set date paramaters"); // Sets the property of the text element to be a string representing the date in AU English $w("#formDate").text = date.toLocaleDateString("en-AU", options); console.log("Converted date to text"); $w("#VSIRrepeater").onItemReady( ($w, itemData, index) => { if($w("#formDescription").text == ""){ $w("#formDescription").collapse(); } console.log("Collapsed description (if needed)"); if($w("#formDate").text == ""){ $w("#formDate").collapse(); } console.log("Collapsed date (if needed)"); }); }); Based on the console log, it looks like it’s getting stuck at line 4. I suspect it is having an issue retrieving the date from the database, but I can't figure out why as no errors are displayed. I have also double-checked that the repeater's ID is "dynamicDataset". I followed this tutorial for the date retrieval and formatting - https://support.wix.com/en/article/velo-formatting-dates Any help would be greatly appreciated. Thank you

I am trying to get a dropdown element to open a URL in a new window. The URL is generated based on the user's selection. The value of each selection/choice is the URL that should be opened (see image below for configuration). I have reviewed the documentation at the following link - https://www.wix.com/corvid/reference/$w/linkablemixin but the code is throwing the error "'target' does not exist on '#headerlogin'. Below is my code. export function headerlogin_change(event) { let url = $w("#headerlogin").value; $w("#headerlogin").link = url; $w("#headerlogin").target = "_blank"; } I should also note that I originally tried to use wix-location, but as far as I can tell it doesn't allow links to be opened in a new window. Any clarification would be appreciated, thank you

Hi, I have implemented a preloader to my Wix website which is displayed when a visitor first loads my website https://www.tobymcdowell.com The problem I am having is that my mobile menu is being displayed in front of the preloader. The interesting part is that other Wix users who have have implemented the same preloader code do not have the mobile menu overlaying the preloader. Some examples are: www.futurevisionweb.com www.reverseweb.ch www.simplytelecom.co.uk Please see the image below to see what happens when loading the mobile version of my website. The preloader code is also below: <div id="preloader"> <div id="loader"></div> </div> <style media="screen and (max-width: 200px)"> /* Transparent Overlay */ #loading:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 50%; height: 50%; background-color: rgba(0,0,0,0.3); } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; border: 3px solid transparent; border-top-color: #22556C; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #398EB5; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #88BBD2; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } </style> <style media="screen and (min-width: 200px)"> /* Transparent Overlay */ #loading:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 50%; height: 50%; background-color: rgba(0,0,0,0.3); } #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #22556C; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #398EB5; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #88BBD2; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } </style> Any help would be greatly appreciated. Thank you

Hi, I have implemented a CSS preloader using the HTML insert element for the portfolio page of my website, so tht when a different tab is clicked the preloader appears while the repeater content is loaded in. The problem I am having is that the preloader is always displaying on Safari desktop. On Safari mobile, Firefox (desktop & mobile), and Chrome (desktop & mobile) it is functioning correctly. Please see the following GIF. Please see the following image to see how it looks in the editor. Please see my code for the preloader to display and hide. export function ShowLoadingCSS($w) { $w("#repeater1").hide().then(() => { $w("#imgPreloader").show(); }); } export function HideLoadingCSS($w) { $w("#imgPreloader").hide().then(() => { $w("#repeater1").show(); }); } Any help would be greatly appreciated. Thank you

Hi, I have recently integrated anchors into my site for quality of life purposes, namely with folding elements. Unfortunately, I am having some issues when my anchor that I am travelling to is far down the page. The intended result is a smooth transition to the anchor, but the actual result is a jerky snap to the bottom of the page. This is illustrated in the clip shown, where I first show it working as it should, then what happens when clicking on a fold that is further down the page: Here is my relevant current code, using the functionality found in a Wix-Code tutorial on folds. function toggleFold(index) { let $fold = $w('#fold' + index); // Store the anchor required let $anchor = $w('#ncr' + index); let $arrowDown = $w('#arrowDown' + index); let $arrowRight = $w('#arrowRight' + index); // toggle the fold at the index if ($fold.collapsed) { $fold.expand(); // Scroll to the anchor $anchor.scrollTo(); $arrowDown.show(); $arrowRight.hide(); } else { $fold.collapse(); $arrowDown.hide(); $arrowRight.show(); } // collapse the other folds [1, 2, 3, 4] .filter(idx => idx !== index) .forEach(idx => { $w('#fold' + idx).collapse(); $w('#arrowDown' + idx).hide(); $w('#arrowRight' + idx).show(); }); } The anchor names and numbers match up with the fold numbers, so the index cannot be the issue. Any ideas?

Hi, I am performing input validation and am using the text field value to check whether the user has entered any data. Unfortunately, it seems that the value is not being updated PRIOR to performing onKeyPress but rather AFTER. This can be seen through the below: The text is inputted as above, and below is the output Here is my code: $w.onReady(function () { $w("#txtFName").onKeyPress((eventHandler) => { console.log("Value of First Name: " + $w("#txtFName").value); if($w("#txtFName").value !== "") $w("#text27").collapse(); }); $w("#txtLName").onKeyPress((eventHandler) => { console.log("Value of Last Name: " + $w("#txtLName").value); if($w("#txtLName").value.length > 0) $w("#text29").collapse(); }); }); I have tried two different variations of checking the value (by both length and contents) The outcome is the same on both. Am I missing something, or am I correct in assuming that the value is not being changed before onKeyPress is called? If I am correct, is there another way to set this up? I wish to have my error box disappear when the user enter a value into the box, without needing to click out of the box to apply the change.

Hi, I have created some simple form validation to validate a form. The validation works as it should, the problem I am having is that after the form successfully submits, the error error messages appear, even though the form contains no content. please see attached screen shot. I feel like something is happing with the Wix Code form validation that is conflicting with my validation. Any help would be appreciated. ------------------------------------------------CODE ------------------------------------------------------ export function input1_blur(event, $w) { // Name $w("#input1").onCustomValidation((value, reject) => { if (value.length === 0) { reject("Please enter a name"); $w("#text27").show(); } else { $w("#text27").hide(); } }); } export function input2_blur(event, $w) { // Email $w("#input2").onCustomValidation((value, reject) => { if (value.length === 0) { reject("Please enter a valid E-Mail address."); $w("#text28").text = "Please enter an E-Mail address"; $w("#text28").show(); } else if (!value.includes("@") || !value.includes(".")) { reject("A valid E-Mail address is required."); $w("#text28").text = "A valid email address is required"; $w("#text28").show(); } else $w("#text28").hide(); }); } ------------------------------------------------CODE ------------------------------------------------------

Hi, I am attempting to integrate the Wix Code form so that when it submits the name and email are send to MailChimp through the REST API. I have created the form (ssee attachment) and linked it to the Wix Code database, however I am having difficulty adding the MailChimp API. The visitor would select a check box if they want to opt-in for mailchimp subscription. Any help you be appreciated.