Update einer Zeile in der Tabelle mit Jquery und Ajax
Das Problem:
Wenn ich versuche zu aktualisieren, eine Zeile in der Tabelle mit AJAX/JQUERY, ist die Zeile aktualisiert wird, aber anstatt Sie zu ersetzen Sie die alte Zeile, wird er an der Spitze der Tabelle. Siehe das angehängte Bild:
Den Code
Hier ist die Funktion, die Anrufe die Aktualisierung:
function ajaxRefresh(sid, dbitem, newinfo)
{
//sid -> spiceID
//dbitem -> image, fill, etc
//newinfo -> what to update
//refreshDiv -> image/spice
var loadUrl = "update.php"; //
var ajax_load = "<img src='images/load.gif' alt='loading...' />"; //loading gif/image
var toBeReloaded = "#siditemrow" + sid;
alert("Sid: " + sid + " dbitem: " + dbitem + " newinfo: " + newinfo);
$(toBeReloaded).html(ajax_load);
$.get(
loadUrl,
{sid: sid,
dbitem: dbitem,
newinfo: newinfo},
function(responseText){
$(toBeReloaded).html(responseText);
},
"html"
);
}
Und hier ist ein Beispiel meiner Tabelle die Architektur, unter der Annahme, dass es nur eine einzelne Zeile:
<table cellspacing="0">
<thead>
<tr>
<th class="image">Image</th>
<th class="spice">Spice</th>
<th class="cost">Cost</th>
<th class="notes">Notes</th>
<th class="coupons">Coupons</th>
<th class="control">Chef Controls</th>
</tr>
</thead>
<tbody>
<!-- Ajax Refresh of entire row-->
<div id="siditemrow#">
<tr class="alt"> OR <tr>
<td class="image" align="center">
<!-- Ajax Refresh of fill update -->
<div id="siditemfill#">
<div class="outergreen">
<div class="imagegreen">
<!-- Ajax Refresh of image update -->
<div id="siditemimage#">
<img class="itemimage" src="resources/images/imagesource.png"/>
</div>
<!-- Ajax Refresh of image update -->
</div>
</div>
</div>
<!-- Ajax Refresh of fill update -->
</td>
<td class="spice">spicename</td>
<td class="cost">~$#.##</td>
<td class="notes">description</td>
<td class="coupons">link & store</td>
<td class="control">
<!-- Ajax Refresh of fill update -->
<div id="siditemchefcontrols<?php print $row['sid']; ?>">
<img class="more" src="images/uparrow.png" onClick="itemFill('up','currentquantity','id#')" />
<img class="less" src="images/downarrow.png" onClick="itemFill('down','currentquantity','id#')" />
<img class="addimage" src="images/photoupload.png" onClick="openImageUpload('id#')" />
<img class="settings" src="images/settings.png" />
</div>
<!-- Ajax Refresh of fill update -->
</td>
</tr>
</div>
<!-- Ajax Refresh of row update -->
</tbody>
</table>
Dem code erstellt, die das php-Skript, das sich oberhalb der Tabelle ist ein identischer Abgleich der code zwischen
<div id="siditemrow#">
und es schließen
</div>
Fragen:
- Wie aktualisiere ich eine Tabelle der Reihe nach, ohne es, die über den Inhalt soll es ersetzen? (Was mache ich falsch???)
- Was ist der effizienteste (Schnellste Reaktionszeit) Weg über JQuery und Ajax für user-initiierte updates? (beide CODE und Ansatz)
- Andere Tipps/tricks für Erhöhung AJAX/JQuery-Effizienz/- Zeiten?
Jegliche Hilfe dankbar! Danke!
Edit:
Es sollte wahrscheinlich erwähnt werden, dass der code für die Struktur der Tabelle hat die PHP-Teile ersetzt, um das Lesen zu erleichtern. Jede Zeile hat eindeutige Identifikatoren für seine divs und Inhalte, die von PHP.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Warum Sie zeigt die Daten in
div
imtbody
In
tbody
es solltetable rows
nurSo können Sie hängen Sie Ihre Daten in
tbody
im Ortdiv
wie,Auch für
performance
fand ich einige Artikel<div id="siditemrow#">
und drehte den<tr>
s in<tr id="siditemrow#">
s ich Tat dies, so dass ich aktualisieren kann jede Zeile einzeln, anstatt den tbody als ganzes. Ich werde überprüfen Sie Ihre links auf die performance. Vielen Dank für schob mich in die richtige Richtung!