Content of accordion/section expandable is expanded automatically on data refresh

Content of accordion/section expandable is expanded automatically on data refresh

  

Hello, 

I've been struggling lately with 2 different implementation wher I keep running into the same problem.I have the concept of a master-detail screen that I wanted to be implemented as a "grid within a grid"


In the first approach I used a section expandable integrated in a table, as the first column of a row but it turns out quite messy in terms of responsiveness , and then i switched to a record list with accordions. 

The thing is, in both implementations, if I expand a section/an accordion, when i switch to the next page, the content AT THE SAME INDEX as the previously opened item is kept as extended. 

Has somebody else ran into this problem?


PS: I already tried javascript fixes in the following form ( this on the Accordion implementation) : 

( the section expandable has an .expanded class when expanded, and the accordion an .open one) : 

SyntaxEditor Code Snippet

"$('.AccordionVertical_item').each( function() {
    $(this).removeClass('open');
});"

Hello Lorena,

Try to "click" the accordion instead of removing the tag, before refreshing the list, as I think (may be wrong), the active item is stored in a session variable (internal to SilkUI), as this would explain this behavior after the refresh. 

In that case, remove the class would not work, as after the refresh, the item is build again with the class.

Cheers.

Solution

P.S. I just tested.

You can add a RunJavaScript before the Ajax Refresh of the table, with the following code:

"$('.AccordionVertical_item.open .AccordionVertical__header').click();"

Hopefully this will be enough to solve it.

Cheers.

Solution

Hi Eduardo,


Thank you so much for your suggestion. It works indeed.

The only thing that is quite annoying is that the ajax refresh is running in paralel with the javascript (I guess), because the transition looks like this (I moved the script as the first node of the action but it didn't help): 

Hi Lorena.

Yes, I feared that.

Contrary to what I thought, there is no "session" variable involved. It is just javascript controlling this (at first).If you wanna get your hands "dirt", you can clonse the Accordion and the AccordionVertical blocks from the WebPatterns, and change this small piece of code:

This code (the commented part) is the one responsible for keeping the accordion opened.
If you replace with the code ai put there, it will not keep the accordion opened on refresh.

Be careful, because this can have undesirable side effects...
But It will solve this problem in this situation.

Cheers.

P.S: I never did this, but maybe another option would be to "replace" the javascript code, when building the page, using JavaScript, like, removing the listeners and reinitializing with a custom code like this. But I think this is even worse in terms of maintenability.

Thank you for your effort, Eduardo. Much appreciated !

You are right in terms of solutions and risks, I think the current behavior is acceptable and the code is easier to maintain as well. 

Cheers, have a nice day ! 

Lorena Sabou wrote:

Thank you for your effort, Eduardo. Much appreciated !

You are right in terms of solutions and risks, I think the current behavior is acceptable and the code is easier to maintain as well. 

Cheers, have a nice day ! 

Cheers! :)