Collapse not working on next/previous item page.

Hi there,
I’ve got my next/previous item page to work perfectly (without custom code) but I need certain elements to collapse on each item page. I’ve written the below code to collapse certain elements and it works BUT ONLY ON THE FIRST ITEM PAGE. When I click to go to the second item page the collapse function does not work. How do I re run the code when I go to the next item page?

$w . onReady ( function () {

$w ( "#dataset1" ). onReady ( **function**  test  () { 
    
    **let**  vidValue  =  		   $w ( "#dataset1" ). getCurrentItem (). videoFlag ; 
   console . log ( vidValue ); 
   **let**  jourValue  =  $w ( "#dataset1" ). getCurrentItem (). journalFlag ; 
   console . log ( jourValue ); 
   **let**  audValue  =  $w ( "#dataset1" ). getCurrentItem (). audioFlag ; 
   console . log ( audValue ); 

    **if**  ( vidValue  ==  1 ) { 

        $w ( '#videoBox1' ). expand (); 

        $w ( '#videoBox1' ). show (); 

    }  **else**  { 

        $w ( '#videoBox1' ). collapse (); 

        $w ( '#videoBox1' ). hide (); 

    
    
    } 

    **if**  ( jourValue  ==  1 ) { 

        $w ( '#text16' ). expand (); 

        $w ( '#text16' ). show (); 

    }  **else**  { 

        $w ( '#text16' ). collapse (); 

        $w ( '#text16' ). hide (); 

    
    
    } 

    **if**  ( audValue  ==  1 ) { 

        $w ( '#audioPlayer1' ). expand (); 

        $w ( '#audioPlayer1' ). show (); 

    }  **else**  { 

        $w ( '#audioPlayer1' ). collapse (); 

        $w ( '#audioPlayer1' ). hide (); 

    } 

}); 

});

Thanks!

So the ==1 in my code is just a flag in the dataset because for some reason I couldn’t get code to work on an empty cell so I added in a flag in the dataset either 0 or 1 to tell me if the cell was empty or not. So I don’t think the ==1 has anything to do with the item page. But I could be wrong! Would I need to add in a loop that adds 1 when the “next item” button is clicked?

Hi Jasper the “getCurrentItemIndex” looks helpful. I’ve consoled logged it and I can see the item index working.

However regardless of all the code I’ve used I keep getting this error when I click to the next item page and could this be why the code doesn’t run on the second item page? . " Wix code SDK error: The “src” property cannot be set to “”. It must be a valid image URL starting with “http://”, “https://” or “wix:image://”, or a valid video URL starting with “wix:video://”."

I think this might be the root cause. I think it’s because I have empty cells in my dataset? How do I get around this?

For your image/video to display it must have a source = src. It appears you have a null string to the src of your image/video. Do you have a code for it to set the src with a valid image/video URL or your dataset has no image/video source?

It’s because my dataset had no video. I’ve just filled the dataset with some dummy video file and the error has disappeared. using the getCurrentItemIndex even when I click the next item button it says currentitemIndex is still “0” in the console even though I can see on the website that I’ve gone to item index 2,3. It’s like the console log doesn’t update when I click the ‘next item’ button on the website. It just says stuck on zero.

The error occurs because you are trying to display a video but you have no video source in your dataset. Good to know you fixed it by adding dummy videos. Can you share your code here and I’ll try to see what could be the problem and hopefully help you with it.

$w ( “#dataset1” ). onReady ( function test () {

    **let**  index  =  $w ( "#dataset1" ). getCurrentItemIndex () 
     console . log  ( index ) 
  
    
    **let**  vidValue  =  $w ( "#dataset1" ). getCurrentItem (). videoFlag ; 
   console . log ( vidValue ); 
   **let**  jourValue  =  $w ( "#dataset1" ). getCurrentItem (). journalFlag ; 
   console . log ( jourValue ); 
   **let**  audValue  =  $w ( "#dataset1" ). getCurrentItem (). audioFlag ; 
   console . log ( audValue ); 

    **if**  ( vidValue  ==  1 ) { 

        $w ( '#videoBox1' ). expand (); 

        $w ( '#videoBox1' ). show (); 

    }  **else**  { 

        $w ( '#videoBox1' ). collapse (); 

        $w ( '#videoBox1' ). hide (); 

    
    
    } 

    **if**  ( jourValue  ==  1 ) { 

        $w ( '#text16' ). expand (); 

        $w ( '#text16' ). show (); 

    }  **else**  { 

        $w ( '#text16' ). collapse (); 

        $w ( '#text16' ). hide (); 

    
    
    } 

    **if**  ( audValue  ==  1 ) { 

        $w ( '#audioPlayer1' ). expand (); 

        $w ( '#audioPlayer1' ). show (); 

    }  **else**  { 

        $w ( '#audioPlayer1' ). collapse (); 

        $w ( '#audioPlayer1' ). hide (); 

    } 



});

What element does your dataset connected to? A repeater or what? Is your site published? Can I see it for me to visualize what is happening with what you are trying to do.

Yes it’s a repeater on dynamic page

Hi Jasper,

I did try your code, it worked only for that static page but this won’t work for a dynamic page which relies on retrieving the current item on page. I’m getting SOOOO close with the below code but the current item is one behind, i.e. when I click the button I expect to console log the second item but it gives me the first item. Similarly if I click the button again I expect to console log the third item but it gives me the second item. So I feel like I am on the right track! I think it has something to do with the data not loading fast enough on the page before the item is read.

$w.onReady( function () {

$w("#dataset1").onReady( **function**  () { 

 **let**  currentItemData = $w("#dataset1").getCurrentItem().flag; 

 console.log(currentItemData); 

$w(“#button2”).onClick( (event) => {

   **let**  $item =  $w. at( event.context );  

**let**  clickedItemData = $item("#dataset1").getCurrentItem(); 

console.log(clickedItemData.flag); 

} );
});

});

Thanks
Harmeet

@harmeetsoor2013 try referencing your dynamicDataset instead of your dataset1 because you are working with a dynamic page.