Single Article

How to preserve selected jQuery tab after submit

Category APEX and jQuery

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

First, you need create regions and setup jQuery tabs.
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 tabs option "selected" and event "select". Here is example JavaScript where PX_SELECTED_TAB is your hidden item name.

<script type="text/javascript">
$(function(){
 $("#tabs").tabs({
  selected:'&PX_SELECTED_TAB.',
  select:function(e,u){
   var a=new htmldb_Get(null,&APP_ID.,"APPLICATION_PROCESS=DUMMY",&APP_PAGE_ID.)
   a.add("PX_SELECTED_TAB",u.index);
   var r=a.get();
  }
 });
});
</script>

 

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

See working sample.

Comments

  • Jari Laine · 9 Mar 2016  

    Hi Alexandra,

    No problem. Great you did find solution.

    Regards,
    Jari

        
  • Alexandra Robin · 8 Mar 2016  

    disregard my first post. I found an answer on the Oracle Apex Site and I apologize for the redundant code I copy and pasted here. It was not clear to me how my comment was going to be displayed.

        
  • Alexandra Robin · 8 Mar 2016  

    Hi Jari -

    Refer to this:

    http://jaris.blogsite.org/apex/f?p=BLOG:READ:0::::ARTICLE:195800346705831

    All my tabs work beautifully except that I don't understand this part of your directions. Where do I add it?

    Then add to jQuery tabs option "selected" and event "select". Here is example JavaScript where PX_SELECTED_TAB is your hidden item name.

    <script type="text/javascript">

    $(function(){

    $("#tabs").tabs({

    selected:'&PX_SELECTED_TAB.',

    select:function(e,u){

    var a=new htmldb_Get(null,&APP_ID.,"APPLICATION_PROCESS=DUMMY",&APP_PAGE_ID.)

    a.add("PX_SELECTED_TAB",u.index);

    var r=a.get();

    }

    });

    });

    </script>

        
  • Jari Laine · 30 Sep 2012  

    Hi mohan,

    There was no need really create that app process time I did post this.
    But you can create app process using source

    htp.prn('OK');

    Regards,
    Jari

        
  • mohan · 28 Sep 2012  
    Hi , I just followed your blog to preserve selected jQuery tab after submit and i just tried in my application. But it is not working for me. Can you please share the code for the application process 'DUMMY' Thanks & Regards, MohanReddy     
  • Suleman_Imdad · 15 Feb 2012  
    It works like a charm but it will not remember the last value unless you also do the following: You should also set value of this item PX_SELECTED_TAB using dynamic action of event Type 'Before Page Submit' and in actions say 'Set Value' using 'Javascript expression' and it should be using javascript expression
    $('#tabs').tabs("option", "selected");
    put PX_SELECTED_ITEM (Remember to replace #tabs with the static id of your main tab region and PX_SELECTED_ITEM should be the actual item name) Thanks, Suleman.     

Global Right Column

Search

Archives

Subscribe in a Reader