Skip to Main Content
Posted on

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.

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:

    https://blog.jaris.fi/apex/f?p=401:POST:::NO:RP:P2_POST_ID: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.