[jQuery] tablesorter & ajax help

[tjones]

Hello,
I'm totally new to using Tablesorter, for the most part. I have used
it for static content and it's worked great. The problem I'm running
in to is I would like to use a popup menu to choose which table to
display but the sorting does not seem to work. It displays the table
but I cant sort and the "zebra" widget does not work. What can I do to
fix this.

Thanks,
tom

Here is my test code:

logdata.cfm (Main Page):

<script type="text/javascript">
        $(document).ready(function() {
                $("#genit").tablesorter( {widgets: ['zebra']} );
        });
</script>

<cfquery datasource="#session.dbsource#" name="qGetLogEventTypes">
    select distinct event_type from logdata
</cfquery>

<script src="includes/_selectLog.js"></script>
<form>
<div>
    <span>
        <b>Select a Log Type:</b>
    </span>
    <span>
    <select name="Type" onChange="showLogEvents(this.value)">
                <option value="">Select...</option>
        <cfoutput query="qGetLogEventTypes">
            <option value="#event_type#">#event_type#</option>
        </cfoutput>
    </select>
    </span>
</div>
</form>
<div id="logList" >
</div>

_getLogData.cfm:

<cfquery datasource="#session.dbsource#" name="qGetLogEvents">
    select event, event_type, date
    from logdata
    Where event_type like '#URL.type#'
    Order By Date Desc
</cfquery>

<cfif qGetLogEvents.recordcount>
<table id="genit" class="tablesorter" border="0" cellpadding="0"
cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Date</th>
        <th>Type</th>
        <th>Event</th>
    </tr>
    </thead>
    <tbody>
    <cfoutput query="qGetLogEvents">
    <tr>
        <td>#date#</td>
        <td>#event_type#</td>
        <td>#event#</td>
    </tr>
    </cfoutput>
    </tbody>
</table>
</cfif>

_selectLog.js:

var oXmlHttp

function showLogEvents(str)
{
        var url="includes/_getLogData.cfm?&type=" + str
        oXmlHttp=GetHttpObject(stateChanged)
        oXmlHttp.open("GET", url , true)
        oXmlHttp.send(null);
}

function stateChanged()
{
        if (oXmlHttp.readyState==4 || oXmlHttp.readyState=="complete") {
                
document.getElementById("logList").innerHTML=oXmlHttp.responseText;
        }
}

function GetHttpObject(handler)
{
        try
        {
                var oRequester = new XMLHttpRequest();
                oRequester.onload=handler
                oRequester.onerror=handler
                return oRequester
        }
        catch (error)
        {
                return false;
        }
}