jQuery in UI Script

[Justin Lee2]

Hello,

From the forums I have learned that in a Client Script of a UI Page, I can use $j to utilize jQuery. Example:  $j.find(".class")

This works fine.  However, I have now created a UI Script that will be called from multiple UI Pages.  I cannot seem to access jQuery in the UI Script at all.  To test, I have a function in the UI Script that simply does:

alert($j); alert($); alert(jQuery);   

When I call the function from the UI Page script, the browser pops up NULL for all 3 alerts.

How do I make jQuery available in my UI Script?

Thanks,

Justin

[Pratiksha Kalam]

Hi Justin,

use $j   - you don't have to include any library from Eureka. jQuery is globally loaded.

Refer below link will help you,

https://community.servicenow.com/community?id=community_question&sys_id=0567c769db1cdbc01dcaf3231f96...

If my reply helps you at all, I’d really appreciate it if you click the Helpful button and if my reply is the answer you were looking for, it would be awesome if you could click both the Helpful and Accepted Solution buttons! 

Regards,

Pratiksha

[Justin Lee2]

Hi Pratiksha,

In the first sentence of my post I say that I am using $j.  Both $ and $j are null. See my reply to Manish for info.

Thanks.

[Manish Vinayak1]

I tried the same thing, executed the alert($j) directly in the UI script, also tried creating a function in the UI script which is triggered from the UI Page. In both the cases I was able to access jQuery / $j. 

How did you include the UI Script in your UI Page? I used script tag with jsdbx extension for the UI script, i.e.:

//Not adding the <script> tag to the following, it breaks somehow, but that should give you an idea of what I tried

script src="ui_script_name.jsdbx"

Maybe your UI Script is getting loaded before the jQuery library.

[Justin Lee2 · Accepted solution]

Hi Manish - thanks for the reply.

I have found out a little more. Its confusing, but with this info I can come up with some workarounds.  Maybe this info will help others who run into the same issues.

1. $j and $ are null when I use the default UI Script format (the ~API format).  However, if just define a function, $j and $ are available.

2. If I use the default UI script format, I can call the REST api.  If I don't use the default format, I cannot. (a login popup appears when I call the REST api).

3. If I use the default UI script format, I can NOT use the Client API (Glide).  If I don't use the default format, I can use the Glide API. 

Default UI Script Format:

var myappname = myappname || {};

myappname.myscriptname = (function() {

  return {
    type: "myscriptname",
    doSomething: function() {
      alert($j);          // is NULL
      alert($);           // is NULL
      alert(GlideRecord); // is NULL

      CallRestAPI();      // Success 
    }
  };
})();

Not using default format:

function doSomething() {
  alert($j);          // Is NOT NULL
  alert($);           // Is NOT NULL
  alert(GlideRecord); // Is NOT NULL
  
  CallRestAPI();      // Fails. (shows login popup)
}

What I'm doing is having 1 UI script just for accessing REST API.  This script will use the default UI Script format.  If it needs access to jQuery, I'm just going to pass jQuery object in as a parameter.

Then I'll have other UI scripts for everything else that will not use the default format. These scripts will be for any custom UI controls/patterns/etc, and Glide helpers, etc.