I'm displaying a list of search results on a page. At the very bottom I would like to place a "Load More" link which appends more results to existing ones on the page and changes the "Load more" link's parameters to next page, so that if user clicks it next page will be appended to the page. It would also be nice to have "Please wait" or some message appear while results are loading.

What's the most mon and practical way of doing this with jQuery?

Thanks!

I'm displaying a list of search results on a page. At the very bottom I would like to place a "Load More" link which appends more results to existing ones on the page and changes the "Load more" link's parameters to next page, so that if user clicks it next page will be appended to the page. It would also be nice to have "Please wait" or some message appear while results are loading.

What's the most mon and practical way of doing this with jQuery?

Thanks!

• javascript
• jquery

2 Answers 2

I use something similar to the following. It is a simplification of my working solution, leaving out irrelevant bits and pieces. Hope this can help 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>

Not so difficult. Do the following

1) register a custom handler on your "load more" linke. For example, something like

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

note that I added a name attribute to my anchor tags. The doSearch does:

2) fires the ajax to load more. also, replace the content of load more with 'Loading' or whatever

$.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();
        },
        plete: function(xhr, status) {
        }
    });

Look in the jquery docs for $.ajax for what each of those mean. If you want you can handle modifying the dom in the before and plete callbacks that your register.

3) on ajax plete, populate the data, and change the link back (or remove your "Loading" message).

As personal preference, I would disable the link in 2, and have a special div with a "Loading" message appear with the loading is happening.

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