Integrating with jQuery – Adding Pagination
This stuff can be seen as a continuation of an earlier tutorial integrating external search into a MODx site, i.e. a standalone search logic separate from MODx. This approach is however not limited to any kind of CMS or solution whatsoever, it’s totally agnostic through the use of Ajax.
The alternative in these cases is using iframes, if reliance on Javascript for basic functionality is allowed however we can replace iframes with Ajax. One obvious benefit is that this way of doing things will integrate better since everything we load will be treated as a part of the main page by the browser. It does have its own challenges as you will see below, in this case nothing that couldn’t be solved.
This time we are adding a search form too through Ajax, and displaying the search result through Ajax as well, just like in the prior example linked to above. This time the search result will be paginated though and the below code is an example of how to handle that situation, it’s a little bit more complicated.
This way is a bit wasteful though as we have to do two roundtrips to the server each time the main page is loaded. On the other hand once a search is performed we will be better off through the use of Ajax to retrieve each page in the result set, no need to reload the whole page.
function onPaginate(res){
$("#content_cont").html(res);
$(".paginate_link").each(function(i){
var href = $(this).attr('href');
$(this).attr('href', '#');
$(this).click(function(){
$.post(href, {}, function(res){
onPaginate(res);
});
});
});
}
$(document).ready(function(){
$.post("admin/product/searchForm", {}, function(res){
$("#search_form").html(res);
$("#search_button").click(function(){
post_obj = {};
$("#search_form").find("input,select,textarea").each(function(i){
post_obj[this.id] = $(this).val();
});
$.post("admin/product/paginate/start/1", post_obj, function(res){
onPaginate(res);
});
});
});
});So on load we fetch the search form and put it in a div with the id search_form. After loading we start working with the onClick event of a button with the id search_button. When the button is clicked we need to loop through all the form fields and fetch their ids and values, in this case the id will be the same as the name, hence the use of this.id.
We finish off by doing yet another Ajax post which will be handled by the pagination function.
The result will be handled by onPaginate() which starts off with replacing the contents of the content container div with the search result. Each pagination link will then have its href attribute nullified. The href value will instead be used as the target of an Ajax call invoked when clicking the link and the result put in the content container. Each time a pagination link is clicked we need to repeat this procedure, hence the recursive call to self at the end.
Read on if you are interested in what happens in my current PHP. If not you’re done yay!
The above requires very little changes in the setup we use here. The searchForm() function in the product controller can look like this:
function searchForm(){
echo $this->fetch('search_form.tpl');
exit;
}The paginate function is overwritten in the product controller and then we have echo parent::paginate() in it followed by an exit.
Related Posts
Tags: ajax, Javascript, jquery, PHP