Collapsing repeater elements in dynamic page & clickable links via code

Hi all,

I’m just starting to get familiar with Wix code, so I’m sure there’s an easy solution to what I’m doing wrong. But, I’ve stared at the reference pages long enough that they’re starting to laugh at me, so I figured I’d reach out.

I have two primary issues:

First, I am trying to dynamically resize the repeater container for each item based on whether or not it’s primary data field is filled or not. Essentially, each container will have a date attached to it. If the date is in the future, I would like it to only display the date and the container should be sized proportionately. If the date is in the past, the container should display the date and the connected data, and will be larger as a result. The expand() function seems to be working, but the size of the container doesn’t change either way.

Second, the data will consist of one or more links to (another) dynamic page on the site. The code below is displaying the web address but is not clickable. Is there an easy solution to this?

I’m struggling through, but feeling like I’m missing the basis for a lot of the syntax in Wix code. “==” vs. “===”, for example. I’ve looked through the Hello World example and a host of others, but if anyone can recommend a comprehensive guide to the basics, I’d be deeply grateful.

Best,

Justin

import wixData from "wix-data";

$w.onReady(() => { //page loads

            $w("#dynamicDataset").onReady(() => { //dataset loads

 let Client = $w("#dynamicDataset").getCurrentItem(); //page subject
                    $w('#DogName').text = Client.dogsNameId + "'s"; //page header
                    $w("#sessions").onReady(() => {
                                $w("#sessionRepeater").forEachItem(($w, itemData, index) => { //set repeater item values
                                    console.log(String(index)); // position in loop
                                    SetSession(itemData, $w)
 
 if (itemData.completed) { //check boolean for whether or not to display
                                        console.log("in test"); //confirm check passed
                                        $w("#group7").expand(); //expand group holding primary repeater value
                                        $w("#ratingsInput1").expand();
                                        $w('#topics').html = itemData.reviewTopic1; //set primary repeater value
                                        $w('#topics').text = itemData.reviewTopic1; //set text for primary repeater value
                                    }
                                })
                            });
 
                    });

            });

 function SetSession(itemData, $w) {
            console.log("the session in this part though is " + String(itemData.session));
            $w('#session').text = "Session: " + String(itemData.session) + " of " + String(itemData.currentPackage); //set repeater heading
            $w('#date').text = String(itemData.sessionDate.toLocaleDateString()); //set repeater heading
        }

 

OK, I think I’ve sorted out my issue with the forEachItem(). I’m working with a dynamic dataset and an additional standard dataset. I was missing an onReady() regarding the standard dataset. Including that seems to have taken care of the forEachItem() issue.

Still trying to sort out the dynamic resizing for the containers in the repeater and having clickable links per above. I’ve added a new issue to the mix, however. In an attempt to clean up the code a bit, I decided to use a function to set some of the data. It works like a charm on the first page, for all numbers of items that I’ve tested. It doesn’t work at all on the second page, for any number of items that I’ve tested. I’m thinking I have an issue with variable locality, but open to any insight!

function SetSession(itemData, $w) {
            console.log("the session in this part though is " + String(itemData.session));
            $w('#session').text = "Session: " + String(itemData.session) + " of " + String(itemData.currentPackage); //set repeater heading
            $w('#date').text = String(itemData.sessionDate.toLocaleDateString()); //set repeater heading
        }

Not sure I can help on that question other than I am using repeaters without code and they expand to the database content fairly well. Maybe its the wrong type of container for the content?

Also, regarding the basics, like on the operators you mentioned, I just bought this book and it is laid out quite well! https://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647/ref=sr_1_4?s=books&ie=UTF8&qid=1550599532&sr=1-4&keywords=javascript+and+jquery+duckett
I know enough of Java, Javascript, and HTML (which is still basic) to know that its a good book.

Hi Jacquealope,

I read your post and immediately had one overwhelming thought. “Yikes!” I hate to ask for help without at least trying myself, so after hours of time playing with the code, watching tutorials, on the reference pages, I felt justified in asking. Which makes it all the scarier that I was hung up on the idea that this was “Wix Code” and never realized I was working with JavaScript… terribly embarrassing. Thank you for breaking it to me kindly! And, that should make this process substantially easier.

Regarding the repeater, you’re probably right. The dataset that I’m working with and the result I’m looking for are a bit wonky together, I just haven’t figured out a better fit. But! Now that I know what language I’m actually coding in, I think I can probably adjust.

Thanks again!

@beyondobediencetrain cool beans! I also struggled to figure out getting started as well thinking it was some weird language but once I debugged my own small code (that was exact from the example almost so it drove me nuts!) I started to remember some of the Java I forgot and got so excited I bought a book on it and downloaded some code editors on my Mac. Also learning how the boxes and other elements all had their own names and you have to create an “event” in the properties to make it work, not just calling it out in the script.

PS- there is a language called WiX and I saw a few books on it but it looked like it was some windows application type language… VERY confusing. They were online so I couldn’t look at it and maybe its what I need but no idea!