jquery tablesorter problem - php

Question

hello
i get some help here yesterday for a problem i was having tablesorter. if i run the backend query on its own it displays the results ok. but i call it from another page from dropdown it displays all records and no errors are being seen in firebug. where am i going wrong? thanks
this code works on its own.
getuserlog.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("sample", $con);
$sql="SELECT * FROM logger_log WHERE idusr_log = '".$q."' order by datein_log desc";
$result = mysql_query($sql);
echo "<table id=\"userlog\" class=\"tablesorter\" cellspacing=\"1\">
<thead>
<tr>
<th align=\"left\">Ip Address</th>
<th align=\"left\">Date In</th>
<th align=\"left\">Date Out</th>
</tr>
</thead>";
echo "<tbody>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['ip_log'] . "</td>";
echo "<td>" . date('d/m/Y H:i:s',strtotime($row['datein_log'])) . "</td>";
echo "<td>" . date('d/m/Y H:i:s',strtotime($row['dateout_log'])) . "</td>";
echo "</tr>";
}
echo"</tbody>";
echo "</table>";
mysql_close($con);
?>
<div id="pager" class="pager">
<form>
<img src="css/blue/first.png" class="first"/>
<img src="css/blue/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="css/blue/next.png" class="next"/>
<img src="css/blue/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<link href="css/blue/style.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$("#userlog")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
</script>
and this is the page i am calling it from.
userlog.php
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuserlog.php?q="+str,true);
xmlhttp.send();
}
</script>
<div class="spacer"></div>
<div class="userlogTxt">This report shows all users who have logged in up until: <?php echo date("d/m/Y H:i:s"); ?></div>
<br />
<?php
$conn = mysql_connect('localhost', 'root', '') or die(mysql_error());
mysql_select_db("sample") or die(mysql_error());
$result2 = mysql_query('SELECT * FROM user_usr ORDER BY name_usr ASC', $conn);
echo '<select name="users" onchange="showUser(this.value)">';
echo '<option value="selected">'. 'Select a user' . '</option>';
while ($row = mysql_fetch_assoc($result2))
{
echo '<option value="'.$row['id_usr'].'">'.$row['name_usr'].'</option>';
}
echo '</select>';
?>
<br /><br />
<div id="txtHint" class="userlogTxt">Logging information will be shown here.</div></div>
#inti
it is not pulling any date from the db. just displaying header and pager.
userlog.php
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<link href="css/blue/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showUser(str)
{
$.get("getuserlog.php?q="+str,function(response) {
$("#txtHint").html(response);
// Tablesorter will run, just after you loaded the ajax response
$("#userlog").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")
});
});
}
</script>
<div class="spacer"></div>
<div class="userlogTxt">This report shows all users who have logged in up until: <?php echo date("d/m/Y H:i:s"); ?></div>
<br />
<?php
$conn = mysql_connect('localhost', 'root', '') or die(mysql_error());
mysql_select_db("sample") or die(mysql_error());
$result2 = mysql_query('SELECT * FROM user_usr ORDER BY name_usr ASC', $conn);
echo '<select name="users" onchange="showUser(this.value)">';
echo '<option value="selected">'. 'Select a user' . '</option>';
while ($row = mysql_fetch_assoc($result2))
{
echo '<option value="'.$row['id_usr'].'">'.$row['name_usr'].'</option>';
}
echo '</select>';
?>
<br /><br />
<div id="txtHint" class="userlogTxt">Logging information will be shown here.</div></div>
getuserlog.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("sample", $con);
$sql="SELECT * FROM logger_log WHERE idusr_log = '".$q."' order by datein_log desc";
$result = mysql_query($sql);
echo "<table id=\"userlog\" class=\"tablesorter\" cellspacing=\"1\">
<thead>
<tr>
<th align=\"left\">Ip Address</th>
<th align=\"left\">Date In</th>
<th align=\"left\">Date Out</th>
</tr>
</thead>";
echo "<tbody>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['ip_log'] . "</td>";
echo "<td>" . date('d/m/Y H:i:s',strtotime($row['datein_log'])) . "</td>";
echo "<td>" . date('d/m/Y H:i:s',strtotime($row['dateout_log'])) . "</td>";
echo "</tr>";
}
echo"</tbody>";
echo "</table>";
mysql_close($con);
?>
<div id="pager" class="pager">
<form>
<img src="css/blue/first.png" class="first"/>
<img src="css/blue/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="css/blue/next.png" class="next"/>
<img src="css/blue/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
where have i gone wrong? thanks

Answer 1

I recommend you, to use the jQuery Ajax functions in userlog.php, and since the script inside getuserlog.php is constant, move it to the userlog.php, something like this:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<link href="css/blue/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showUser(str)
{
$.get("getuserlog.php?q="+str,function(response) {
$("#txtHint").html(response);
// Tablesorter will run, just after you loaded the ajax response
$("#userlog").tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
}
</script>
EDIT: Put all you javascript in the main page. The ajax response should only contain the data you want to get from the server.