Geek Answers Handbook

What's the best way to make it easier to paginate a Load More page using jQuery?

I am showing a list of search results on a page. At the very bottom, I would like to place the “Download more” link, which adds more results to the existing ones on the page and changes the parameters of the “Download more” link to the next page, so if the user clicks on it, the next page will be added to the page. It would be nice to have a “Wait” or some message will appear at boot time.

What is the most common and practical way to do this using jQuery?

Thanks!

+2
source share
2 answers

I am using something similar to the following. This is a simplification of my working solution, leaving unnecessary pieces. Hope this helps you get started:

function loadMore(pageNo) { $("#loading").html('Loading...').show(); var url = '/foo/'; $.get(url, {pageNo: pageNo}, function(response) { $("#results").append(response); $("#loading").hide(); }); } $(document).ready(function() { var currPage = 1; $("a.next").click(function() { loadMore(++currPage); }); }); <a class="next">More results</a>
+5
source

Not so hard. Do the following

1) register a custom handler on your download more link. For example, something like

 $j('a[name=pageForward]').each(function() { $j(this).click(function(e) { e.preventDefault(); defaultPage++; doSearch(defaultPage); }); })

Notice that I added the name attribute to my anchor tags. DoSearch does:

2) causes ajax to load. also replace the contents of the download more with “Download” or something else

 $.ajax({ url: url, data: queryString, dataType: json or xml, cache: false, beforeSend: function(xhr) { }, success: function(data, status, xhr) { }, error: function(xhr, status, errorText) { that.showNothing(); }, complete: function(xhr, status) { } });

Take a look at the jquery docs for $ .ajax for what each of them means. If you want, you can handle the dom modification in previous and subsequent callbacks of your register.

3) on ajax complete, fill in the data and change the link back (or delete the message "Download").

As a personal preference, I would disable the link in 2, and I will have a special div with the message "Download" with the download.

Also, something more advanced would be to create a jquery plugin for your swap view ...

+1
source

More articles:


All Articles