Ajax request is canceling other JS events on page

I have a table that is populated with results of an AJAX onchange request. Everything works perfectly, but I also have an included JS script that is loaded on window.load which changes the table based on mouseover, mouseout, onclick, etc. However, since the table is not populated until the AJAX request the table JS features do not work. Is there way to populate the table with the AJAX request and instead of doing window.load, load the JS script during or after the AJAX request is complete? Below is my code:

<link href="<?php echo $this->config->item('base_url'); ?>/css/table_design.css" 
      rel="stylesheet" type="text/css" media="screen" />
    
// This is the script that is included, and inside the script
//the main function is started by window.load
<script type="text/javascript" 
    src="<?php echo $this->config->item('base_url'); ?>/js/table_design.js"></script>
    
<br />
                
<script type="text/javascript">
    function showUser(str) {
        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("tars").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","jqueryDB/catSelector?cat="+str,true);
        xmlhttp.send();
}
</script>

<span id="tars"></span>

Here is my PHP page requested through AJAX:

public function catSelector()
{
    $catID = $_GET['cat'];  
    $query = $this->db->query('SELECT * FROM upload WHERE category = '.$catID);
    $num_rows = $query->num_rows();
    $val = $query->result_array();   
            
    echo '<table cellspacing="0" cellpadding="0">
        <tr>
        <th width="50%">File Name:</th>
        <th width="30%">File Size:</th>
        <th>Download Link:</th>
    </tr>';
        
    $c = true;
    foreach($val as $files){
        
         if ($files['size'] >= 1000000000) {
             $files['size'] = round( ($files['size'] / 1000000000) , 2).' GB';
        }
        
        if ($files['size'] >= 1000000) {
            $files['size'] = round( ($files['size'] / 1000000) , 2).' MB';
        }else{
            $files['size'] = round( ($files['size'] / 1000) , 2).' KB';
        }
                
        echo '<tr'.(($c = !$c)?' class="odd"':'').">
            <td>$files[name]</td>
            <td>$files[size]</td>
            <td><a href='$files[location]' >Download</a></td>
        </tr>";
    }
        
    echo '</table>';
}

Answer

I never used XMLHttpRequest but after reading I think you can do it like this:

function showUser(str)  {
    ...
    xmlhttp.open("GET","jqueryDB/catSelector?cat=" + str, true);
    xmlhttp.onload = function() { //add click events to table elements (same function you calling now with `window.load` };
    xmlhttp.send();
}

Advertisement

Answer