1

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.

heyitsmyusername
  • 631
  • 1
  • 8
  • 21
  • 1
    Can you provide a somewhat more complete (but still minimal) example of the problem? I *suspect* that this is a duplicate of: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements But it's hard to know for certain with the incomplete segments posted. – David Mar 31 '17 at 17:45
  • Do you care about the PHP or only the javascript type code? – heyitsmyusername Mar 31 '17 at 17:46
  • If the problem is client-side, then the client-side code seems the appropriate thing to examine. – David Mar 31 '17 at 17:49
  • You're right. As a simple fix, I added the existing: $(".table-row").click(function() { window.document.location = $(this).data("myredirect"); }); to the code that runs once each pagination link is clicked. It fixed the issue. Can you think of anything wrong with this fix? – heyitsmyusername Mar 31 '17 at 17:55
  • 1
    Well, if you're adding click handlers on an AJAX callback, then chances are you can just add a single top-level handler once instead. The linked question on the comment above demonstrates that. There wouldn't really be an observed difference, but it would be better style and easier to maintain. – David Mar 31 '17 at 17:57

2 Answers2

1

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
.

Taki
  • 17,320
  • 4
  • 26
  • 47
0

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.

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
RealSollyM
  • 1,530
  • 1
  • 22
  • 35