CODEWITHSUNDEEP
javascriptjquerypagination
Smith
Smith

Reputation: 5961

jquery paginating php return data

I am using this jquery to fetch paginated data from php file from server. The php file generates the pagination and also returns the data associated with these in json format. my pagination data is returned as a list of li tags, i use this to replace the already existing bootstrap pagination in the html file

initially, this is what is generated by my php file

<ul>
<li class="active"><a>1 </a></li>
<li><a href="#2">2</a></li>
</ul>

When i click on 2, its gets the data next pagination shown

<ul><li><a href="#1">1</a></li>
<li class="active"><a>2 </a></li></ul>

Now when i click on 1 to get data for 1, the jquery events dosen't fire, the jquery code

$("#pagination li a").click(function(e) { 
    debugger;
    e.preventDefault();

    var start=$(this).attr('href').split('#')[1];
    var msgDiv=$('#messages');
    var pagDiv=$("#pagination ul");
    try{
        $.ajax({ // create an AJAX call...
            beforeSend: function() {showLoading(msgDiv);},
            timeout:10000,
            type: "post", // GET or POST
            url: "./process-messages.php", // the file to call
            dataType:'json',
            data: {start:start}, // get the form data
            success: function(response) { // on success..
                if(response.status!='error'){
                   msgDiv.html(response.data); // update the DIV
                   pagDiv.html(response.page); // update the DIV
                }else{
                    msgDiv.html(response.data); // update the DIV
                }
            },
            error: function() { // on success..
                showGeneralError(msgDiv);
            }
        }); 
    }catch (e){
        console.log(e);
    }

});

what could be the problem?

Upvotes: 0

Views: 132

Answers (2)

Konsole
Konsole

Reputation: 3475

You should use on for dynamic contents. Try

$(document).on('click', '#pagination li a', function() {

Event delegation is an event handling technique where, instead of attaching event handlers directly to every element you want to listen to events on, you attach a single event handler to a parent element of those elements to listen for events occurring on it’s descendant elements.

Upvotes: 1

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

You are binding the click event to the existing elements, when the page is loaded. When the list gets replaced, the events are deleted along with the old elements. What you need is either to call the initialization function again when the AJAX returns (a bit clumpsy) or better to use .on() like this:

$("#pagination-container").on("click", "li a", function() {
    // same as your handler
});

Beware though that the pagination-container must remain in the page, i.e. not updated through AJAX:

<div id="pagination-container">
    <ul>
        ...pagination as in your code
    </ul>
</div>

I assume the AJAX returns the <ul>...</ul> stuff.

Upvotes: 1

Related Questions