Question

I would like to clarify how browser scripting (such as javascript/jquery) differs from server side scripting (such as PHP) and how they are allowed to interact with each other.

If I have php code inside of my html code, javascript definitly can not change any of that script since its not really there. The server first reads through the php code and then sends its output (as well as any normal html code in the file) over to the web browser, so the web browser never sees all your php code. On the flip side, php can’t see the DOM because its not yet on the browser yet, and therefore be dynamic in the way javascript is. The way you make them interact is with ajax…

My question is: I have jquery ajax call which calls a php file to create a table and the table data has a link in it. Is there any reason why when I create the table from this php file that I can’t now access it through another jquery/javascript call?
This is my code:

 $(document).ready(function()
   {
        $("#build_table, .Course_Name, .Start_Date, .Book_Title, .Book_Author, .Book_Isbn").click(function()
        {
            var whichButton = $(this).attr("class");
            console.log("Whichbotton = " + whichButton);
            var prog = $("#program option:selected").text();
            var sch = $("#school option:selected").text();
            var trm = $("#term option:selected").text();
            var ext = $("#extension option:selected").text();
            if(prog == "" || sch == "" || trm == "")
            {
                alert("Please enter a selection for each field");
            }
            else
            {
                $.get("build_table.php", {program: prog, school: sch, term: trm, extension: ext, button: whichButton},
                function(table)
                {   console.log("Entered table function");
                    $("#input_table").replaceWith("<div id='input_table'>" + table + "</div>");
                });
            }   
        });
   });

and my php file snippet:

$program = $_GET["program"];
$school = $_GET["school"];
$term = $_GET["term"];
$extension = $_GET["extension"];
$button = $_GET["button"];

$con = mysql_connect("127.0.0.1","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

$term = str_replace(" ", "", $term); 
$sql = "SELECT * FROM tbl_name WHERE Dep1= '" . $program . "' AND Dep2= '" . $school . "' AND Dep3 = '" . $term . "'";
if($button == "build_table")
{
//add nothing  
}
else
{   echo $button;
$button = str_replace("_", " ", $button);
$sql = $sql . "ORDER BY `" . $button . "` DESC";
}   
mysql_select_db("csv_db", $con);

$result = mysql_query($sql)  or die(mysql_error());
echo $sql;
$num_rows = mysql_num_rows($result);
echo "<br>Number of Rows: " . $num_rows; 
echo "<table id='booklist'><tr>
                         <th>Edit</th>
                         <th class='coursename'><a href='#' class='Course_Name'>Course Name</a></th>
                         <th class='startdate'><a href='#'>Start Date</a></th>
                         <th class='booktitle'><a href='#'>Book Title</></th>
                         <th class='bookauthor'><a href='#'>Book Author</a></th>
                         <th class='bookisbn'><a href='#' class='Course Name'>Book ISBN</a></th>
                     </tr>";

        while($row = mysql_fetch_array($result))
        { 
            echo    "<tr>
                        <td><input type='checkbox'></input></td>
                        <td class='coursename'>" . $row['Course Name'] . "</td>
                        <td class='startdate'>" . $row['Start Date'] . "</td>
                        <td class='booktitle'>" . $row['Book Title']. "</td>
                        <td class='author'>" . $row['Book Author']. "</td>
                        <td class='isbn'><input class='ISBN_number' type='text' value='' size='13' maxlength='13'></input></td> 
                  </tr>";                   
        }               
echo "</table>";

mysql_close($con);

I’m trying to make it that when I click on the header (of the table) Course Name it will sort the Course Name column (and yes there is a space in it… the backticks take care of it.) It doesn’t work. On the other hand, when I tried putting in a simple html into my normal html code

<a href="#" class="Course_Name" value="Course Name Sort">Course Name Sort</a>

it now worked as I expected. Am I missing a concept or am I just making a simple error?

Answer 1

The problem is in the way you are assigning your click handler:

$("#build_table,.Course_Name,.Start_Date,.Book_Title,.Book_Author,.Book_Isbn")
.click(function() { 
    // your handler code
});

What this says is “assign a click handler to any elements that currently match the supplied selector”. This handler does not apply to elements that you later create dynamically (or load via Ajax).

Fortunately jQuery does allow you to assign a handler in other ways such that it will apply to elements created in the future: you can use .live() or .delegate() to setup your handler, or if you’re using jQuery 1.7 these have been deprecated in favour of .on().

I haven’t actually used .on() yet, but here’s how you could use .delegate():

$(document).delegate(
   "#build_table,.Course_Name,.Start_Date,.Book_Title,.Book_Author,.Book_Isbn",
   "click",
   function() { 
       // your handler code
});

I suggest you read the doco for all three methods.