Building UI page including JQuery

sbolton
Mega Expert

I am trying to impliment JQuery inside a UI page below are the components of the UI page (I am following this walk through)

http://constantinekrick.com/?p=290

 

I keep receiving an error when i place the code inside the HTML block.   This is my first UI page using jQuery, and i cant find much out there to guide me.

 

<?xml version="1.0" encoding="utf-8" ?>
<g:include_script src="jQuery1_10_2.jsdbx"/>
<g:include_script src="jQuery_UI_1_11_1.jsdbx"/>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

 

<script>
var $j_custom = jQuery.noConflict(true);
   $j_custom(function() {
   $j_custom("#accordion").accordion();
   });
</script>

 

What is needed for this example?

  •  
  • ServiceNow - With an understanding of UI Pages, UI Macros, UI Scripts, and the Glide Dialog Window
  •  
  • jQuery
  •  
  • jQuery UI

Can I use it in ServiceNow?

Absolutely! Make sure to use the jQuery noConflict(true) to ensure that this works.

 

 

8-22-2014 3-52-48 PM.png

1 ACCEPTED SOLUTION

ChrisBurks
Mega Sage

Hi Sean,



There are two issues that is causing the problem:



1) You are including the </xml> end tag. It's not needed.


2)<g: > tags are jelly tags and need to be encapsulated within this structure:



<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


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


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



</j:jelly>



3) I guess there are three because Joe Wilmoth is correct too.


The reason your <g:> statements aren't bound is because of number two


View solution in original post

7 REPLIES 7

Just remember that if you use the jquery that is supplied with ServiceNow, they could decide to change version at anytime. So make sure that you either keep up with what changes in the versions of jquery or ensure your jquery code will be version proof.


adiddigi
Tera Guru

I think you really dont have to do anything.



Along with Eureka, jQuery is included globally.



so you can just use $j to access jQuery.


ChrisBurks
Mega Sage

Hi Sean,



There are two issues that is causing the problem:



1) You are including the </xml> end tag. It's not needed.


2)<g: > tags are jelly tags and need to be encapsulated within this structure:



<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


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


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



</j:jelly>



3) I guess there are three because Joe Wilmoth is correct too.


The reason your <g:> statements aren't bound is because of number two