Single Article

How to preserve selected jQuery accordion after submit

Category APEX and jQuery

Here is how you can preserve selected jQuery accordion after submit.
I have used hidden page item to hold selected accordion index.

First, you need create regions and setup jQuery accordion.
Then create hidden page item:

  • Display As: Hidden
  • Source Used : Only when current value in session state is null
  • Source Type: Static Assignment (value equals source attribute)
  • Source value or expression: 0
  • Default value: 0
  • Default Value Type: Static Text with Session State Substitutions

Then add to jQuery accordion option "active" and event "change". Here is example JavaScript where Px_ACTIVE is your hidden item name:

<script type="text/javascript">
$(function(){
 $("#accordion").accordion({
  header:"h2",
  collapsible:true,
  active:&Px_ACTIVE.,
  change:function(e,u){
   var a=new htmldb_Get(null,&APP_ID.,"APPLICATION_PROCESS=DUMMY",&APP_PAGE_ID.)
   a.add("Px_ACTIVE",u.options.active);
   var r=a.get();
  }
 });
});
</script>

See more info about jQuery accordion from jQuery UI Demos & Documentation.

Comments

  • Jari Laine 13-NOV-14

    Hi Mark,

    Example JavaScript do have those options for jQuery UI accordion.

    This blog post is quite old and I did probably write it for APEX 4.0 or 3.2.


    It might help if you explain in detail what you really try archive, what is APEX version you working with and post some example on apex.oracle.com.

    Regards,
    Jari

        
  • Mark BT52 13-NOV-14

    Thanks Jari, but I mean how are you using it in Apex. How are you adding that code to the Accordion? A DA on the Accordion region? If so, on what event.

    (I'm using it in page zero by the way)

    Thanks for your help

    Regards

    Mark

        
  • Jari Laine 13-NOV-14

    Hi Mark,

    Please see jQuery UI documentation for Accordion Widget

    Regards,
    Jari

        
  • Mark BT52 12-NOV-14

    Hi, can you clarify what ' Then add to jQuery accordion option "active" and event "change" ' means?

        
  • Jari Laine 12-SEP-14

    Hi Nani,

    You need reset item session state where active tab index is saved.

    Regards,
    Jari

        
  • Nani 12-SEP-14

    Hi,

    Your Example is simply Superb. Small Doubt. after submit it takes back to the Active tab and when we come back to that from another page. It still shows the active tab. Can you please help me how to get back to the default 0 tab.

        
  • Jari Laine 09-OCT-13

    Hi Scott,

    How it do not work? Any errors?

    Please create example to apex.oracle.com

    Regards,
    Jari

        
  • scott 09-OCT-13

    Jari,

    I need your help. i created standard jquery accordion in apex 4.1 and it works correct but now i do the same in 4.2 with theme 22 but it doesn't work can you pls tell me what might be the problem, i've search all over but no idea what the problem here..thank you.

        
  • Jari Laine 24-JUL-12

    Hi Alexandr,

    When I run your page I can see JavaScript errors. Take Firefox and Firebug add-on and check from console those JavaScript errors.

    Regards, Jari

        
  • Malysh 24-JUL-12

    Hi Jari, I tried this code in my application in dynamic action but its not working.

    http://apex.oracle.com/pls/apex/f?p=42611:LOGIN:895932448153901

    username/password: demo/demo Plase help me. Regards, Alexandr

        

Global Right Column

Archives

Subscribe in a Reader