Using jQuery as part of responsive design support

jQuery is a JavaScript Library that simplifies HTML document navigating, event handling, animating, and Ajax interactions used in web application development.

jQuery is packaged as part of the XPages Responsive Bootstrap plugin. jquery-2.1.1.js is provided as a resource in the Bootstrap3 and Bootstrap3_flat themes.

Using jQuery in your XPages application separate from Bootstrap

However, if you wish to use jQuery in your XPages application separate from Bootstrap, this can be done using several methods.

As a first method, you can add the resource to an XPage as follows:

<xp:this.resources>
<xp:script 
	src="/.ibmxspres/.extlib/responsive/jquery/jquery.min.js" clientSide="true">
</xp:script>
</xp:this.resources>

Another method you can use is to add the jQuery resource to a custom theme in your XPage application's resources and then set your application to use that theme. Using this method, jQuery will be available on every XPage in the application. For example:

<theme extends="Bootstrap3"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
<resource>
	<content-type>application/x-javascript</content-type>
	<href>/.ibmxspres/.extlib/responsive/jquery/jquery.js</href>
</resource>
</theme>

You can also use jQuery in an XPage by adding it in a script block:

<xp:scriptBlock id="script1">
			<xp:this.value><![CDATA[XSP.addOnLoad( function() {
					$("*[id$='myText']").html("This is JQUERY!");
				});]]&gt;
			</xp:this.value>
		</xp:scriptBlock>
<xp:div id="myText"></xp:div>

You can also add jQuery to the onClientLoad event of an XPage or Custom Control OR add it as a client side event, such as on a button's onClick event as in this example:

<xp:button value="Click me" id="button1">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script>
				<![CDATA[
					$("*[id$='myText']").html("This is JQUERY!");
				]]&gt;
			</xp:this.script>
		</xp:eventHandler>
	</xp:button>
<xp:div id="myText">No jquery :(</xp:div>

Avoiding issues with using jQuery with XPages

One issue with using jQuery in XPages is that you cannot pass IDs with colons as a jQuery selector, as the colon is a special character. As such, you cannot use the standard jQuery method to select elements on an XPage using their ID.

There are some methods available to avoid this issue. One way you can avoid the colons in IDs when passing them to jQuery is by prefixing each colon with two back slashes as follows:

HTML: <xp:inputText id="view:_id1:input1" class="inputClass1"></xp:inputText>

jQuery Selector: $('#view\\:_id1\\input1)

Another method you can use to avoid the colons in IDs when passing them to jQuery is to use a CSS class name as a selector instead:

HTML: <xp:inputText id="view:_id1:input1" class="inputClass1"></xp:inputText>

jQuery Selector: $('.inputClass1')

You can also use wildcard characters to specify what the ID ends with. The following selector specifies any element (indicated by the * in the selector) whose ID ends with (indicated by id$= in the selector) a particular ID value:

HTML: <xp:inputText id="view:_id1:input1" class="inputClass1"></xp:inputText>

jQuery Selector: $("*[id$='input1']")

Finally, an XSnippet available on OpenNTF, provides a custom jQuery selector function for XPages. This function automatically prefixes colons with the double backslash escape characters. This snippet has been incorporated into the XPages Responsive Bootstrap plugin. It can be found in the following resource, which is provided by the two Bootstrap3 themes, or can be added as a resource to your application:

<resource>
			<content-type>application/x-javascript</content-type>
			<href>/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js</href>
</resource>