check box check all not working after search using xmlhttprequest

Question

I have a problem with my code. The checkbox check/uncheck all works on first load as all employee list are displayed. But when I select the dropdown for a specific group of employees, it displays the selected group of employees but the check box check/uncheck all doesn't work anymore. I am using xmlhttprequest on searching a group of employees. Please help. I have been a stackoverflow searcher on all my codes but even searching all over the internet I couldn't find the right answer.

Here's a sample of my code on dropdown onchange:

function searchStatus(str) {
document.getElementById("livesearch").innerHTML="";
$("#dvloader").show();
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
//document.getElementById("livesearch").style.border="0px";
$("#dvloader").hide();
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {  // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
  $("#dvloader").hide();
  //document.getElementById("livesearch").style.border="1px solid #A5ACB2";

    /// can add another function here
}
}

xmlhttp.open("GET","findStatus.php?employee="+str,true);
xmlhttp.send();

}

A sample code or program would be very helpful. Thank you very much in advance.

Here's what the div "livesearch" looks like to give you an overview of what's really happening:

<div id="livesearch" class="span12">

<?php
// SQL query
//$strSQL = "SELECT * FROM employees WHERE '$status' = '$status' ORDER BY emp_lname 
ASC";

//$employee = ucwords($employee);

            $strSQL =  "SELECT * ";
            $strSQL .= "FROM employees ";
            $strSQL .= "ORDER BY emp_lname ASC ";

            //In MySQL syntax ucase function is the same with the PHP's
            //ucase function

// Execute the query (the recordset $rs contains the result)
            $rs = mysql_query($strSQL);
            $num = 0;

            $rec_count = mysql_num_rows($rs);
            ?>
            <?php
            if($rec_count < 1){
            ?>
            <div class="alert alert-info">
        <button class="close" data-dismiss="alert" type="button"></button>
            <strong>Information: </strong>No results. Search again.
            </div>
            <?php
            } else {

            }

            ?>

<form class="" action="" method="post" enctype="multipart/form-data" name="selection">
<table align="center" class="table table-hover">
<thead>
<tr>
<th><input class="checkall" type="checkbox" value="" onclick="check();"/></th>
<th>Employee Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<?php


            // Loop the recordset $rs
            while($row = mysql_fetch_array($rs)) {
            $num++;
            ?>
<tr>
<td><input class="checkbox1" name="checkbox[]" id="checkbox[]" type="checkbox" 
value="<?php echo $row['emp_num'];?>"/></td>
<td><?php echo $row['emp_num'];?></td>
                        <td><?php echo $row['emp_fname'];?></td>
                        <td><?php echo $row['emp_mname'];?></td>
                        <td><?php echo $row['emp_lname'];?></td>
<td><?php echo $row['emp_status'];?></td>
<td><a href="basic.php?emp_num=<?php echo $row["emp_num"];?>">View Records</a></td>
                        </tr>
            <?php
            }
//<td><a href='basic.php?emp_num={$row["emp_num"]}'>View Records</a></td>
//<td><a href='basic.php?delete_emp={$row["emp_num"]}'>Delete Employee</a></td>
            ?>
</tbody>
</table>

</form>

</div>

Answer 1

The problem is you are dealing with dynamic elements and is not using event delegation to handle that case.

So use event delegation syntax of .on() to handle dynamic elements

$(document).on('click', '.checkall', function () {
    $(this).closest('table').find(':checkbox').prop('checked', this.checked);
});

Since you are already using jQuery there is no need to use XMLHttpRequest to do the ajax request and worry about the browser comparability issues... use jQuery.ajax() or in this case the .load() method like

function searchStatus(str) {
    var $live = $("#livesearch").empty();
    if (str.length == 0) {
        return;
    }
    $("#dvloader").show();
    $live.load("findStatus.php?employee=" + str, function () {
        $("#dvloader").hide();
    })
}

Event binding on dynamically created elements?