Service Portal not recognizing jQuery library

[jpavanaryan]

I am trying use jQuery DataTable with Angular JS in ServiceNow application and it throws following error jQuery(...).DataTable is not a function. Created variable 'j' to avoid conflict between jQuery and AngularJS.

[ChrisBurks]

By your screenshot it looks like you're trying to bring in your jquery styles and script library by using the <link> and <script> tags within the widget.

You should bring in outside libraries through the js and css includes in your Theme modules under the Service Portal application.

Navigate to Service Portal > Theme

Then select the Theme you are using for your portal.

At the bottom of the Theme form select the CSS includes or JS includes tab respective to the type of file to be included

Click "New"

Since it looks like you're using a CDN for the Source field select "URL"

Enter your source PATH

Give it a name

Click "Submit"

Now your external source files should be loaded with your Portal automatically.

[jpavanaryan]

Hello Chris,

That was my first try. It didn't work.

[ChrisBurks]

For Service Portal you don't need to setup a "no conflict".   So you should be able to just use $() syntax.

[ChrisBurks · Accepted solution]

I used the setup I described above with the basic example from the dataTables.net site and it worked for me.

Client Controller:

function() {

   var c = this;
   $("#example").dataTable({
   "aaData":[
   ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
   ["Flippa","http://flippa.com","Marketplace","null"],
   ["99designs","http://99designs.com","Marketplace","null"],
   ["Learnable","http://learnable.com","Online courses","null"],
   ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]
   ],
   "aoColumnDefs":[
   {
   "sTitle":"Site name",
   "aTargets": [ "site_name" ]
   },
   {
   "aTargets": [ 1 ],
   "bSortable": false,
   "mRender": function ( url, type, full )   {
   return   '<a href="'+url+'">' + url + '</a>';
   }
   },
   {
   "aTargets":[ 3 ],
   "sType": "date",
   "mRender": function(date, type, full) {
   return (full[2] == "Blog") ? new Date(date).toDateString(): "N/A" ;
   }
   }
   ]
   });

}

HTML :

<div>

  <table id="example">

      <thead>

          <tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr>

      </thead>

      <tbody>

          <tr><td>SitePoint</td></tr>

          <tr><td>Learnable</td></tr>

          <tr><td>Flippa</td></tr>

      </tbody>

  </table>

</div>