I am completely new to jquery and ajax, my recent project is to help representatives (reps) manage customer quotes on the Internet. I have a page that displays all the quotes in a large table.
I managed to use ajax to retrieve and display quotes that are associated with a particular reputation after I click on this rep name. But the only problem is the reaction rate. The first few clicks are fine and very smooth. But after several attempts, the answer becomes slow, and I can’t even scroll the web page, and later the web browser is frantically ...
Please see my ajax code. there he is:
<br /><input type="image" id="printbtn" value="Print" src="images/printer.png"/><br />
<div id="container">
<div id="content">
</div>
</div>
<script type="text/javascript">
$(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>
, , , , ? , , !!!!
php-:
<?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;
?>
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 />