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

sbolton
Mega Expert

oops it looks like it placed the actual HTML in the thread (although that is a minimal detail)



<div id="accordion">


<h3>What is needed for this example?</h3>


<div>


<ul>


  <li>ServiceNow - With an understanding of UI Pages, UI Macros, UI Scripts, and the Glide Dialog Window</li>


</ul>


<ul>


  <li>jQuery</li>


</ul>


<ul>


  <li>jQuery UI</li>


</ul>


</div>


<h3>Can I use it in ServiceNow?</h3>


<div>


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


</div>


Joe Wilmoth
ServiceNow Employee
ServiceNow Employee

Is it the "/" on line 6, shouldn't it just end with ">" instead of "/>" for the script tag?



So this:


<script>"text/javascript"/>


Would be this:


<script>"text/javascript">


That works now until i click try it


Error during script processing


The prefix "g" for element "g:include_script" is not bound.



line: 2, column: 45



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



It looks like i need to use the built in jquery suggested by Abhiram


Do you mean instead of $j_custom just use $j and not put <g:include_script src="jQuery1_10_2.jsdbx"/>  


Yes, that is correct!