1 2 Previous Next 24 Replies Latest reply: Apr 7, 2014 7:23 AM by Joe R RSS

    Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js

    Joe R

      Apex Version 4.1.1.00.23

       

      Hello,

       

      We're trying to use the Select2 plug-in from Apex-Plugin.com http://apex-plugin.com/oracle-apex-plugins/item-plugin/select2_344.html which says that if the APEX Version is 4.1x then JQuery 1.7x or higher is needed.

      I've downloaded and added JQuery 1.7.2 and JQuery 1.11.0 into Shared Components -> Static Files -> My application number and referrencing them as:

      <script src="#APP_IMAGES#jquery-1.11.0.js" type="text/javascript"></script>  OR

      <script src="#APP_IMAGES#jquery-1.7.2.js" type="text/javascript"></script>

       

      I have the Skillbuilders Super LOV (current version for APEX 4.1+) from http://skillbuilders.com/scheduler/students/welcome-student.cfm?/Oracle-APEX/APEX-Consulting-Training.cfm?category=apex-plug-ins&tab=free-plugin-downloads&click=super_lov.zip

       

      When I run the page with EITHER JQuery 1.11.0 OR 1.7.2 I'm getting an error on the page:

       

       

      TypeError: $.widget is not a function   

      _resetButton: function() {

      This is from the jquery.ui.button.js file starting on line 274:

       

       

      _resetButton: function() { 
      if ( this.type === "input" ) { 
      if ( this.options.label ) { 
      this.element.val( this.options.label ); 
      } 
      return; 
      } 
      var buttonElement = this.buttonElement, 
      buttonText = $( "<span></span>" ) 
      .addClass( "ui-button-text" ) 
      .html( this.options.label ) 
      .appendTo( buttonElement.empty() ) 
      .text(), 
      icons = this.options.icons, 
      multipleIcons = icons.primary && icons.secondary; 
      if ( icons.primary || icons.secondary ) { 
      buttonElement.addClass( "ui-button-text-icon" + 
      ( multipleIcons ? "s" : "" ) ); 
      if ( icons.primary ) { 
      buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" ); 
      } 
      if ( icons.secondary ) { 
      buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" ); 
      } 
      if ( !this.options.text ) { 
      buttonElement 
      .addClass( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" ) 
      .removeClass( "ui-button-text-icons ui-button-text-icon" ); 
      if ( !this.hasTitle ) { 
      buttonElement.attr( "title", buttonText ); 
      } 
      } 
      } else { 
      buttonElement.addClass( "ui-button-text-only" ); 
      } 
      } 
      }); 
      
      $.widget( "ui.buttonset", { 
      _create: function() { 
      this.element.addClass( "ui-buttonset" ); 
      this._init(); 
      }, 
      
      

       

      I've  tried to search for a newer version of the jquery.ui.button.js file without any luck.

      Can someone help me to fix this?

       

      What other information can I provide?

       

      Thanks,

      Joe

        • 1. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
          Greg Jarmiolowski

          Joe,

           

          I don't know the solution but I'm pretty sure the problem is having more than one copy of the JQuery script referenced in your page.

           

          I think you need to find out how replace the version that Apex automatically adds. Something I started the other day and then dropped due to more pressing matters.

           

          Greg

          • 2. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
            Joe R

            Greg,

             

            Thanks for replying.

            Just to clarify, I'm only using ONE of the references to those versions at a time. I thought that maybe version 1.11.0 was too new and that was breaking this jquery.ui.button.js file. So I replaced the reference to 1.11.0 with 1.7.2, but I got the same error.

             

            Any other ideas?

             

            Thanks,

            Joe

            • 3. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
              Greg Jarmiolowski

              You are adding another one. The Jquery library is already added by the apex engine.

               

              Maybe this will help.

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

              • 4. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                Joe R

                I doing something wrong because I'm still getting the same error.

                 

                In the Header I have:

                 

                 

                <script type='text/javascript'>  
                var $J = jQuery.noConflict();  
                </script>
                <script src="#APP_IMAGES#jquery-1.7.2.js" type="text/javascript"></script>
                
                

                 

                What am I doing wrong?

                 

                Thanks,

                Joe

                • 5. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                  Joe R

                  I'm still having issues with multiple references to javascript files.

                   

                  Thanks,

                  Joe

                  • 6. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                    Joe R

                    Hello,

                     

                    I'm going to try to resurrect this. Can someone help with the proper way to reference different versions of JQuery?

                     

                    Thanks,

                    Joe

                    • 7. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                      Tom Petrus

                      jQuery.noConflict() | jQuery API Documentation links to example nr 4 "Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery."

                      As you can see, the sequence of loading the libraries matters.

                      • 8. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                        Joe R

                        Tom,

                         

                        Thanks for the link.

                         

                        I'm hoping I can get help setting this up.

                        The examples in the link you provided look like it wrapping the javascript code inside the noConflict() call.

                        <script src=js_file1.js></script>

                        <script src=js_file2.js></script>

                        <script src=js_file3.js></script>

                        <script>

                        noConfict();

                        javascript code from js_file1.js;

                        </script>

                         

                        I don't have any code that I'm calling directly within the Header. I'm using this newer version of JQuery for a Multi-Select plug-in.

                        So, I just have the javascript files referenced in the Header like:

                        <script src="#APP_IMAGES#jquery-1.11.0.js" type="text/javascript"></script>

                        <script src="#APP_IMAGES#staffing_plan_p11.js" type="text/javascript"></script>

                         

                        I can't move the javascript code from the files and put it into the Header because it's too big.

                        I tried to put the <script> noConflict </script> into the files, but it displayed an error because of the script tags.

                         

                        Please let me know if I'm not clear.

                         

                        Thanks,

                        Joe

                        • 9. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                          Tom Petrus

                          You're wrong in your assumptions really. The example wraps no code at all. All there is to it is that 2 jquery libraries are attached, one after the other. One in the head, another in the body in a script tag. There is no code being altered in those files thus no need for you to copy code anywhere.

                          Apex will attach jquery version 1.6 (I believe it is 1.6 in 4.1?), and if you want to attach your newer version afterwards noConflict will relinquish control of the global variables of the last attached library to the previously attached one - thus the result will be that $ and jQuery will refer to version 1.6 and not 1.10. You may want to look at what point the 1.6 library is being attached and if you can attach a library sooner. A good place to look would be in the page template - I can't remember the specific workings of 4.1 that well, in 4.2 you can define this pretty well.

                          - attach 1.10

                          - attach 1.6

                          - noConflict

                           

                          Be careful though, this will mean that all use of $ and jQuery will use 1.10. Test your page thoroughly. I'm also not sure if you would really want 1.10 attached, it might be too new for jquery ui - there are very big differences between jquery 1.7 and 1.10, and it might depend on what the plugin does and uses what will or will not work.

                          • 10. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                            Joe R

                            Tom,

                             

                            Thanks for the clarification.

                            The plug-in is the "Select2" from apex-plugin.com.

                             

                            The notes for that plug-in for 4.1 are:

                            APEX 4.1 Compatibility

                            Please note that the Select2 plugin requires jQuery 1.7.1 or higher. This is especially important if you are on an APEX 4.1 instance which ships with version 1.6.2 of jQuery.

                            This means that you must manually include a higher version of jQuery (1.7.1+). Neglecting to do so will result in the malfunctioning of the plugin. APEX 4.2 users are automatically on jQuery 1.7.1.

                             

                            I removed the 1.10 version and referenced the 1.7.2 version but...

                            In the HTML Header I have:

                            <script src="#APP_IMAGES#staffing_plan_p11.js" type="text/javascript"></script>

                            <script src="#APP_IMAGES#jquery-1.7.2.js" type="text/javascript"></script>

                            <script>jQuery.noConflict(true);</script>

                             

                            This apparently isn't correct since the first error is being displayed is:

                            TypeError: j.on is not a function

                             

                            The second error is:

                            TypeError: $(...).select2 is not a function

                             

                            The page template (Two Level Tabs) in the Header:

                            <html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com">

                            <head>

                            <link rel="stylesheet" href="#IMAGE_PREFIX#/themes/theme_13/theme_3_1.css" type="text/css" />

                            #HEAD#

                            <title>#TITLE#</title>

                            </head>

                            <body #ONLOAD#><noscript>&MSG_JSCRIPT.</noscript>#FORM_OPEN#<a name="PAGETOP"></a>

                             

                            In the Body:

                            <ajax:BOX_BODY>
                            <table summary="" cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                            <td valign="top"><a id="t13Logo2" href="#">#LOGO#</a><br />#REGION_POSITION_06#</td>
                            <td width="100%" valign="top">#REGION_POSITION_07#</td>
                            <td valign="top">#NAVIGATION_BAR#<br />#REGION_POSITION_08#</td>
                            </tr>
                            </table>
                            <div id="t13PageTabs"><table cellpadding="0" cellspacing="0" border="0" summary="" class="t13PageTabs"><tbody><tr>#PARENT_TAB_CELLS#</tr></tbody></table>
                            </div>
                            <div id="t13BreadcrumbTop2"><div>#TAB_CELLS#</div></div>
                            <table class="t13Layout" cellpadding="0" cellspacing="0" border="0" summary="" width="100%">
                            <tr>
                            <td class="t13BreadcrumbRegion"><div class="t13Breadcrumbs">#REGION_POSITION_01#</div><span id="t13Customize">#CUSTOMIZE#</span></td>
                            </table>
                            <a name="SkipRepNav"></a>
                            <div id="t13MessageHolder">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
                            <div class="t13BodyMargin">
                            <table summary="" cellpadding="0" cellspacing="0" border="0" height="70%">
                            <tr>
                            <td valign="top" width="100%">#BOX_BODY##REGION_POSITION_02##REGION_POSITION_04#</td>
                            <td class="t13ColumnSep"><div class="t13ColumnSep"><br /></div></td>
                            <td valign="top" width="100%"><div style="float:right;">#REGION_POSITION_03#</div></td>
                            </tr>

                            </table>
                            </div>
                            </ajax:BOX_BODY>

                             

                            What am I doing wrong?

                             

                            Thanks,
                            Joe

                            • 11. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                              Tom Petrus

                              What goes wrong in your case is that first 1.6 is attached, then you attach 1.7, and then you give $ back to 1.6.

                               

                              What we want to achieve is to relinquish control of jQuery and $ from version 1.6 to version 1.7. The reason being that a) all apex framework and depending calls should be made with apex.jQuery and b) the plugin uses $ for its functionality. So when using noConflict, the first attached library has to be version 1.7, then 1.6. However, take note that you should only relinquish control of $ AFTER apex has made the reference of apex.jQuery to the 1.6 jQuery variable.

                              That should be ok as in 4.1 this is all wrapped up in one file <script src="/i/javascript/apex_4_1.min.js" type="text/javascript">

                               

                              Since this file is being added in the #HEAD# section of the page template, you have to attach your 1.7 lib before, and execute noConflict after.

                              Eg:

                              <head>

                              <link rel="stylesheet" href="#IMAGE_PREFIX#/themes/theme_13/theme_3_1.css" type="text/css" />

                              <script src="#APP_IMAGES#jquery-1.7.2.js" type="text/javascript"></script>

                              #HEAD#

                              <script>jQuery.noConflict(true);</script>

                              <title>#TITLE#</title>

                               

                              Bit of theorycraft for me atm but give that a try. I don't think you can properly steer this from the page attributes, as the code you put in the header section there will all be added after the apex file - there isn't enough control there. You could just create a copied page template for this specific case.

                              • 12. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                                Danny*D201

                                interestingly, I just read something from oracle today about

                                If jQuery plug-in you use requires a different version of jQuery and you want to use that version in other code in your application.

                                ...

                                ...

                                If a jQuery plug-in you use requires a different version of jQuery and you do not want to use that version in other code in an application.

                                ...

                                ...

                                About jQuery and jQuery UI Support

                                hope it's helpful.

                                • 13. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                                  Tom Petrus

                                  humm yeah - don't think you need noConflict after all. It should be fine to run the wanted version library after the apex version as that should just overwrite it ... Since the jquery library is wrapped in the apex minified files, I'm not a 100% sure if the behaviour will be identical (it should) but noConflict should work nonetheless. But it complicates things. Back to square one then: try adding your library after the #HEAD# tag, see what that gives. Thanks for the doc link Danny, I didn't think about that with regard to this situation.

                                  • 14. Re: Including JQuery Version Newer than 1.6x Caused an Error in JQuery.UI.Button.js
                                    Joe R

                                    Danny,

                                     

                                    Thank you for the input!

                                     

                                    Tom,

                                    I put the reference in the template Header:

                                    <html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com">

                                    <head>

                                    <link rel="stylesheet" href="#IMAGE_PREFIX#/themes/theme_13/theme_3_1.css" type="text/css" />

                                    #HEAD#

                                    <script src="#APP_IMAGES#jquery-1.7.2.js" type="text/javascript"></script>

                                    <title>#TITLE#</title>

                                    </head>

                                    <body #ONLOAD#><noscript>&MSG_JSCRIPT.</noscript>#FORM_OPEN#<a name="PAGETOP"></a>

                                     

                                    But I still get the same error in FireFox (v25) and IE (8.0.7601.17514):

                                    TypeError: $.widget is not a function

                                    _resetButton: function() {

                                     

                                    I've also tried to put the reference before the #HEAD# tag and produced the errors referenced above:

                                    TypeError: j.on is not a function

                                     

                                    The second error is:

                                    TypeError: $(...).select2 is not a function


                                    Does it make any difference that this file, jquery-1.7.2.js, is uploaded into the Static Files in Shared Components and not the Image directory on the server?


                                    Also, I don't know if the HEAD section from View Source, as it stands now, will help but if not then all I've done is take up space so this is what it has:

                                    <head>
                                    <link rel="stylesheet" href="/i//themes/theme_13/theme_3_1.css" type="text/css" />
                                    
                                    <link rel="stylesheet" href="/i/css/apex_4_1.min.css" type="text/css" />
                                    <!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_4_1.css" type="text/css" /><![endif]-->
                                    <link rel="stylesheet" href="/i/libraries/jquery-ui/1.8.14/themes/base/jquery-ui.min.css" type="text/css" />
                                    <script type="text/javascript">var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;</script><script src="/i/javascript/apex_4_1.min.js" type="text/javascript"></script>
                                    <script src="wwv_flow_file_mgr.get_file?p_security_group_id=xxxx&p_flow_id=191&p_fname=staffing_plan_p11.js" type="text/javascript"></script>
                                    <script language="JavaScript" type="text/javascript">
                                    <!--
                                        htmldb_delete_message='Would you like to perform this delete action?';
                                    
                                        function redirectToESSP()
                                        {
                                            var get = new htmldb_Get(null,$v('APP_ID'),'APPLICATION_PROCESS=Set_P0_Group',0);
                                            gReturn = get.get();
                                            if (gReturn == 3)
                                            {
                                                var href = 'f?p=191:51:1271392861584401::NO:';
                                                window.location = href;
                                            }
                                        }
                                    //-->
                                    </script>
                                    
                                    <style type="text/css">
                                        .t13RegionBody td
                                        {
                                            padding: 0px 0px 0px 0px !important;
                                        }
                                    </style>
                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                    <script src="wwv_flow_file_mgr.get_file?p_security_group_id=xxxx&p_flow_id=191&p_fname=jquery-1.7.2.js" type="text/javascript"></script>
                                    <title>Staffing Plan</title>
                                    </head>
                                    
                                    
                                    
                                    

                                     

                                     

                                    Thank you for your time!

                                    Joe

                                    1 2 Previous Next