Although HDPagination 1.3 provides Ajax support for application based on JSF 2.0. Unfortunately, there is no standard way to implement Ajax functions in Non-JSF world. Now days, jQuery has become popular to fill this gap, by providing powerful API to easily integrate with all traditional MVC frameworks (e.g. Struts, Spring MVC etc.) to
to achieve Ajax features.
HDPagination can work with jquery Ajax via its extension jar file (hdpJQueryAdapter.jar), which acts as a bridge between HDPagination JSP tags and jQuery Ajax API. The jar file includes 2 JSP tags <hdpex:jqueryAjax4PageLinks> and <hdpex:jqueryAjax4SortLinks>, that can be used to generate jQuery scripts to add Ajax cability to pagination or sorting links.
How to do
- Declare hdpagination extension tags library on top of JSP as:
<%@ taglib uri="http://www.hdpagination.org/tags/extension" prefix="hdpex" %>
- Include jQuery js file in head of JSP as:
<script src="js/jquery-1.3.2.min.js"/>
Please remember, minimum version of 1.3 of jQuery is required because the method .live() is used internally which is only available since jQuery 1.3
- If you want to Ajaxify the search form submit, bind an event handler to the "click" JavaScript event of the button. The in the event handler, you can call the .load() method to trigger the Ajax request and load page fragment. The sample code can be as follows:
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$('#searchButton').click(function() {
//input validation can be done here....
var errorMsg = validateInput();
if (errorMsg == "") {
//pass validation, then clean error message
$('#validationErrors').html("");
$('#searchResultContainer').load("<c:url value='/searchProduct.hdp'/> #searchResultContainer", jQuery('#searchProdForm').serialize());
} else {
//validation failed.
$('#validationErrors').html(errorMsg);
}
.......
});
});
A few points worthmentioning here:
This is just a normal way to apply ajax to a form submit button using jQuery, please refer to jQuery API document for more information. To make the above script to work, the input type of button must be "button" rather than "submit". How to use jQuery to submit a form is beyond the scope of this topic, you may find other ways to make this happen. Two other things you need to care about in above sample are "#searchResultContainer" and "searchProduct.hdp". "#searchResultContainer" is jQuery selector representing the page fragment of search result area (usually including data table and pagination section). Quite often, a html <div> with id of "searchResultContainer" is used to wrap the search result area. Another thing is the URL argument of .load() method, the first part (before space, here it is <c:url value='/searchProduct.hdp'/>) should be the same as the value of action attribute in the HTML Form when jQuery is not used (refer to HDPagination document or example). The second part of URL (after space) should be the same as the value of jQuery selector of .load(). As described in jQuery .load() API, the portion of the string following the first space in URL is assumed to be a jQuery selector that determines the content to be loaded. In this case, when user clicks search button, Ajax request is fired and sent to server. Just as a non-Ajax scenario, HDPagination handle the query request and then full HTML page is returned as a response. Then jQuery .load() method use the second part of URL ("#searchResultContainer") to filter the response (HTML page) and insert only the search result part into the original page.
To ajaxify the page links (first previous 3 4 5 6 .. next last) generated by the core hdpagination tag (<hdp:pageLinks>), you need to use the tag (<hdpex:jqueryAjax4PageLinks>) inside the javascript body as follows:
$(document).ready(function() {
$('#searchButton').click(function() {
...........
});
<hdpex:jqueryAjax4PageLinks actionId="searchProduct" selector="#paginationLinks a" rerenderSelector="#searchResultContainer"/>
......
});
Assuming the core hdpagination tag (<hdp:pageLinks>) is wrapped with a <div> tag in the page as follows:
<div id="paginationLinks">
<hdp:pageLinks actionId="searchProduct" resendParams="true"/>
</div>
The property of "selector" is used by jQuery to find the HTML elements (in this case page links generated by <hdp:pageLinks>) to apply Ajax. A simple way is to wrap a <div> around the <hdp:pageLinks> tag.
The property of "actionId" must be the same as that of the corresponding <hdp:pageLinks> tag.
The property of "rerenderSelector" is used to filter response by jQuery in pagination, which is similar to the description of "#searchResultContainer" in previous section.
In summary, the scenario can be described as:
When user clicks the page links, jQuery .load() method (which is generated by <hdpex:jqueryAjax4PageLinks>) is executed to fire an Ajax request. The Ajax request is sent to the server side and recognized by HDPagination as a pagination request. HDPagination handles the pagination request (Just as a non-Ajax scenario) and a full HTML page is returned as a response. Finally, .load() method use the value of property "rerenderSelector" ("#searchResultContainer" in this case) to filter the response (HTML page) and insert only the search result part into the original page.
The way to ajaxify sort links is very similar to page links. You need to use the tag (<hdpex:jqueryAjax4SortLinks>) inside the javascript body as follows:
$(document).ready(function() {
....
<hdpex:jqueryAjax4SortLinks actionId="searchProduct" selector="#columnsHead a" rerenderSelector="#searchResultContainer"/>
......
});
Assuming the core hdpagination tag (<hdp:sortBy>) is used as follows:
<table width="80%" border="1" cellpadding="5" cellspacing="0">
<tr id="columnsHead">
<td class="tableHeading" width="16%"><div align="center">
<hdp:sortBy actionId="searchProduct" sortedColumn="p.prodNo" resendParams="true">Product No</hdp:sortBy>
</div></td>
<td class="tableHeading" width="22%"><div align="center">
<hdp:sortBy actionId="searchProduct" sortedColumn="p.price" resendParams="true">Price</hdp:sortBy>
</div></td>
<td class="tableHeading" width="18%"><div align="center">
<hdp:sortBy actionId="searchProduct" sortedColumn="p.madeIn" resendParams="true">Made In</hdp:sortBy>
</div></td>
<td class="tableHeading" width="18%"><div align="center">
<hdp:sortBy actionId="searchProduct" sortedColumn="p.description" resendParams="true">Description</hdp:sortBy>
</div></td>
...
The property of "selector" is used by jQuery to find the HTML elements (in this case sort links generated by <hdp:sortyBy>) to apply Ajax. The above example uses the id of the parent (not direct) <tr> tag of <hdp:sortBy> to locate all sorting links. This method works in this example because there is no other <a> elements in the children elements of this <tr> tag. In other complex scenarios, you need to consult jQuery document to find a way to identify these sorting links.
The other 2 tag properties are the same as <hdpex:jqueryAjax4PageLinks>
Uploading ....