2

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 common and practical way of doing this with jQuery?

Thanks!

hvgotcodes
  • 118,147
  • 33
  • 203
  • 236
BugBusterX
  • 193
  • 1
  • 2
  • 12

2 Answers2

5

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>
karim79
  • 339,989
  • 67
  • 413
  • 406
  • I added a colorbox code to my page so that content pops up in colorbox. For some reason it does not work with reults that were returned via ajax. Can you advise what to do? http://stackoverflow.com/questions/4801058/colorbox-and-content-returned-via-ajax – BugBusterX Jan 26 '11 at 02:57
  • @BugBusterX - The answer on that page seems to be correct - you will need to apply colorbox to the newly loaded elements within the ajax success callback. – karim79 Jan 26 '11 at 13:21
1

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();
        },
        complete: 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 complete callbacks that your register.

3) on ajax complete, 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...

hvgotcodes
  • 118,147
  • 33
  • 203
  • 236
  • Even though I used another solution, I wanted to thank you for taking time and replying to my question. I appreciate your help. – BugBusterX Jan 24 '11 at 00:57
  • @bugbusterx, upvotes always alleviate the pain of answer betrayal ;) – hvgotcodes Jan 24 '11 at 01:14
  • I am unable to upvote, as this website will not allow me to register without using ymy yahoo or google account, which I find ridiculous. I do not want to link my email accounts to this. – BugBusterX Jan 24 '11 at 05:26
  • BugBusterX, no worries man. i was kind of joking. In any event, if you are going to ask questions, you might as well register. I have never once received any email from SO. Its pretty safe. – hvgotcodes Jan 24 '11 at 15:41