Jquery- ajax : Obtener div desde response

gugol777 · #1 (**permalink**) 04/04/2012, 19:15

Muy buenas a todos !
Tengo un problema, y es que quiero obtener desde una llamada ajax, un div(product_table) que es solo una parte de la respuesta.

El codigo js es:

var parametros = {
"idproducto" : idproducto,
"cantidad" : cantidad
};
$.ajax({
data: parametros,
url: 'carrito_functions.php',
type: 'post',
dataType: 'html',
beforeSend: function () {
$("#div_procesando").html("Procesando, espere por favor...");
},
success: function (response) {

alert(jQuery(response).find('#product_table').html ());

}
});

el contenido que carrito_functions.php devuelve es:

<div id='product_add_message'>Producto agregado</div>

<div id='product_table'>la tabla</div

Pero el alert solo pinta NULL, porque no encuentra el div "product_table".

¿Alguien me puede decir porfavor que estoy haciendo mal?

Muchas gracias

Naahuel · #2 (**permalink**) 05/04/2012, 09:18

El contenido que carrito_functions.php devuelve es solo esto?

Código HTML:

Ver original<div id='product_add_message'>Producto agregado</div>
 
<div id='product_table'>la tabla</div>

Es decir, ningún <html> o <body>? La forma en que .find() o .filter() funcionan es medio engañosa, pues necesitan un elemento padre para buscar a partir de ahí. Probá este hack:

Código Javascript:

Ver originalalert( $("<div />").html(response).find( '#product_table' ).html() );

Lo que este truco hace es crear un nuevo elemento <div> y asignarle el HTML de respuesta. Entonces ahora si los elementos que queremos buscar tienen un padre, que es el div creado.

gugol777 · #3 (**permalink**) 05/04/2012, 10:19

Cita:

Iniciado por Naahuel

El contenido que carrito_functions.php devuelve es solo esto?

Código HTML:

Ver original<div id='product_add_message'>Producto agregado</div>
 
<div id='product_table'>la tabla</div>

.

Muchas gracias por responder !!

Si, el contenido que carrito_functions devuelve es solo eso. Es un contenido que he generado dinamicamente y el objetivo es que se pueda asignar varias porciones de html a diferentes destinos. Dicho de otra manera, necesito dividir la data que se va a devolver en varios divs para que puedan ser buscados desde el ajax seccess y asignados a diferentes tipos de divs en la capa de presentacion.

¿Deberia poner algun tag html o algun div padre? ¿Cual es la mejor forma de hacer lo que digo?

Me ha funcionado el hack que has sugerido !!!!! Pero quisiera saber si es correcto hacer eso.

:)

Gracias nuevamente!!

Naahuel · #4 (**permalink**) 05/04/2012, 10:31

Lo que yo suelo hacer cuando trabajo con AJAX es hacer las páginas estáticas funcionando normalmente y después aplicar AJAX.

Por ejemplo, supongamos que en una página tengo un link para "ver todos los inscriptos". Eso te lleva a otra página donde se listan todos los inscriptos. Una vez que todo funciona en forma estática, uso AJAX para obtener el listado dentro de la primera página filtrando el resultado (así como hacés vos). De esta forma me aseguro que si JavaScript no está disponible, ocurre un error en los scripts o se usa un navegador que no soporta AJAX, la aplicación todavía funciona. En este caso entonces, la página que traigo con AJAX contiene un HTML completo.

Esto es una práctica que suelo seguir, pero no es taaan necesaria y de hecho relentiza un poco el asunto por tener que generar más código que la gran mayoría de los usuarios no verá y encima require un filtrado del lado del cliente. Si tu aplicación depende necesariamente de AJAX o bien está destinada a un determinado grupo de usuarios, no veo por qué te tomarías el trabajo de hacerlo a mi modo. Sería ligeramente más eficiente generar sólo el código necesario, como hacés vos.

A lo que voy es que no hay "forma correcta" obligatoria, hay buenas prácticas que a veces no se adaptan a lo que necesitamos.