1 2 Previous Next 21 Replies Latest reply: Nov 1, 2012 2:53 PM by user448048 RSS

    New themes in APEX 4 not working with JQuery tabs

    343460
      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-Oracle
          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
            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
              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-Oracle
                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
                  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-Oracle
                    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
                      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-Oracle
                        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
                          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
                            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
                              Keith M. Swartz-Oracle
                              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-Oracle
                                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
                                  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-Oracle
                                    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