Problema con Ajax + JQuery + append()

petit_fucker · #1 (**permalink**) 27/09/2011, 20:23

Hola, mi problema es este:

Tengo una tabla html a la que se agregan filas dinámicamente cada cierto tiempo, por medio de un setInterval().

El setInterval() llama a una función $.ajax() que recibe el html correspondiente a la nuevas filas a insertar.

Posteriormente, agrego las filas recibidas a mi tabla por medio de append().

El problema es que una vez que tengo recargadas las nuevas filas, necesito recorrer toda la tabla para realizar ciertos procesos, sin embargo, JQuery no reconoce las nuevas filas, es más, el navegador no las reconoce como cargadas.

Probé con hacer el método ajax 'async: true' y no funciona. (También probé con 'async:false' por las dudas).

Supongo que tiene que ver con la carga asíncrona, pero he probado varias implementaciones y no puedo encontrar la solución.

Si alguien tiene alguna idea, muchas gracias.

alexg88 · #2 (**permalink**) 28/09/2011, 08:36

Pon el código y utiliza las etiquetas que existen para formatearlo (para que se vea mejor).

Saludos.

petit_fucker · #3 (**permalink**) 28/09/2011, 11:36

Ok, voy a poner un código simple y comprensible:

Este sería un index.php básico:

Código PHP:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery-1.6.1.js" type="text/javascript"></script>
        <script src="main.js" type="text/javascript"></script>
        <title></title>
    </head>
    <body>
        <p>ESTO ES LA TABLA DE PRUEBAS</p>
        <table border="1" id="pruebas">
        <?php
            echo "<tr>
                    <td>Campo1</td>
                    <td>Campo2</td>
                    <td>Campo3</td>
                    <td>Campo4</td>
                  </tr>
                  <tr class='p'>
                    <td>Uno</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td id='0'>0</td>
                  </tr>
                  <tr class='p'>
                    <td>Dos</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td id='1'>0</td>
                  </tr>
                  <tr class='p'>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td id='2'>0</td>
                  </tr>";
        ?>
        </table>
    </body>
</html>

Luego el Javascript de carga:

Código Javascript:

Ver original$(document).ready(function(){
  setInterval("sumarUno()", 1000);
  setInterval("agregarFila()", 5000);
});
 
function sumarUno(){
    var c = $('tr.p');
 
    for (var i= 0; i < c.length; i++){
        var id = "#" + i;
        var campo = $(id);
 
        var valor = parseInt(campo.text()) + 1;
        campo.text(valor);
    }
}
 
function agregarFila(){
    $.ajax({
       url: 'pruebas.php',
 
       success:function(html){
           $('#pruebas').append(html);
       },
 
       error:function(err){
           alert("ERROR:" + err);
       }
    });
}

Como ven, cada un segundo le sumo uno al Campo4, y cada 5 segundos pido nuevas filas y las agrego a la tabla html.

El problema es que las nuevas filas insertadas en la tabla no son reconocidas por JQuery la siguiente vez que recorra las mismas, en la función 'sumarUno()'.

petit_fucker · #4 (**permalink**) 28/09/2011, 13:19

Actualización:

En la función agregarFila hice el siguiente cambio:

Código Javascript:

Ver originalfunction agregarFila(){
    $.ajax({
       url: 'pruebas.php',
       dataType: "html",
       async: false,
 
       success:function(html){
            $('#pruebas').append(html);
 
            $('#pruebas').ready(function(){
                alert($('#3'),text()); //ESTO SERÍA EL ID DEL CAMPO DE LA NUEVA FILA AGREGADA POR AJAX
            });
       },
 
       error:function(err){
           alert("ERROR:" + err);
       },
  
    });

De esa manera JQuery SÍ reconoce el elemento y lo muestra el valor correcto en el alert, sin embargo, sólo siver para la prueba, pues yo no puedo saber el id de lo que va a llegar, ya que es dinámico.

Además, puede llegar por ajax el html correspondiente a varias filas.

¿Pot qué JQuery reconoce el elemento por el ID y sin embargo al recorrer la tabla no lo reconoce?

NOTA: si pongo 'Ver código fuente' de la página, las filas agregadas por ajax no se ven en el html correspondiente.

cristianlarrain · #5 (**permalink**) 29/12/2011, 20:04

Hey Petit_Fucker!, yo tengo el mismo problema, pudiste solucionar? si es así, te agradecería me indicaras como!, saludos y gracias

elo950 · #6 (**permalink**) 17/01/2012, 12:55

tb tuve el mismo problema, viendo que no hay solucion en este topico, cosa que molesta un poco, les dejo la implementacion que realice, la diferencia esta en el uso de los correspondientes thead, tbody y a la hora de usar el append no olviden indicar que dentro del tbody de la tabla es en donde queremos agregar el html :)

HTML

<table id='tabla_destino' width='100%'>
<thead>
<tr>
<th>Item</th>
<th>Descripcion</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

JS
function addFila(){
var id = 0;
var trs = $('#tabla_destino >tbody >tr');
trs.each(function () { id = id+1; });
var datos = "funcion=addFila&id="+id;
$.ajax({
type: "POST",
url: "funciones.php",
data: datos,
success: function(msg){
var x;
x=$("#tabla_destino >tbody ");
x.append(msg);
}
});
}