14 Replies Latest reply: Sep 21, 2012 5:19 PM by 963662 RSS

    When using APEX.jQuery() - Syntax...?

    Juergen
      Hi,

      I have migrated to Apex 4.02 and had an old jQuery Version running on 3.2.

      Now I have learned that I can use the build in jQuery Libs which load not all UI functionality but additional UI components can be loaded from the APEX - Lib.

      I have read that APEX renamed its jQuery implementation to APEX.jQuery().

      I have thrown away my old jQuery Libs ( only the standard APEX jQuery Libs are loaded ), but my jQuery invokes are still working with $().

      So when do I have to use the syntax APEX.jQuery() and why is $() still working...?

      Thanks, Juergen
        • 1. Re: When using APEX.jQuery() - Syntax...?
          vee
          The apex.jQuery() should be a reference for the builtin jQuery file's function, probably to avoid any conflicts with another version of jQuery being used in the same page(or any JS library which uses that function name). Otherwise, it should be interchangeable with the $() reference.

          But before apex was included with jQuery , u would have to include it yourself. So only the reference methods $() and jQuery() would be available by default(unless u manually added another no-conflict shortcut )

          Check the following page for further info on this jQuery feature
          <b>http://docs.jquery.com/Using_jQuery_with_Other_Libraries</b>
          • 2. Re: When using APEX.jQuery() - Syntax...?
            Juergen
            Do you mean without loading my own version a jQuery I can reference the APEX 4 included jQuery with apex.jQuery() AND $()...?

            But when loading my own version of jQuery I can reference the APEX-jQuery Libs via apex.jQuery() and my own jQuery Libs with $()...?
            • 3. Re: When using APEX.jQuery() - Syntax...?
              peter_raganitsch
              Hi Juergen,

              yes, you got the point.

              APEX namespaced the included jQuery Version to apex.jQuery, so that you can use a different version of jQuery without corrupting the APEX functionality.

              Your own included version of jQuery can be referenced by $ or jQuery or whatever name you give to it.

              brgds,
              Peter

              -----
              Blog: http://www.oracle-and-apex.com
              ApexLib: http://apexlib.oracleapex.info
              BuilderPlugin: http://builderplugin.oracleapex.info
              Work: http://www.click-click.at
              • 4. Re: When using APEX.jQuery() - Syntax...?
                vee
                Do you mean without loading my own version a jQuery I can reference the APEX 4 included jQuery with apex.jQuery() AND $()...?
                Yes,In Apex 4, you can refer the bultin(included) jQuery Version using apex.jQuery or *$* methods.
                But when loading my own version of jQuery I can reference the APEX-jQuery Libs via apex.jQuery() and my own jQuery Libs with $()...?
                If however you want to load your own version of jQuery(say a newer version than apex's 1.4) ,You can refer to the new jQuery version using the jQuery( or *$(* methods and the bultin one using apex.jQuery

                If you want use an unambiguous shortcut you can use the noconflict method to alias the jQuery method(< a href="http://api.jquery.com/jQuery.noConflict">http://api.jquery.com/jQuery.noConflict</a>).
                For example
                <script type='text/javascript'>  
                var $J = jQuery.noConflict();  
                </script>
                <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> 
                So builtin jQuery can be accessed *$J(* (*apex.jQuery(* is also available) and your new one would be available with *$(* or jQuery(.
                • 5. Re: When using APEX.jQuery() - Syntax...?
                  lake
                  In this system how does anyone know what version of jquery the apex.jQuery method is using?
                  If I look at the page source of our apex install:
                  <link rel="stylesheet" href="/i/css/apex_4_0.css" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_4_0.css" type="text/css" /><![endif]--><link rel="stylesheet" href="/i/libraries/jquery-ui/1.8/themes/base/jquery-ui-1.8.custom.min.css" type="text/css" /><script type="text/javascript">var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;</script><script src="/i/libraries/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
                  <script src="/i/javascript/apex_4_0.js" type="text/javascript"></script>
                  <script src="/i/javascript/apex_legacy_4_0.js" type="text/javascript"></script>
                  
                  <script src="/i/javascript/apex_widget_4_0.js" type="text/javascript"></script>
                  <script src="/i/javascript/apex_dynamic_actions_4_0.js" type="text/javascript"></script>
                  <script src="/i/libraries/jquery-ui/1.8/ui/minified/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
                  I can see references to jquery 1.4.2 and jquery-ui-1.8 but how do I know what version is apex.jQuery?
                  I'm trying to figure out the advantage to using apex.jQuery vs jQuery The thing many of us would like to avoid is
                  if apex upgrades its jquery and breaks older stuff. seems like to avoid that one would always have to load a separate
                  jquery? Or am I missing something?
                  • 6. Re: When using APEX.jQuery() - Syntax...?
                    lake
                    In this system how does anyone know what version of jquery the apex.jQuery method is using?
                    If I look at the page source of our apex install:
                    <link rel="stylesheet" href="/i/css/apex_4_0.css" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_4_0.css" type="text/css" /><![endif]--><link rel="stylesheet" href="/i/libraries/jquery-ui/1.8/themes/base/jquery-ui-1.8.custom.min.css" type="text/css" /><script type="text/javascript">var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;</script><script src="/i/libraries/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
                    <script src="/i/javascript/apex_4_0.js" type="text/javascript"></script>
                    <script src="/i/javascript/apex_legacy_4_0.js" type="text/javascript"></script>
                    
                    <script src="/i/javascript/apex_widget_4_0.js" type="text/javascript"></script>
                    <script src="/i/javascript/apex_dynamic_actions_4_0.js" type="text/javascript"></script>
                    <script src="/i/libraries/jquery-ui/1.8/ui/minified/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
                    I can see references to jquery 1.4.2 and jquery-ui-1.8 but how do I know what version is apex.jQuery?
                    I'm trying to figure out the advantage to using apex.jQuery vs jQuery The thing many of us would like to avoid is
                    if apex upgrades its jquery and breaks older stuff. seems like to avoid that one would always have to load a separate
                    jquery? Or am I missing something?
                    • 7. Re: When using APEX.jQuery() - Syntax...?
                      lake
                      In this system how does anyone know what version of jquery the apex.jQuery method is using?
                      If I look at the page source of our apex install:
                      <link rel="stylesheet" href="/i/css/apex_4_0.css" type="text/css" /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_4_0.css" type="text/css" /><![endif]--><link rel="stylesheet" href="/i/libraries/jquery-ui/1.8/themes/base/jquery-ui-1.8.custom.min.css" type="text/css" /><script type="text/javascript">var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;</script><script src="/i/libraries/jquery/1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
                      <script src="/i/javascript/apex_4_0.js" type="text/javascript"></script>
                      <script src="/i/javascript/apex_legacy_4_0.js" type="text/javascript"></script>
                      
                      <script src="/i/javascript/apex_widget_4_0.js" type="text/javascript"></script>
                      <script src="/i/javascript/apex_dynamic_actions_4_0.js" type="text/javascript"></script>
                      <script src="/i/libraries/jquery-ui/1.8/ui/minified/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
                      I can see references to jquery 1.4.2 and jquery-ui-1.8 but how do I know what version is apex.jQuery?
                      I'm trying to figure out the advantage to using apex.jQuery vs jQuery The thing many of us would like to avoid is
                      if apex upgrades its jquery and breaks older stuff. seems like to avoid that one would always have to load a separate
                      jquery? Or am I missing something?
                      • 8. Re: When using APEX.jQuery() - Syntax...?
                        jariola
                        Hi,

                        Add to e.g. page html header
                        apex.jQuery(){alert(apex.jQuery().jquery);});
                        And you see alert that informs version

                        You are right about if new version of Apex ship never version jQuery that break something.
                        Also this is opposite way, there is now jQuery version 1.4.4 that have fix bugs that 1.4.2 have


                        Regards,
                        Jari
                        • 9. Re: When using APEX.jQuery() - Syntax...?
                          lake
                          thanks for the tip.
                          So it is 1.4.2 for me.
                          maybe it would be easier if we use extjs :-) . I'd be interested in seeing how to incorporate that.
                          • 10. Re: When using APEX.jQuery() - Syntax...?
                            Patrick Wolf-Oracle
                            Hi,

                            I also want to add my 2 cents. See it as recommendation from the APEX development team. :-)

                            So the question is, when to use jQuery/$ and when to use apex.jQuery? Actually it depends where you use it!

                            That might at first hand be confusing, especially because as some of you already know, as long as you don't include your own version of jQuery, the JavaScript variables jQuery, $ and apex.jQuery are all the same. So it looks like that it doesn't matter that much, but actually it's very important if you upgrade your application/plug-in to a newer version of APEX.

                            We try to stay up-to-date with the included version of the jQuery library when we release a new version of APEX. So for APEX 4.1 it's very likely that we include jQuery 1.5. As you can see from the change log of the jQuery project they also sometimes make changes which breaks existing functionality. To minimise your risk when you upgrade to a newer version of APEX you should follow the following recommendations.

                            JavaScript code in your Application:

                            If you want to use jQuery in your own JavaScript code in an application we recommend to use jQuery or the shortcut $.

                            Why:

                            1) If you upgrade APEX there is the potential that the newer jQuery version breaks your existing code. To avoid intensive testing and rewriting your application to the new jQuery version you can just include the old jQuery library into your page template and you are done. The variables jQuery and $ will point to your own jQuery version and not the one shipped with APEX. No additional code changes necessary. That will help to minimize your risk of upgrading to a newer version of APEX.

                            2) You need a newer/older version of jQuery in your application because one of the jQuery plugins which you want to use just works with that version. In that case just include the newer/older jQuery library into your page template and the variables jQuery and $ will point to your own jQuery version. apex.jQuery will still point to the version shipped with APEX.

                            JavaScript code in an APEX Plug-In:

                            If you want to use jQuery in an APEX plug-in we recommend to use apex.jQuery. You should even go that far to modify the initialization code of an included jQuery plugin to use the apex.jQuery reference.

                            What do I mean with that? If you have a look at the JavaScript code of a jQuery plugin you will notice that almost all of them have the following code structure
                            (function($) {
                            ... plugin code ...
                            })(jQuery);
                            Looks wired, right? :-) What this actually does is to declare an anonymous JavaScript function with a parameter $ which is immediately called and as parameter value passes in the current jQuery variable. That will allow the function to use $ as jQuery short cut without having to rely on the fact that $ is still used by jQuery.

                            We recommend to copy the jQuery plugin file and prefix it with apex. (example: apex.jquery.maskedinput-1.2.2.js) to make everybody aware that the file has been modified for APEX. Change the jQuery to apex.jQuery in the initialization code.
                            (function($) {
                            ... plugin code ...
                            })(apex.jQuery);
                            Why are we doing all of that?

                            As a plug-in developer you want to minimize your testing effort and also want to have an environment where you have full control to give proper support. Let's assume you are not doing the above, what happens if a user of your plug-in is using it's own version of jQuery? He might report strange behavior of you plug-in which you are not able to reproduce because you don't know that your plug-in is actually using a different version of jQuery than in your own environment. Using the apex.jQuery namespace reduces your risk and also the risk of your users, you just have to test your plug-ins with the APEX versions you want to support.


                            Hope that has given some more insides when to use what.

                            Regards
                            Patrick
                            -----------
                            My Blog: http://www.inside-oracle-apex.com
                            APEX 4.0 Plug-Ins: http://apex.oracle.com/plugins
                            Twitter: http://www.twitter.com/patrickwolf
                            • 11. Re: When using APEX.jQuery() - Syntax...?
                              Juergen
                              Thanks Patrick, perfect answer, which raises the question, when do you sleep... ;-)
                              • 12. Re: When using APEX.jQuery() - Syntax...?
                                Patrick Wolf-Oracle
                                I work from Vienna, Austria. I think my manager Joel would be concerned if I still would sleep at that time ;-)
                                • 13. Re: When using APEX.jQuery() - Syntax...?
                                  lake
                                  Thanks for a very complete answer of this issue. Definitely one for the faq!
                                  • 14. Re: When using APEX.jQuery() - Syntax...?
                                    963662
                                    I tried this approach and it seemed to work out in Apex 4.0.2. When I built a test page that used every form controls possible, I noticed there were javascript issues with the datepicker. Not the one that opens in a new window, but a jQuery UI Date picker.

                                    Thoughts on how to get around this issues and I would like to avoid assigning a newer version of jQuery to a variable and passing that around to all my plugins and Bootstrap items.

                                    Thanks