jQuery Integration

Table of Contents

jQuery

Plugin Integration

An Extension library for jQuery clients of Java Web applications is provided with the jQuery plugin jquery.icepush.js.

Initialization and Page Inclusion

  1. Include icepush.jar in your Java web application
  2. Declare the ICEpush javascript code in the head region of any HTML page requiring push in your application
      <script type="text/javascript" src="code.icepush"></script>
     
  3. Declare the jQuery library and ICEpush jQuery plugin javascript file after the ICEpush javascript
      <script type="text/javascript" src="./js/jquery-1.4.1.js"></script>
      <script type="text/javascript" src="./js/jquery.icepush.js"></script>
     

jQuery ICEpush Plugin API

Global Functions

$.push.listenToGroup(groupName, callback);

This function will add the client page to a push group, and register the provided callback listener with the ICEpush bridge. The callback listener will be called when a push notification occurs for the specified group.

Arguments
  • groupName: The name of the ICEpush group being joined.
  • callback: The listener function that will be called when the joined group is notified of an event.
Example

Here the client registers itself with an ICEpush group called 'time', and provides an anonymous callback listener function. The group 'time' does not have to be previously declared on the server or client, and will be created by the ICEpush bridge when this registration occurs. When any notifications for the group 'time' occur, the ICEpush bridge will call this function, and the function will make a call to the server with the jQuery $.fn.load(url); function and update an element with the id of 'timeElem' on the page. These push events can be triggered on the client through a call to ice.push.notify(groupName); or from the server-side with the Java API.

  $.push.listenToGroup("time", function(){
      $("#timeElem").load('./time');
  });
 

$.push.stopListeningToGroup(groupName, callback);

This function will remove the client page from a joined group, unregistering the client from a previously registered group.

Arguments
  • groupName: The name of the ICEpush group.
  • callback: The listener function previously registered. If not provided, the function will remove all callback listeners from the ICEpush group (as there may be more than once listener attached to a group).
Example

Here clicking the button will remove the client page from the 'time' group, removing all callbacks registered for that group.

 <input type="button" value="Stop Clock" onclick="$.push.stopListeningToGroup('time');" />
 

If we had multiple different callback functions registered to the time group we could selectively remove individual functions this way:
 <input type="button" value="Stop Clock"
  onclick="$.push.stopListeningToGroup('time', myCallbackListener);" />
 

Member Functions

$.fn.loadPushUpdates(groupName,url)

The function will register the client page with an ICEPush group, and automatically call the provided url when an ICEpush event occurs for the registered group. When a push event occurs, a HTTP GET request will be made for the provided url, and the HTML response will be loaded into all selected elements from the jQuery object.

Arguments
  • groupName: The name of the ICEpush group being joined.
  • url: The url that will be called on a push event for the group.
Example

This code starts with the jQuery selector $('div.time') which selects the two divs above the script. The .loadPushUpdates('time','./time'); registers the client page with the ICEpush group 'time'. When an ICEpush notification occurs for the group 'time', the url './time' will be called with an HTTP GET request, and the resulting response will be placed inside both selected div elements.

 <div class='time' id='time1'>
 </div>
 <div class='time' id='time2'>
 </div>
 <script type="text/javascript">
  $('div.time').loadPushUpdates("time","./time");
 </script>
 

$.fn.appendPushUpdates(groupName,url)

The function will register the client page with an ICEPush group, and automatically call the provided url when an ICEpush event occurs for the registered group. When a push event occurs, a HTTP GET request will be made for the provided url, and the HTML response will be appended into all selected elements from the jQuery object.

Arguments
  • groupName: The name of the ICEpush group being joined.
  • url: The url that will be called on a push event for the group.
Example

This code will work exactly as $('div.time').loadPushUpdates("time","./time"); in the example above, although the content will be appended into the selected elements. So in this case the title in each div would remain after any update, and any content appended into the elements from previous push updates would also remain.

 <div class='time' id='time1'>
    <h2>Time Stamps</h2>
 </div>
 <div class='time' id='time2'>
    <h2>2nd Group of Time Stamps</h2>
 </div>
 <script type="text/javascript">
  $('div.time').appendPushUpdates("time","./time");
 </script>
 
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.