CODEWITHSUNDEEP
jqueryelement
heyitsmyusername
heyitsmyusername

Reputation: 651

PHP/Ajax/jquery action not working after pagination click

I have a single php page that loads a table with pagination using jquery/ajax. I am unable to get the rows to redirect to a different page once any page in the pagination is clicked (other than the initial page)

Here is simplified code of my generated html for the table. I know the html is generated correctly each time pagination page is changed.

<tr class="table-row" data-myredirect="http://example.com/page">
<td>blah blah</td>
</tr>

Upon success of loading the table data (only run once after user runs a query), i run the following (simplified):

success:function(result){
         //display table data (not shown)
$(".table-row").click(function() {
         //redirect
        window.document.location = $(this).data("myredirect");
    });
}

When user selects a different page from the pagination links, the following is run:

//executes code below when user click on pagination links
    $("#results").on( "click", ".pagination a", function (e){
        e.preventDefault();
        $(".loading-div").show(); //show loading element
        var page = $(this).attr("data-page"); //get page number from link
        $("#results").load("test.php",{"page":page, "myparam":searchItemOne}, function(){ //get content from PHP page
            $(".loading-div").hide(); //once done, hide loading element
            //fixes scrolling up bug
            $('html, body').animate({
        scrollTop: $("#results").offset().top
     }, 0);
        });

    });

What might be causing the action to no longer work once I navigate to the next pagination page? I can include more code upon request.

Upvotes: 1

Views: 1108

Answers (2)

RealSollyM
RealSollyM

Reputation: 1530

Taki's answer doesn't provide the solution but a guide.

To resolve the problem, I moved the $('#results').DataTable(); to the end of my javascripts, after defining the $(".table-row").click() event. Now all my pages do fire the embedded funtions.

Upvotes: 0

Taki
Taki

Reputation: 17654

i think it's because your .table-row is rendered after the javascript code ( after you load the html via AJAX the second time) so the redirection code doesn't know the new table-row .
try to put the redirection code 

$(".table-row").click(function() {
         //redirect
        window.document.location = $(this).data("myredirect");
    });

in your php file so it reloads with the new html
.

Upvotes: 1

Related Questions