Problema con jquery combinando each() y $.ajax()

[Luis Mario Álvarez]

Hola!

Tengo ésta cuestión:

Una parte de una aplicación que estoy haciendo contiene como interfaz una "tabla" que a su vez contiene una serie de datos, de los que el usuario podrá elegir algunos mediante un checkbox por renglón para enviarle al servidor un dato almacenado en un input[type=hidden] de ese mismo renglón.

La idea era hacer un each() con todos los input[type=checkbox] que tuvieran el atributo checked en true, y por cada uno de ellos lanzar una petición $.ajax con los datos propios del renglón y el resultado inyectarlo también en el renglón para que el usuario sepa que pasó con esa petición. Eso funciona bien, el problema es cuando regresan los datos:

El script del lado servidor recibe bien todos los datos, los procesa y los devuelve bien, pero jquery solo inyecta el resultado de la petición ajax en el primer renglón ignorando los demás, pero lo más curioso es que si lanza todas las peticiones ajax, o al menos eso marca la consola de Firebug.

En el afan se solucionarlo por mi mismo hice una validación que consistió en que el script del lado servidor devuelva el mismo dato que ajax envió (un id cualquiera), para que al inyectarlo en el markup se notara que es lo que exactamente hace. Y éste fué el resultado

Si marco para procesar el id 123, el resultado es inyectado en el renglón correcto.

Si marco para procesar el id 123, y el 456, 123 recibe el resultado correcto pero 456 no hasta que vuelvo a hacer clic en el boton que dispara la acción (pero si se dispara la petición ajax)

Si marco para procesar el id 123, el 456 y el 789, 123 recibe el resultado de 789, 456 no recibe nada y 789 recibe el resultado correcto.

Me ayudan?

Quizá lo esté planteando mal, o solucionando mal.

Éste es el código del js:

    // request invoice

    $('a.btn.invoice').click(function(){

        $('input[type=checkbox]').each(function() {

            /* -- only process checked orders -- */

            var checked = $(this).attr('checked');

            if (checked)

            {

                the_Order  = $(this).parent('form').attr('name');

                the_String = $(this).siblings('input[type=hidden]').val() + '&orderid=' + the_Order;

                the_Action = $(this).parent('form').attr('action');

                the_wrapper  = $('div#' + the_Order + ' > div.invoice-data');

                $.ajax({

                    url:        the_Action,

                    data:       the_String,

                    type:       'POST',

                    timeout:    10000,

                    success:    function(data) {

                                    the_wrapper.html(data);

                                },

                    error:      function(data) {

                                    the_wrapper.html(data);

                                }

                });

            }

        });

    });

Y éste es el markup de un renglón:

<!-- comienza la orden 26966 -->

<div id="26966" class="facturar order row mostrador">

<div class="order-data">

<span class="open"></span>

<span class="type mostrador"></span>

<h3 class="order">26966</h3>

</div>

<div class="order-amount">

<span class="amount">$ 328.00</span>

</div>

<div class="invoice-data">

<span class="invoiced no"></span>

<form method="post" action="http://192.168.1.130/saturno/nuevo/factura" name="26966">

<input type="checkbox" name="invoicer" />

<input type="hidden" name="invoice_string26966" value="claC=1001&nomC=Ventas+a+mostrador&calC=Domicilio&colC=Colonia&ciuC=Delegación&estC=Estado&cpC=CP&paiC=MX&telC=&corC=mail&rfcC=XAXX010101000&monC=Pesomexicano&pagC=2%3APurchase+Order&claP=26966&detP=44944%5E1%5E249%5E0%3A44852%5E1%5E79%5E0&punP=0&fleP=0&totP=328" />

<label for="invoice_string26966">Marcar para Facturar</label>

</form>

</div>

</div>

<!-- termina una orden -->

NOTAS:

• el input[type=hidden] contiene esa cadenota porque es lo que se necesita el servidor para que el programa funcione, pues trabajará con esa cadenota.
• el resultado reemplaza al form que lo solicitó, pues no se espera que sea realizada de nuevo la acción
• funciona en red local, por eso la ip, y no se planea que éste programa sea llevado a la nube
• dicha ip no es de otro equipo, es del mismo que sirve ésta aplicación
• el lenguaje del lado servidor es php con codeigniter y corre con debian lenny con parche suhosin
• estoy al borde del suicidio

Saludos!

--
magrioálvarez

desarrolladorweb

[Miguel Beltran R.]

Ya lo resolviste?

 

Éste es el código del js:

    // request invoice

    $('a.btn.invoice').click(function(){

        $('input[type=checkbox]').each(function() {

            /* -- only process checked orders -- */

            var checked = $(this).attr('checked');

            if (checked)

            {

                the_Order  = $(this).parent('form').attr('name');

                the_String = $(this).siblings('input[type=hidden]').val() + '&orderid=' + the_Order;

                the_Action = $(this).parent('form').attr('action');

                the_wrapper  = $('div#' + the_Order + ' > div.invoice-data');

                $.ajax({

                    url:        the_Action,

                    data:       the_String,

                    type:       'POST',

                    timeout:    10000,

                    success:    function(data) {

                                    the_wrapper.html(data);

                                },

                    error:      function(data) {

                                    the_wrapper.html(data);

                                }

                });

            }

        });

    });

Ya revisaste con firebug que the_wrapper si sea el correcto? Y dos mensajes de que se  ejecuto el ajax, uno en success y otro en error