Simple .expand onClick not working.

Ask the community
,
1

  • I am producing a repeater fed by collection data and that is filtered by user input from a drop-down selector.

  • I would like the repeater to remain collapsed until the ‘What type of device’ drop-down is clicked, at which point it gets expanded.

1290×460 52.5 KB

ELEMENTS

  • DataSet => Filter repeaters based on user selection from drop-down selectors above.

  • DataSet => Filter table data in repeaters based on other dataset.

  • deviceType => ‘What type of device’ dropdown.

  • repeater1 => repeater

ISSUES

  • .expand() is not working when onClick event is triggered.

  • .collapse(). DOES work in testing. Very strange.

  • console.log(collapsed) === ‘false’ after event trigger even though nothing is showing and red-line test shows no movement before/after trigger event.
    TESTING

  • Swapped .expand and .collapse around. Expand does not work, Collapse DOES work.

  • Toggled click event handler in Properties & Events panel and also hard-coding.

  • Toggled default collapsed condition in Properties & Events panel and hard-coding.

  • Tried various mouse event triggers - none work that I can tell.

  • Added red line outside repeater to see if it moved before/after trigger. It does not.
    CODE

$w.onReady(function () {
    
});

$w("#repeater1").collapse();
console.log('Repeater is collapsed?: ', $w("#repeater1").collapsed) 

export function deviceType_click(event) {
$w("#repeater1").expand();
console.log('Repeater is collapsed?: ', $w("#repeater1").collapsed);
}

/////////IT'S NOT THAT COMPLICATED!!

DEV CONSOLE/PREVIEW
Note:

  • Red line not moved after click event.

  • Collapsed condition console logs before (‘true’) and after (‘false’) click event.

2042×523 24.3 KB

All thoughts gratefully received. Am fully expecting a forehead slapping ‘of course!’ moment as I miss something completely obvious…

Thank you.

2

Hi there :wave:t2: The big issue I see is that your collapse code is not within the onReady for the page. Your code should look like this:

$w.onReady(function () {
    // This code should be up here
    $w("#repeater1").collapse();
    console.log('Repeater is collapsed?: ', $w("#repeater1").collapsed)
});

export function deviceType_click(event) {
    $w("#repeater1").expand();
    console.log('Repeater is collapsed?: ', $w("#repeater1").collapsed);
}

I would also verify that your click event is registered correctly in the properties panel. Sometimes I accidentally delete or rename things.

If this doesn’t work, you might also try using onChange instead of onClick for the dropdown selector.

Good luck!

3

That works! Thank you very much and you should be able to hear the sound of me slapping my forehead. I do need to research the in’s and out’s of what goes in and out of the onReady function…

Again, thank you. I can now move on.
Paul