jQuery 3.1.0 (Uncaught TypeError: Cannot create property 'guid' on string 'div.glide_overlay')

xiaix
Tera Guru

I have a UI Script (non-global), named "jQuery310full"

The contents of this script is a copy/paste from here:   https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js

I'm pulling it into a UI Page (jelly portion) like so:

<g:include_script src="jQuery310full.jsdbx" />

Everything works fine, until I run into a line within a function on my UI Page:

var dialog = new GlideDialogWindow('ui_popup_window');

As soon as I hit this line, I get this:

find_real_file.png

If I remove the include_script, jQuery310full, this issue does not happen, but I need this version of jQuery to perform other functions in this UI Page.

When I do a stack trace within the browser, I notice this SN function:

function getFormContentParent()

{

      var glideOverlay = $(document.body).select("div.glide_overlay");

      var exposeMask = $('glide_expose_mask');

     

      if (glideOverlay.length > 0 && exposeMask && exposeMask.visible())

              return glideOverlay[0];

      if (typeof g_section_contents == 'undefined' || !g_section_contents)

              g_section_contents = $(document.body).select(".section_header_content_no_scroll");

      if (g_section_contents.length > 0)

              return g_section_contents[0];

      return document.body;

}

I believe the line var glideOverlay = $(document.body).select("div.glide_overlay"); is interfering with the jQuery.

The actual line within the jQuery code that the error is referencing is line 4905, which is this:

find_real_file.png

What gives?   How can I overcome this conflict between built-in (non-editable) ServiceNow functions and jQuery?

2 REPLIES 2

Ankush Agrawal
ServiceNow Employee
ServiceNow Employee

Hi David



The problem here is the object jQuery is overwritten by the external library. ServiceNow libraries uses the object jQuery and the below code snippet is from one of the ServiceNow default library:


pastedImage_8.png


When you use the external library, the object jQuery is overwritten in the line #95 of the external library


jQuery = function( selector, context ) {



As a quick solution, you can rename the object 'jQuery' and all of its occurrence in the library.



--


Thanks and regards


Ankush


P.S.: Please mark the answer correct/helpful as applicable.


Well, trying to follow your suggestion as closely as possible and in conjunction with a few other posts about this here in the community, I was able to resolve the issue.



For the "jQuery310full" UI Script I created,


I replaced all of the "jQuery" references with "jQueryUI".   There were 667 of those.


I then replaced all of the "jquery" references with "jqueryui".   There were 17 of those.



Then, in my UI Page, I put "jQueryUI.noConflict();" on the first line of my Client Script.



Also, within the client script, I changed all references from "$" to "jQueryUI".


Example   FROM THIS:


function _addSmartComplete_listeners(v)


{


      if (v && v.length && v.length > 0)


      {


              $("#" + v).smartAutoComplete({source: _searchable_array_, forceSelect: true, maxResults: 7, delay: 200});


              $("#" + v).bind({


                      itemSelect: function(ev, selected_item)


                      {


                              var options = $(this).smartAutoComplete();




TO THIS:


function _addSmartComplete_listeners(v)


{


      if (v && v.length && v.length > 0)


      {


              jQueryUI("#" + v).smartAutoComplete({source: _searchable_array_, forceSelect: true, maxResults: 7, delay: 200});


              jQueryUI("#" + v).bind({


                      itemSelect: function(ev, selected_item)


                      {


                              var options = jQueryUI(this).smartAutoComplete();



I also had included another UI Script javascrip file that made reference to my specially imported jQuery, so I changed all of the "$" to "jQueryUI" as well.




After doing all this, I'm no longer running into issues as all the ServiceNow jQuery calls can use the OOB stuff, and my custom UI Page's custom functions can use my updated version of jQuery, all with no conflicts.



Thanks for pointing me in the right direction, Ankush.