Databases
StackOverflow2013
Postsdbo
PODatatables I can't call an onclick event after I paginate?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODatatables I can't call an onclick event after I paginate?
    text
    copied!<p>I am using <a href="http://datatables.net/">http://datatables.net/</a></p> <p>The demo table on their homepage resembles pretty much the exact same thing that i'm using (pagination, specifically), except each row has an area to click: </p> <p><code>&lt;a href="#" class="show-post"&gt;&lt;%= Post.title %&gt;&lt;/a&gt;</code></p> <p>This link opens a jquery UI modal dialog which displays some information which is ajax requested.</p> <p><strong>Part 1 (solved), see part 2 below</strong> </p> <p>I'm trying to run an onclick event which works normally on page one, but as soon as i go to page 2 (or any others) it stops working. I checked the source to make sure it wasnt doing anything funny in all the code is infact there (all the rows, even the ones hidden by the pagination)</p> <p>Any ideas?</p> <pre><code>$(function() { $('#dialog').dialog({ autoOpen: false, resizable: false, maxHeight: 600, width: 650, modal: true, beforeClose: function close() { $('#dialog').html(''); } }); $('.show-post').click(function() { clickLink(this); return false; }); }); </code></pre> <p>Thanks to those who answered my question! I fixed that issue.</p> <p><strong>Part 2</strong></p> <p>my next 'issue' id like to get to work is... I'm using the left and right arrow keys to allow them to 'scan' to the next or previous row, and display the information. This is as opposed to closing it and then having to click the next one.</p> <p>I'd like to make it so when you get to the bottom of page one, or top of page two, hidding next/previous respectively will automatically load that page, go to the top (or bottom), then open that dialog for that row on the other page.</p> <p>heres my click function (i know its kind of probably not structured the best... im new to jquery)</p> <pre><code>$(document).ready(function() { oTable = $('#posts').dataTable({ "bJQueryUI": true, "iDisplayLength": 400, "bAutoWidth": false, "sPaginationType": "full_numbers", "aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]] }); $(this).keydown(function(e) { var id = $("#dialog").attr("data-id"); currentPost = $("#posts tr[data-id=" + id + "]"); if (e.keyCode == 39 &amp;&amp; $('#dialog').html() != "") { /* Remove current background */ $(currentPost).blur() $(currentPost).removeClass("current"); $(currentPost).find("td.sorting_1").removeClass("current"); var next = currentPost.next().find(".show-post"); clickLink(next); } else if (e.keyCode == 37 &amp;&amp; $('#dialog').html() != "") { /* Remove current background */ $(currentPost).removeClass("current"); $(currentPost).find("td.sorting_1").removeClass("current"); var prev = currentPost.prev().find(".show-post"); clickLink(prev) } }); }); </code></pre> <p>heres the actual click function</p> <pre><code>function clickLink(src) { var post = $(src); var id = $(post).parent().parent().attr('data-id'); /* Set background for current line */ $(post).parent().parent().find("td.sorting_1").addClass("current"); $(post).parent().parent().addClass("current"); $('#dialog').attr("data-id", id); $('#dialog').load('/show-post/' + id, function() { $.ajax({ type: "POST", url: "/checkstatus/" + id, dataType: "html", error: function(data){ $("#dialog").fadeOut("fast", function() { $("#dialog").html("&lt;img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'&gt;").fadeIn("slow"); }); } }); /* Set Visited */ $(post).parent().parent().removeClass("visited").addClass("visited"); $('#dialog').dialog({ title: post.html(), beforeClose: function close() { $(post).parent().parent().find("td.sorting_1").removeClass("current"); $(post).parent().parent().removeClass("current"); }, buttons: { "Email 1": function() { $.ajax({ type: "POST", url: "/get-email/" + id + "/" + "1", dataType: "html", success: function(data) { window.location.href = data + "&amp;subject=" + post.html(); } }); }, } }); $('#dialog').dialog('open'); }); return false; }; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload