El Problema:

Cuando intento actualizar una fila de una tabla utilizando AJAX/JQUERY, se actualiza la fila, pero en lugar de sustituir la fila de edad, que aparece en la parte superior de la tabla. Ver la imagen adjunta:

Actualización de una fila de una tabla con Jquery y Ajax

El Código

Esta es la función que llama a la actualización y la actualización:

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"
        );
    }

Y aquí es un ejemplo de mi mesa de la arquitectura, suponiendo que no hay una única fila:

<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>

El código creado por el script php que se coloca encima de la mesa es una coincidencia exacta con el código entre

<div id="siditemrow#">

y cierre de

</div>

Preguntas:

  1. ¿Cómo puedo actualizar una fila de la tabla sin que aparezca sobre el contenido que se supone que reemplazar? (¿Qué estoy haciendo mal?)
  2. ¿Cuál es el más eficiente (más rápido tiempo de respuesta) manera de ir sobre JQuery y Ajax para el usuario inició actualizaciones? (tanto el CÓDIGO y Enfoque)
  3. Cualquier otro tips/trucos para aumentar AJAX/JQuery, eficiencia, tiempos?

Cualquier ayuda apreciado! Gracias!

Edición:
Probablemente debería mencionar que el código de la estructura de la tabla se ha tenido en PHP partes reemplazadas para hacer más fácil la lectura. Cada fila tiene identificadores únicos para sus divs y los contenidos generados por PHP.

InformationsquelleAutor Daniel Brown | 2013-07-02

1 Comentario

  1. 4

    Por qué se muestran los datos en div en tbody

    En tbody debe ser table rows sólo

    Así que usted puede añadir sus datos en tbody en lugar de div como,

     $.get(
    loadUrl,
    {sid: sid,
    dbitem: dbitem,
    newinfo: newinfo},
    function(responseText){
    $('tbody').append(responseText);//use tbody as selector & append() here
    //or you can use prepend() as your needs
    },
    "html"
    );

    También para performance he encontrado algunos artículos

    • Hmm… Porque soy un idiota? Yo, sinceramente, no tenía ni idea de que esto era un no, no. Correr con tu comentario, he quitado el <div id="siditemrow#"> y se convirtió en el <tr>s en <tr id="siditemrow#">s hice esto para que yo pueda actualizar cada fila de forma individual en lugar de la tbody como un todo. Me voy a revisar los enlaces en el rendimiento. Gracias por que me empujaba en la dirección correcta!
    • Bienvenido….:)

Dejar respuesta

Please enter your comment!
Please enter your name here