Question

I’m using the below code in order to increase the number of results that my php/mysql pulls-in through a ‘more’ button.

My question is: Can I add a jquery cookie so that when the ‘more’ button is pressed, and more results are loaded, the current state is saved?

The results in question are listed elements which contain links to their respective article. The only problem is that when you view an article from the ‘more’ results, and then go back to the listed results page, the results that were brought in by the ajax (more-press.php) are gone : (

Hence my question. Hope it makes sense. Thanks in advance. S.

$(document).ready(
function(){                                        
        $(function() {
        //More Button
        $('.more').live("click",function() 
        {
        var ID = $(this).attr("id");
        if(ID)
        {
        $("#more"+ID).html('<img src="images/more_press.gif" alt="More results..." />');
        $.ajax({
        type: "POST",
        url: "more_press.php",
        data: "lastmsg="+ ID, 
        cache: false,
        success: function(html){
        $("div#updates").append(html);
        $("#more"+ID).remove();
                }
            });
        } else {
        $(".morebox").html('<p><strong>No more results...</strong></p>');
        }
        return false;
                });
            });
        })

Edit: Also have this related post – Question 2

Answer 1

Sure, you can do this. Use the jquery cookie plugin to set a cookie when they click the “more” button and load more results, e.g.:

// set cookie to expire in 60 minutes when 'more' is clicked
$.cookie('viewing_expanded_content',true, {
    expires : new Date(new Date().valueOf() + 60 * 60 * 1000)
});

And when they return to the list of articles, either check for the cookie on the server side and serve the full list initially, or check for the presence of the cookie on the client side using Javascript and fetch the additional content if the cookie’s value is set to ‘true’:

if($.cookie('viewing_expanded_content')) {
  // make your ajax call, etc
}

Hope that helps.