Drop down in repeater not working

Ask the community
,
1

I have added a dropdown to the main description text part in my repeater, which is sourcing the information from a dataset. I have used this exact code on a previous site and it worked perfectly. I assumed I could copy it over, swap out the IDs and it would just work again - however - nothing.

This is the code I am using -

$w.onReady( function () {
$w( “#ItineraryDataset” ).onReady(() => {
$w( “#ItineraryRepeater” ).onItemReady(() => {
$w( “#DayDescription” ).collapse();
})
})
});

export function downArrow_click(event) {
//Add your code for this event here:
let $item = $w.at(event.context);
$item( “#downArrow” ).hide();
$item( “#upArrow” ).show();

let selectedItem = $item( “#ItineraryDataset” ).getCurrentItem();
let description = selectedItem.description;
$item( “#DayDescription” ).expand();
}

export function upArrow_click(event) {
//Add your code for this event here:
let $item = $w.at(event.context);
$item( “#upArrow” ).hide();
$item( “#downArrow” ).show();

let selectedItem = $item( “#ItineraryDataset” ).getCurrentItem();
let description = selectedItem.description;
$item( “#DayDescription” ).collapse();
}

1478×884 102 KB

This is what I am looking at in the editor, with the crossed-out section being the collapsed area.

2232×900 70.9 KB

On the front end it looks fine (bar a little tidying up) however when clicking the down arrow, nothing happens?

Thanks in advance for your help

2

Have you checked that the event handler functions have been added through the properties panel for the new page?

If you want to avoid this then you can always look at writing the event handler function into the code itself, so that you won’t need to use the event handler in the properties panel.

export function upArrow_click(event) {
// onClick event added through properties panel //

$w("#upArrow").click( (event) => {
// with all events added in the code above //
3

Thank you for your reply

I added ;

exportfunction downArrow_click(event) { //Add your code for this event here:

By clicking the plus next to the ‘onClick’ for the new page? And then pasted the code in, changing the relevant names over to suit?

I am far from an expert in this, but I did feel like I nailed it last time, I’m not sure why it won’t work now?

Thanks again

4

If it is all working on another site, then as you have access to this I would simply go back and double check that other sites page where you copied it from against your current page to see if you have missed out anything like adding an event handler function through the properties panel.

If it is all working on your other existing site, then the things that you need to check for on the new sites page…

That all element id names on the new page are the same as you are using in code on the new page;

  • The dataset added to the new page must be setup as the previous sites dataset on the page, for example is it set to read, read and write or write?;

  • The dataset on the new page must be connected to the appropriate fields of the dataset that you should be using for this page;

  • You have added all of the needed event handler functions in the properties panel for the elements on the new page.

With regards to the event handlers on the new page, you need to be adding them through the properties panel as shown in this pic here.

1680×915 304 KB

The places that would need them added are your upArrow and downArrow elements as shown in red here.

Now note that you have more than the one upArrow and downArrow, so you will need to add an onClick event for each upArrow and downArrow on your page.

Therefore you would need to call all your upArrows and downArrows with different names, they can’t be the same used for each upArrow and downArrow element.

You can easily just call the upArrows like this with the first one called upArrow, second one called upArrow1 and so on.

The same with downArrow with the first one called downArrow, second one called downArrow1 and so on.

Therefore when you add the onClick event for each upArrow and downArrow they will be added to your page code as such…

export function upArrow_click(event) {
//Add your code for this event here: 
}

export function upArrow1_click(event) {
//Add your code for this event here: 
}

export function downArrow_click(event) {
//Add your code for this event here: 
}

export function downArrow1_click(event) {
//Add your code for this event here: 
}

If you already have the code on your page, as you do for the first upArrow and downArrow, then note that the nake in the properties panel will add a extra _1 onto the end of the code and you will need to delete this extra _1 if you want to to correspond with your existing up or down arrow.

So, for example if you don’t delete the extra _1, it will add the code to the page something like this…

export function downArrow1_1_click(event) {
//Add your code for this event here:
 }

Therefore it won’t be applied to your existing downArrow and it will only work on an element on your page with the id name of downArrow1_1.

You can see an example of how to do it in this tutorial here with all the up and down arrows called through one chunk of code, although this example uses containers that are expanded and collapsed instead of being in repeaters, so you will need to code it for a repeater if you try to use it for your own site.

So, probably easier for you to keep it as it is unless you want to redo your site.

5

Brilliant!

Sorry for the delay getting back to you, but thank you for such a comprehensive reply!

I am to say it is now sorted :grin: