This discussion is archived
1 2 Previous Next 21 Replies Latest reply: Nov 1, 2012 12:53 PM by 451051 RSS

New themes in APEX 4 not working with JQuery tabs

343460 Newbie
Currently Being Moderated
Hi,
JQuery tabs only showed on themes 13, 15, 18, 20.
When I swicth to other themes, its not displayed like tabs
  • 1. Re: New themes in APEX 4 not working with JQuery tabs
    Patrick Wolf Employee ACE
    Currently Being Moderated
    Works fine for me. Just tried it out with theme 1. Have a look at http://apex.oracle.com/pls/apex/f?p=2672:3

    What is actually not working for you? Can you create a test case on apex.oracle.com?

    Regards
    Patrick
  • 2. Re: New themes in APEX 4 not working with JQuery tabs
    343460 Newbie
    Currently Being Moderated
    For page I set Execute when Page Loads
    +$x("tabs").appendChild( $x("tabs-1"));+
    +$x("tabs").appendChild( $x("tabs-2"));+
    jQuery("#tabs").tabs();

    and HTML Header
    +<link href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />+
    +<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>+

    For HTML region, I set Region Source
    +<<div id="tabs">+
    +<<ul>+
    +<<li><Employee<<</li>+
    +<<li><Chart<<</li>+
    +<</ul>+
    +<</div>+


    For Dept region, I set Static ID
    tabs-1

    For Emp region, I set Static ID
    tabs-2

    Edited by: hlthanh on Jul 12, 2010 4:54 PM

    Edited by: hlthanh on Jul 12, 2010 4:55 PM
  • 3. Re: New themes in APEX 4 not working with JQuery tabs
    343460 Newbie
    Currently Being Moderated
    Hi,
    I have found the problem. I rename tabs to mytabs and its works.
    Thanks
  • 4. Re: New themes in APEX 4 not working with JQuery tabs
    Patrick Wolf Employee ACE
    Currently Being Moderated
    Hi,

    you can simplify the the usage of jQuery tabs in APEX 4.0. You don't have to create hard coded JavaScript code for each page where you want to use them. Just use the new "Sub Region" feature and a corresponding region template.

    Here is what you have to do:

    1) Create a new template of type "Region" (create one from scratch)
    a) Name: jQuery Tabs
    b) Template Class: Custom 1
    c) Template:
    <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
    #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
    </div>
    <link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
    
    <script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    apex.jQuery(function() {
      apex.jQuery("##REGION_STATIC_ID#").tabs();
    });
    </script>
    d) Sub Regions - Header Template:
    <ul>#ENTRIES#</ul>
    e) Sub Regions - Header Entry Template:
    <li><a href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>
    f) Sub Regions - Template:
    <div id="#REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION#</div>
    2) On the page where you want to have jQuery tabs, add a new "HTML" region which acts as the container for the "tabs". Set the region template to your new "jQuery tabs" template.
    3) Create as many sub regions (that are the actual tabs). It's just important that you set the "Parent Region" to your container region you just created before. As region template I would pick "No Template" or any other template you want to have.

    That's it. As you can see now from the region structure it's very obvious for any developer developer what regions are part of the jQuery tabs.

    Regards
    Patrick
  • 5. Re: New themes in APEX 4 not working with JQuery tabs
    Bhavin Explorer
    Currently Being Moderated
    Hi Patrick,

    Thanks very much for your posting in regards to working with jQuery Tabs.

    I have followed your instructions/steps but some how it does not work for me. Can you please have a look for me, am I missing something?

    Regards,
    Bhavin
  • 6. Re: New themes in APEX 4 not working with JQuery tabs
    Patrick Wolf Employee ACE
    Currently Being Moderated
    Hi Bhavin,

    if you provide me the workspace, user, password and the application and page where it's not working I can have a look.

    Regards
    Patrick
  • 7. Re: New themes in APEX 4 not working with JQuery tabs
    Bhavin Explorer
    Currently Being Moderated
    Hi Patrick,

    Thanks very much for your prompt reply.

    ws: bhavin_apex
    un: bhavin_dev
    pw: bhavin_dev

    application: 34968 (PAM v4.0)
    page: 903

    Regards,
    Bhavin
  • 8. Re: New themes in APEX 4 not working with JQuery tabs
    Patrick Wolf Employee ACE
    Currently Being Moderated
    Hi Bhavin,

    I have made the following changes.

    1) I have commented out the jQueryUI files in your page template so that they are not loaded twice (but that was not the problem why it didn't work)
    2) Changed the template of your sub regions to "No Template" so that they look better with the tabs
    3) Modified the PAM jQueryUI tabs template to use ## as they have been in my original step by step instruction. The double # was by intention and is needed by jQuery :-)

    Now it's working!

    Regards
    Patrick
  • 9. Re: New themes in APEX 4 not working with JQuery tabs
    Bhavin Explorer
    Currently Being Moderated
    Hi Patrick,

    Thanks very much for sorting out the problem and pointing me where I was wrong.

    Regards,
    Bhavin
  • 10. Re: New themes in APEX 4 not working with JQuery tabs
    Bhavin Explorer
    Currently Being Moderated
    Patrick,

    Further to your help tab page is working fine but I need little change in my tabs behavior.

    How can I select Tab 2 (Form Tab) on selection of particular "Code" field value from Tab 1 (Report Tab).

    Regards,
    Bhavin
  • 11. Re: New themes in APEX 4 not working with JQuery tabs
    567803 Newbie
    Currently Being Moderated
    It should be noted that if you used JQuery UI tabs in ApEx 3.2, and upgraded to ApEx 4.0, they will no longer work without making the changes described here, which I believe is because the tabs library is not included default. I would have liked to see this mentioned in the Release Notes.

    As a workaround, I just loaded the standard jquery-ui.tabs.min.js after the apex libraries loaded. That allowed my page to work without modification (so it can be properly updated at a later date).
  • 12. Re: New themes in APEX 4 not working with JQuery tabs
    Patrick Wolf Employee ACE
    Currently Being Moderated
    Hi,

    to be honest we didn't really expect that somebody is loading there own JavaScript files before the APEX standard JavaScript libraries, because most time they are relying on function defined in them. As you already mentioned, if the files are included after the standard libraries (after the #HEAD# placeholder in the page template) everything is fine, because we are namespacing the jQuery library to apex.jQuery so that we are not in conflict with other jQuery or jQueryUI versions. The problem is that if they are loaded before our own libraries we don't properly handle that and just overwrite them. We will have a look if we can fix that or at least document that in the readme.

    Thanks
    Patrick
  • 13. Re: New themes in APEX 4 not working with JQuery tabs
    37951 Newbie
    Currently Being Moderated
    Hi Patrick -- this works great -- thanks so much!

    Question -- I'm using one of the standard themes, and would prefer my "Form Template" sub-region (one of the tabs) still have that template (I like to coloring). But unless I switch it to "No Template", the tabset border does not encompass the sub-region -- it cuts off at the top. In other words, my "form region" has a colored box around it, but the jQuery tab border cuts "through" it, and doesn't go all the way around my region. How can I fix that?

    Thanks!
    David
  • 14. Re: New themes in APEX 4 not working with JQuery tabs
    Patrick Wolf Employee ACE
    Currently Being Moderated
    Hi David,

    can you put an example on apex.oracle.com so that I can see it and play around with it? Please provide the workspace, user and password and the affected application and page as well.

    Regards
    Patrick
    -----------
    My Blog: http://www.inside-oracle-apex.com
    APEX 4.0 Plug-Ins: http://apex.oracle.com/plugins
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points