Table written in Javascript visible on the screen, but not in "view source" and rows not clickable

StackOverflow https://stackoverflow.com/questions/17426995

Question

I have a situation where I'm doing an ajax call to a db, and returning the data. The data go into a div in a table format, and I'd like the rows to be clickable. This is a simple process done billions of times every day on the web (FIND a person in a db by a last name partial match).

On five other pages of the project there is NO problem reading info from a db, posting it on screen, and clicking on rows to re-direct to a new page. The difference is, those pages are written in PHP on the page. This particular page in question must be written with javascript because I'm asking the user for one or two letters from the last name, doing an ajax call and populating a div.

Here is the code for calling and writing the data:

$.ajax({
  type: "POST",
  url: "findpatientbackend.php",
  data: {letterslastname: lastname},
  dataType : 'json',
  success: function(result) {
     $("#div1").html(""); //make the div blank
     if(result.length >= 1)
       {var output = "";
       $("div1").html("<table id='findtable'>");
       $.each(result, function(index, value) {
            output += "<tr><td width='100px'></td><td id='localid' width='100px'>"
            + value.localid + "</td><td width='100px'>"
            + value.lastname + "</td><td width='100px'>"
            + value.firstname + "</td><td width='100px'>"
            + value.middlename + "</td><td width='100px'>"
            + value.dob + "</td></tr>";
               });
        $("#div1").html(output);
        $("div1").html("</table>");         
        }
         else
        {$("#div1").html("No matches");}
        },
        error : function() { alert("error on return"); }
    });
    });

And here is the code for "clicking" on the row (which works fine in five other situations):

$("#findtable tr").click(function() {
   var passthis = $(this).find("#localid").html();
   $.post("php/setsessionvariable.php",
   {sessionval: passthis},
     function(e) {window.location.href = '../root.php'}
          );

I've played and played with this, and it seems like the .click function cannot see the 'id='findtable'', and I've tried everything - changed from id to class, single quotes, double quotes, moving the location of the and - everything that I could think of. When I do a "View Source" with IE I see EVERYTHING but the table and the data, but the table and data are CLEARLY on the screen.

This is important, just to help the project, but it's more important for me in understanding what's going on. For example, is there something fundamental like:

  1. No Tim, a table written in Javascript cannot be made clickable, use PHP! (Sounds odd).
  2. Tim, when you write a table in Javascript, you have to do x, y and z! (probable).
  3. No Tim, you cannot use ".html" to move data around in Javascript you must use "X".
  4. Something else

Yesterday I learned about the jQuery dataTables library (and many others), and that probably would provide me a different avenue, but I'd rather learn about the problem in this code.

(P.S. and thanks again to @Shaddow for helping me with the .each command - very nice!)

Here is the breakdown:

$(document).on(
               "click",
             "#findtable td",
             (function() {
                            var passthis = $(this).find("#localid").html();
                            $.post("php/setsessionvariable.pphp",
                                   {sessionval: passthis},
                                   function(e) { window.location.href = '../root.php'; }
                                   );
                            });
                );

Here is the code for the pure Javascript table that actually allows the .click function to work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<style>
#findtable {
    width:200px;
    background-color:#CFD3FE;
    margin:10px auto;
    text-align:center;}
</style>

<body>

<div id="puttablehere"></div>

<script>
$(document).ready(function () {

var output = "<table id='findtable'>";
for (var i = 0; i<38; i++)
{output += "<tr><td width='100px'>X</td><td id='localid' width='100px'>X</td></tr>";}
output += "</table>";

$("#puttablehere").html(output);

$("#findtable tr").click(function(e) { alert("it works!"); });

});
</script>

</body>
</html>
Was it helpful?

Solution

Since your table is added dynamically, you need to use event delegation for the events. You're binding the handler to an element that doesn't exist at DOM ready:

$(document).on("click", "#findtable td", function() {
    var passthis = $(this).find("#localid").html();
    $.post("php/setsessionvariable.php", {sessionval: passthis}, function(e) {
        window.location.href = '../root.php'; //I removed the } from here.
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top