Question

I am writing a script that will allow me to search torrent sites. On page load, the left side has a text area to search and to the right an empty div. The search uses AJAX to pull a table of the search results and append to the empty/non-empty div on the right. I want to use the jQuery plugin tablesorter to sort said tables. On the backend, I am looping the search POST by line, forming my table, then outputting. Below is the inside of the loop:

$tables .= "<div align='right' style='border:solid 2px grey'>
<div class='subheader'>
    $file
    <input type='button' value='F This' onclick='toggleVis(\"$file.div\")'>
</div>
<div id='$file.div'>
    <table RULES=ROWS FRAME=HSIDES border='1' class='tablesorter' id='$file.table'>
        <thead>
            $headStr
        </thead>
        <tbody>
            $bodyStr
        </tbody>
    </table>

    <input type='button' value='F That--^' onclick='toggleVis(\"$file.div\")'>

</div>
</div>
<br>";

After all data has been processed, I am just echoing $tables. Below is the AJAX call + jquery initialization:

function doSearch(){
    var http;  
    try{
            // Opera 8.0+, Firefox, Safari
            http = new XMLHttpRequest();
    } catch (e){
            // Internet Exploder
            try{
                    http = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                    try{
                            http = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){
                            // Bad 
                            alert("Your browser derped!");
                            return false;
                    }
            }
    }

    http.onreadystatechange = function(){
        if(http.readyState == 4){
            if(document.getElementById('clearResults').checked)
                document.getElementById('searchResults').innerHTML = http.responseText;
            else
                document.getElementById('searchResults').innerHTML += http.responseText;

            $("table").tablesorter();  //  Initialize tablesorting
        }
    }
    search = encodeURIComponent(document.getElementById('search').value);
    document.getElementById('search').value = '';
    http.open("POST", "<?php echo $_SERVER['PHP_SELF']; ?>", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    http.send('lAct=search&search='+search);
}

So the above code executes flawlessly, but the new table does not have sorting. Interestingly enough, initializing the tablesorter is actually changing the class of my th els to “header” – which implies that it is working? For giggles, I added a static table on the page; it becomes sortable after the search function is called (along with the changed th classes). Has anyone run into anything like this? I can post more code if necessary; any help would be greatly appreciated 😀

Just in case, below is the finalized table that is being output:

<div id="ubuntu.div">
    <table rules="ROWS" frame="HSIDES" border="1" class="tablesorter" id="ubuntu.table">
        <thead>
            <tr><th class="header">Type</th><th class="header headerSortDown">Size</th><th class="header">SE</th><th class="header">LE</th><th class="header">name</th><th class="header">dl</th></tr>
        </thead>
        <tbody>
            <tr class="highlight" id="ubuntu.0"></tr><tr class="highlight" id="ubuntu.0"><td>Video(Other)</td><td><b>267.45MiB</b></td><td>7</td><td>1</td><td>VTC Ubuntu Certification</td><td>

    </td>
</tr><tr class="highlight" id="ubuntu.1"><td>Video(Other)</td><td><b>10.62MiB</b></td><td>1</td><td>1</td><td>Nelson Mandela explains Ubuntu (ideology)</td><td>

    </td>
</tr>
        </tbody>
    </table>

    <input type="button" value="F That--^" onclick="toggleVis(&quot;ubuntu.div&quot;)">

</div>                

I also just noticed that as I am clicking the table headers, the class is changing to include SortDown or SortUp…weird that it’s not sorting…

Answer 1

There are two rows with the same ID, the first one being empty:

<tr class="highlight" id="ubuntu.0"></tr>
<tr class="highlight" id="ubuntu.0">...</tr>