I'm totally newbie to jquery and ajax, my recently project is to help the representatives (reps) to manage customer quotations online. I have a page which displays all the quotations in a big table.
I've managed to use ajax to fetch and display the quotations which associate to a particular rep after i click that rep's name. But the only problem is the speed of response. The first few clicks are ok and very smooth. But after several tries, the response become slow and I cant even scroll down the webpage, and later on the web browser craches....
Please have a look at my ajax code. here it is:
<!-- Data display area -->
<br /><input type="image" id="printbtn" value="Print" src="images/printer.png"/><br />
<div id="container">
<div id="content">
</div>
</div>
<!-- Data display area -->
<!-- AJAX FETCH QUOTES DATA + Tablesorter + FIXED TABLE HEADER-->
<script type="text/javascript">
//<![CDATA[
$(function(){
$("a.repID").click(function(){
$('div#loader').append("<p align='center'><img src='images/loadingbar2.gif' id='loading' /></p>");
var repID = $(this).attr("title");
$.ajax({
type:'POST',
url:'quote_info.php',
data:'repID=' + repID,
cache: false,
success:function(data)
{
$("#container").html('<div id="content">' + data + '</div>');
$("#loading").fadeOut(500, function() {$(this).remove();});
$("#sortme").tablesorter();
$('.tbl').fixedtableheader();
}
});
return false;
});
});
</script>
<!-- AJAX FETCH QUOTES DATA + Tablesorter + FIXED TABLE HEADER-->
Problem found, the tablesorter and fixed header inside the success handler are causing the problem, but if I put them outside the handler, they will not work, where should i put them? or how should i do to have that two functions, many thanks!!!!
Server side php code:
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$conn=mysql_connect("localhost","root","");
mysql_select_db("auma",$conn);
$repID = $_POST['repID'];
if ($repID == "All") {
$whereClause = "";
} else {
$whereClause = "WHERE repID='$repID'";
}
$quoteinfoSQL = "SELECT q.quoteWeek, q.quoteID, q.quoteRev, q.customerName, q.repID,
q.quoteDesc, q.quoteValue, q.quoteProject, q.quotePM, q.quoteDR, q.quoteDS,
a.followUp, a.quoteStatus, a.furtherAction, a.UKConNo, a.clientRef, a.CorS
FROM auma_quote q
INNER JOIN auma_action a on a.quoteID = q.quoteID
$whereClause
ORDER BY q.quoteWeek DESC, q.quoteID DESC";
// execute the statement
$rsQuoteinfo = mysql_query( $quoteinfoSQL );
$html.= "<br />";
if ($repID == "All") {
$html.= "<img src=\"images/users.png\" /> Quotations from all representatives.</h6>";
} else {
$html.= "<img src=\"images/users.png\" /> Quotations from <b>$repID</b>.</h6>";
}
$html.= "<br />";
$html.= "<table id=\"sortme\" class=\"tbl\">";
$html.= "<thead>";
$html.= "<tr>
<th>Week</th>
<th>Quote ID</th>
<th>Rev</th>
<th>Customer</th>
<th>Rep ID</th>
<th>Description</th>
<th>Gross Value</th>
<th>Project</th>
<th>GP%</th>
<th>Date Received</th>
<th>Date Sent</th>
<th>Follow up Action</th>
<th>Result</th>
<th>Further Action</th>
<th>UK Contract No.</th>
<th>Client Ref.</th>
<th>Contractor or Specification</th>
<th></th>
</tr>";
$html.= "</thead>";
$html.= "<tbody>";
while($quoteinfoRow = mysql_fetch_array($rsQuoteinfo)){
$quoteWeek = $quoteinfoRow['quoteWeek'];
$quoteRev = $quoteinfoRow['quoteRev'];
$customerName = htmlspecialchars($quoteinfoRow['customerName']);
$repIDs= $quoteinfoRow['repID'];
$quoteID= $quoteinfoRow['quoteID'];
$quoteDesc = htmlspecialchars($quoteinfoRow['quoteDesc']);
$quoteValue = htmlspecialchars($quoteinfoRow['quoteValue']);
$quoteProject = htmlspecialchars($quoteinfoRow['quoteProject']);
$quotePM = $quoteinfoRow['quotePM'];
$quoteDR = $quoteinfoRow['quoteDR'];
$quoteDS = $quoteinfoRow['quoteDS'];
$followUp = htmlspecialchars($quoteinfoRow['followUp']);
$quoteStatus = htmlspecialchars($quoteinfoRow['quoteStatus']);
$furtherAction = htmlspecialchars($quoteinfoRow['furtherAction']);
$UKConNo = $quoteinfoRow['UKConNo'];
$clientRef = $quoteinfoRow['clientRef'];
$CorS = htmlspecialchars($quoteinfoRow['CorS']);
$html.= "<tr>";
$html.= "<td>$quoteWeek</td>";
$html.= "<td>$quoteID</td>";
$html.= "<td>$quoteRev</td>";
$html.= "<td>$customerName</td>";
$html.= "<td>$repIDs</td>";
$html.= "<td>$quoteDesc</td>";
$html.= "<td>$quoteValue</td>";
$html.= "<td>$quoteProject</td>";
$html.= "<td>$quotePM</td>";
$html.= "<td>$quoteDR</td>";
$html.= "<td>$quoteDS</td>";
$html.= "<td>$followUp</td>";
$html.= "<td>$quoteStatus</td>";
$html.= "<td>$furtherAction</td>";
$html.= "<td>$UKConNo</td>";
$html.= "<td>$clientRef</td>";
$html.= "<td>$CorS</td>";
$html.= "<td align=\"center\"><a href=\"quotedetails.php?quoteID=$quoteID&customerName=$customerName\" ><input type=\"image\" src=\"images/edit.png\" /></a></td>";
$html.= "</tr>";
} // while
$html.= "</tbody>";
$html.= "</table>";
$html.= "<br />";
echo $html;
?>
Response sample from Firebug:
<br /><img src="images/users.png" /> Quotations from <b>NA</b>.</h6>
<br />
<table id="sortme" class="tbl">
<thead>
<tr>
<th>Week</th>
<th>Quote ID</th>
<th>Rev</th>
<th>Customer</th>
<th>Rep ID</th>
<th>Description</th>
<th>Gross Value</th>
<th>Project</th>
<th>GP%</th>
<th>Date Received</th>
<th>Date Sent</th>
<th>Follow up Action</th>
<th>Result</th>
<th>Further Action</th>
<th>UK Contract No.</th>
<th>Client Ref.</th>
<th>Contractor or Specification</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>Q42389</td>
<td>0</td>
<td>Worldwide Procurement Services Ltd</td>
<td>NA</td>
<td>1 x Motor (Z011.274)</td>
<td>£2,954</td>
<td>COM: 649862</td>
<td>spares net</td>
<td>2010-02-28</td>
<td>2010-03-03</td>
<td></td>
<td>ORDERED</td>
<td></td>
<td>28824</td>
<td></td>
<td></td>
<td align="center"><a href="quotedetails.php?quoteID=Q42389&customerName=Worldwide Procurement Services Ltd" ><input type="image" src="images/edit.png" /></a></td>
</tr>
<tr>
<td>1</td>
<td>Q41883</td>
<td>1</td>
<td>Ital (International Trading Alliance) Ltd</td>
<td>NA</td>
<td>1xSAM10.1E75</td>
<td>£2,059</td>
<td>COM: 553697</td>
<td>25% net</td>
<td>2010-01-05</td>
<td>2010-01-08</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="center"><a href="quotedetails.php?quoteID=Q41883&customerName=Ital (International Trading Alliance) Ltd" ><input type="image" src="images/edit.png" /></a></td>
</tr>
</tbody>
</table>
<br />