Code Works in Preview Not in Live Site

Ask the community
, ,
1

I have seen other posts like this but do not have the same problems that resolved those issues.

Anyone can see data from the collection
I have custom settings that allow anyone to see the data from my collection but only members can create/edit and only an admin can delete

543×631 10.5 KB

It is published
I have published to the live site and see all the cosmetic changes just not the code populating the element correctly or consistently (different outcome on mobile device vs. desktop)

The page on my live site is www.edisonchargerfootball.com/golf-tournament. It is a template I have made for events. Sometimes these events have multiple sessions (ie: week1/week2). The code I am having a problem with changes depending on the start and end dates of these sessions. The element I am using populates with data from text elements (that they themselves are populated with data from a date picker) on the page (maybe here within the problem lies?). What fills the element depends on “if statement” outcomes. In preview mode everything responds perfectly. But the live site populates with element ID (shown below) on the website and the element’s default text (shown below) on a mobile device. Also weird…I tried to use variables to make the code cleaner but then the result didn’t even work in preview mode.

Thank you for your help!

Website
The element reads "Session - Session2 End Date on the website. This is syntax is correct if it was populating with the contents of the fields (which are dates) not the name of the fields. The code requests slicing the first 6 characters of the (first element).text + " - " + the (second element).text.

Mobile
This is how the element presents on my mobile device when looking at the live site. Date(s) is the text I hard coded to the element so it appears to not be populating with code at all.

606×708 494 KB

Preview - THIS IS HOW I WANT IT TO LOOK on site
This is how it looks in preview mode via the code editor. This is the desired outcome on live website and mobile devices.

841×462 496 KB

My Code

import wixData from ‘wix-data’ ;

$w . onReady ( function () {

const isChecked = $w ( ‘#checkbox1’ ). checked ;

**if**  ( isChecked ) { 
    $w ( '#columnStrip39' ). expand (); 

    **if**  ( $w ( '#session1StartDate' ). text . slice ( 0 , 14 ) === ( $w ( '#session1EndDate' ). text . slice ( 0 , 14 ) &&  $w ( '#session2EndDate' ). text . slice ( 0 , 14 ))) 
        { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text } 
    **else** 
        { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text . slice ( 0 , 6 ) +  " - "  +  $w ( '#session2EndDate' ). text } 
} 
**else if**  ( isChecked  ===  **false** ) { 
    $w ( '#columnStrip39' ). collapse (); 

    **if**  ( $w ( '#session1StartDate' ). text . slice ( 0 , 14 ) ===  $w ( '#session1EndDate' ). text . slice ( 0 , 14 )) 
    { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text } 
    **else**  { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text . slice ( 0 , 6 ) +  " - "  +  $w ( '#session1EndDate' ). text } 
}

});

2

Hi, you need to run the code only after the dataset is ready.
See:
https://www.wix.com/velo/reference/wix-dataset/dataset/onready

If you won’t put it inside dataset.onReady block, it might run the code before you retrieve the data from the dataset.

import wixData from 'wix-data';
$w.onReady(function () {
    $w('#myDataset').onReady(() => {
        //... the code
    })
})
3

Thank you. That makes sense. It solved the problem on the laptop live site. I am still getting an unpopulated element (presents as Date(s) on the web page but should read something like this Mar 14 - March 18, 2022 ) when I access the page from my phone. Are there additional measures I need to take to make sure data is loaded before running the code? Thank you very much for any help.

I am lacking an understanding of website relationships to a mobile device vs. laptop. I don’t understand why when I access the website from a mobile phone the code doesn’t populate the element. Can anyone provide insight?

Another issue not (previously mentioned) that illustrates the disconnect between mobile device access vs. laptop is when I make an update to the site from an input page while using my mobile phone.

Here is how I have it set up. All elements on the Golf Tournament page are populated from the Programs collection/dataset. The collection is populated by input fields on another page (called EDIT Programs). This allows users without Admin-like permissions to change data on the Golf Tournament page. It also allows us to use our phones to do quick changes to the Golf Tournament page when we don’t have a laptop on hand. However, on this page (with this code I am using) when I use my phone to input or change data (via the EDIT Programs) the collection receives the data but the Golf Tournament page appears to loose its connection with collection. All elements on the Golf Tournament page regress to their original names (when they are not connected to a collection).

https://static.wixstatic.com/media/a27d24_b445e65ad0ea41d7a573c50ff922758c~mv2.png(image larger than 4 MB)

Here is what the Golf Tournament page looks like when I use my phone to make a change, push the UPDATE button and then check my laptop to see if the changes were made. As you can see the element at the top now reads Title of Event (the text i typed in the element before it was connected to the dataset. It should read as Alumni Golf Tournament as shown above. This problem only happens when the EDIT Programs page is used on a mobile phone. Weird. Does anyone understand this? Thank you!

877×883 405 KB

4

You might try setting the dataset to use the Fetch after the page loads option.

876×1260 83.3 KB

Also, what is the checkbox for? Who checks it and when? In fact, where is the checkbox? I don’t see it.

5

Errors I am getting

1237×520 26.7 KB

Regarding Fetch after the page loads
Thank you. I just tried it. It did not work. Using my phone to view www.edisonchargerfootball.com/golf-tournament still presents a page with unpopulated elements (specifically those elements who are populated by code output like Date(s) (aka ID: dateStartandEnd) at the top of the page. Would appreciate addition thoughts. Thank you to all who have reviewed my question.

Regarding Checkbox
Good question Yisrael! I did not mention the checkbox because my situation is already so convoluted.

The checkbox is only used by the program organizer. It is the first condition of my code. The checkbox is always hidden on the webpage. It determines two things. First, if a strip with info about the second session is expand and therefore shows on the page. Second, if the dates of the program (Mar 14 - Mar 18, 2022) include a date from the second sessions (Mar 18, 2022 would be the end of the second program).

Could the checkbox be part of the problem?

Declaring Variables Doesn’t work
Another issue - this code didn’t work if I declared variables (other than isChecked). Hence, I had to write the literal element names every time. I am probably doing at least one important thing wrong that might explain all these issue but :woman_shrugging:… For example, I am trying to learn how to get the data from the dataset or collection and remove the elements’ text properties from the code. I just started learning Java so I am getting up to speed AQAP but have so much to learn.

My code

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
$w ( ‘#programs’ ). onReady (() => {

const isChecked = $w ( ‘#checkbox1’ ). checked ;

if  ( isChecked ) { 
    $w ( '#columnStrip39' ). expand (); 

    if  ( $w ( '#session1StartDate' ). text . slice ( 0 , 14 ) === ( $w ( '#session1EndDate' ). text . slice ( 0 , 14 ) &&  $w ( '#session2EndDate' ). text . slice ( 0 , 14 ))) 
        { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text } 
    **else** 
        { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text . slice ( 0 , 6 ) +  " - "  +  $w ( '#session2EndDate' ). text } 
} 
**else if**  ( isChecked  ===  **false** ) { 
    $w ( '#columnStrip39' ). collapse (); 

    if  ( $w ( '#session1StartDate' ). text . slice ( 0 , 14 ) ===  $w ( '#session1EndDate' ). text . slice ( 0 , 14 )) 
    { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text } 
    **else**  { $w ( '#dateStartAndEnd' ). text  =  $w ( '#session1StartDate' ). text . slice ( 0 , 6 ) +  " - "  +  $w ( '#session1EndDate' ). text } 
}

})
});