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:

Update einer Zeile in der Tabelle mit Jquery und Ajax

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:

  1. Wie aktualisiere ich eine Tabelle der Reihe nach, ohne es, die über den Inhalt soll es ersetzen? (Was mache ich falsch???)
  2. Was ist der effizienteste (Schnellste Reaktionszeit) Weg über JQuery und Ajax für user-initiierte updates? (beide CODE und Ansatz)
  3. 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.

InformationsquelleAutor Daniel Brown | 2013-07-02
Schreibe einen Kommentar