jquery aggiornamento live input [era: Cosa c'è che non va in questo semplice codice]

[Anuelicon]

Ciao ragazzi ... sono abbastanza nuovo con jquery, appena mi sembra di prendere un po di confidenza arriva qualcosa che mi blocca per un tempo indefinito.... ad esempio, cosa c'è che non va in questo codice ?

$(document).ready(function() {
                        
            $("#order_items input.quantity").blur(function(){
                var item_id;
                var item_value;
                var parameters = "";
                $("#order_items input.quantity").each(function() {
                    item_id = this.id;
                    item_value = this.value;
                    parameters += item_id+"="+item_value+"&";
                });

                $.ajax({
                   cache : "false",
                   type: "POST",
                   url: "http://localhost/index.php/cart/update_ajax",
                   data: parameters,
                   success: function(response)
                   {
                        $("#order_items").fadeOut();
                        $("#order_items").html(response).fadeIn(100);
                   }
                 });

                $("#totale_carrello").load("http://localhost/index.php/cart/update_tot_ajax");
            });
}); 

Questa è il codice della pagina creata è un semplice carrello:

<h1 id="il_tuo_carrello">Il Tuo Carrello</h1>

<div id="myForm">
    <form action="http://localhost/index.php/cart/checkout.html" method="post" id="orderform">        <div id="order_items">
        <table width="100%" cellpadding="5" cellspacing="2" border="0" class="display" id="orderitems">
<thead><tr>
<th>Prodotto</th><th>Quatit&agrave;</th><th>Prezzo</th><th></th></tr></thead><tbody>
<tr style="background-color:">
<td>Rosetta</td><td><div align="center"><input type="text" name="input_1" value="2" id="input_1" class="quantity" size="3" min="1"  /></div></td><td><div align="center">2,40 &euro;</div></td><td><div align="right">[url="http://localhost/index.php/cart/delete_row/1.html"]Elimina[/url]</div></td></tr>

<tr style="background-color:">
<td>Filone tipo Baguette</td><td><div align="center"><input type="text" name="input_4" value="3" id="input_4" class="quantity" size="3" min="1"  /></div></td><td><div align="center">13,50 &euro;</div></td><td><div align="right">[url="http://localhost/index.php/cart/delete_row/4.html"]Elimina[/url]</div></td></tr>
<tr style="background-color:">
<td>Ciabatta</td><td><div align="center"><input type="text" name="input_6" value="2" id="input_6" class="quantity" size="3" min="1"  /></div></td><td><div align="center">10,00 &euro;</div></td><td><div align="right">[url="http://localhost/index.php/cart/delete_row/6.html"]Elimina[/url]</div></td></tr>
</tbody></table>        </div>
        <hr>
        <table width="100%" border="0" cellspacing="5" cellpadding="0">
            <tr>
                <td>
                    <div align="right">
                    Totale Spesa: <span id="totale_carrello">25,90</span> &euro;
                    

                    

                    <button name="button" type="button" id="update_cart" >Aggiorna il carrello</button>                    


                    

                    <input type="submit" name="submit" value="Completa l'ordine"  />                    

                    </div>
                </td>
            </tr>
        </table>
    </form>
</div> 

Sto facendo solo esercizio, quello che voglio ottenere è che se l'utente cambia una quantità di un prodotto voglio che si aggiorni il suo carrello e il totale.

Carrello e totale sono nella sua sessione ma il discorso è analogo anche se fosse una chiamata a db.

In pratica quando un qualsiasi input di quantità perde il focus, jquery mi raggruppa tutte le variabili presenti e le posta via ajax al php. Il php estrae e aggiorna il carrello e restituisce la tabella con le righe prodotti quantità e prezzi aggiornati. Per ultimo, solo perchè è fuori dal DOM, un'altra chiamata ajax aggiorna il totale.

Il mio problema è che funziona benissimo, solo al primo cambio. Se faccio un secondo cambio di quantità rimane tutto così.

Perchè esegue solo il primo ???

Io sono PRO al web 2.0 però a volte ...

PS: Il bottone Aggiorna il carrello l'ho inserite per disperazione, al click fa esattamente le stesse cose che ho postato per il blur. Funziona, tutte le volte !! Ma è un compromesso, voglio che aggiorni senza cliccare !!
Grazie a tutti per i preziosi consigli ... farò tesoro anche delle eventuali migliorie se volete postarle.

[fcaldera]

dovresti verificare se per qualche motivo non entri più nell'evento blur
oppure se ci entri ma la chiamata non parte
oppure se ci entri, la chiamata parte ma non arriva la risposta del server

piazza qualche alert (o qualche console.log se usi firebug) per capire in quale caso rientri

[Anuelicon]

Ciao, piazzando un alert come primo comando dopo il blur, entra la prima volta e poi basta.
Anche firebug mi dice che il POST ad update_ajax con esito positivo c'è al primo blur ... dopo più nulla, nessun nuovo POST.

[fcaldera]

se cambi

$("#order_items input.quantity").blur(function(){
...

in

$("#order_items input.quantity").live("blur", function(){
...


?

[Anuelicon]

Ciao, pare che il blur nell'Event/live non sia ancora supportato ... infatti non fa niente ...

[fcaldera]

prova ad usare un bind() allora

[Anuelicon]

Ciao,
con il bind torna con il problema iniziale ... il primo funziona, dal secondo in poi non si lega più al bind("blur", ...


Sembra quasi che dopo la prima chiamata gli restituisco una tabella con degli input che non riesce più ad interpretare ...


Non è che è dovuto al fatto che i nuovi input.quantity sono una risposta ad una chiamata ajax, come se avessi messo il parametro class sbagliato nella tabella di risposta?

Per chiarire (sto scrivendo mentre ci ragiono):

/cart/index.php genere una pagina completa (<html> <script ajax sopra citato> e tabella del carrello atteuale )
Il blur e la successiva chiamata ajax (l'unica funzionante) chiamano /cart/update_ajax.php che fa un echo solo della tabella.

Inutile dire che la tabella dello script viene generato allo stesso modo di come avviene nell'index.php solo che il carrello è cambiato !!

mmmah

[fcaldera]

Originariamente inviato da Anuelicon
Non è che è dovuto al fatto che i nuovi input.quantity sono una risposta ad una chiamata ajax, come se avessi messo il parametro class sbagliato nella tabella di risposta?

certo che può essere quello il problema

nel momento in cui tu fai bind associ un handler a degli elementi in pagina al domready
se la risposta ajax genera altri campi quelli non saranno legati all'handler che hai definito

quindi se live() (che avrebbe dovuto servire allo scopo, ovvero associare l'handler anche a futuri elementi presenti in pagina) non viene supportato, al termine della chiamata ajax devi richiamare una funzione che associa nuovamente l'evento blur()

[Anuelicon]

Ciao

nel momento in cui tu fai bind associ un handler a degli elementi in pagina al domready
se la risposta ajax genera altri campi quelli non saranno legati all'handler che hai definito

Però non vengono generati nuovi campi, viene cambiata solo la quantità di quelli esistenti, viene cambiato solo il "value" degli input di quantità, ma gli id ed i name dei campi input sono sempre quelli.

quindi se live() (che avrebbe dovuto servire allo scopo, ovvero associare l'handler anche a futuri elementi presenti in pagina) non viene supportato, al termine della chiamata ajax devi richiamare una funzione che associa nuovamente l'evento blur()

Giusto !! Il live quindi dovrebbe essere quello che fa al caso mio ... come faccio a richiamare una funzione che associa nuovamente l'evento blur ? Cosa diventa una specie di funzione ricorsiva ?!
nel success : dell'ajax aggiorno il DOM e richiamo tutto e così via ...

[fcaldera]

Originariamente inviato da Anuelicon
Però non vengono generati nuovi campi, viene cambiata solo la quantità di quelli esistenti

Originariamente inviato da Anuelicon
Non è che è dovuto al fatto che i nuovi input.quantity sono una risposta ad una chiamata ajax, come se avessi messo il parametro class sbagliato nella tabella di risposta?

:master: queste due affermazioni si prendono a pugni.


comunque prova così

var addBlurHandler = function() {  

            var $inputs = $("#order_items input.quantity");

            $inputs.blur(function(){
                var item_id;
                var item_value;
                var parameters = "";
                $inputs.each(function() {
                    item_id = this.id;
                    item_value = this.value;
                    parameters += item_id+"="+item_value+"&";
                });

                $.ajax({
                   cache : "false",
                   type: "POST",
                   url: "http://localhost/index.php/cart/update_ajax",
                   data: parameters,
                   success: function(response)
                   {
                        $("#order_items").fadeOut();
                        $("#order_items").html(response).fadeIn(100);
                        addBlurHandler();
                   }
                 });

                $("#totale_carrello").load("http://localhost/index.php/cart/update_tot_ajax");
            });
};


$(document).ready(function() {
  addBlurHandler();
});