Refresh, jquery.load e chiamate che non vanno dopo il primo load

[AVRstudio]

Premettendo che non sono un espertone di JavaScript e mi sto avvicinando allo studio più approfondito di jQuery proprio in questi giorni vi espongo un problema che mi sta affliggendo da stamattina ed al quale non ho trovato spiegazione:

Sto provando a sviluppare un carrello per un progettino ecommerce e sto temporaneamente provando tutto su una unica pagina.

All'inizio ho una tabella con gli articoli (con dati presi in php+mysql, ma questo lato non è il problema) con un pulsante "Aggiungi al carrello" alla fine di ogni riga realizzato mediante un input type=image (per passare il codice articolo). Questo funziona.

$(".btt_addtocart").click(function(){

	var codicearticolo = $(this).val();
	var dataset = "i=" + codicearticolo;

	$.ajax({
		type: "POST",
		url: "/shop/aggiungi_a_carrello.inc.php",
		data: dataset,
		dataType: "html",
		cache: false,
		success: function(data) {
			$("#notice").fadeIn("slow");
			$("#notice").html(data);
			$("#notice").css("background-color","#CCFFCC");
			setTimeout('$("#notice").fadeOut("slow")',2000);
			$("#riepilogo_carrello").load(location.href+" #riepilogo_carrello>*"); 
			$("#riepilogo_acquisto").load(location.href+" #riepilogo_acquisto>*"); 
		},
		error: function() {
			var message = "Si è verificato un errore.";
			$("#notice").fadeIn("slow");
			$("#notice").html(message);
			$("#notice").css("background-color","#FFCCCC");
			setTimeout('$("#notice").fadeOut("slow")',2000);
		}
	});
});

Il funzionamento è molto semplice: invia i dati in POST alla pagina PHP che li controlla, li elabora e restituisce l'ok. Al refresh mi fa apparire una notifica, mi aggiorna il contatore degli articoli nel carrello (#riepilogo_carrello) ed il riepilogo dell'acquisto (#riepilogo_acquisto)

Proprio in quest'ultimo, ho messo due pulsantini, sempre tramite (input type="image") con due pulsanti + (associato alla chiamata di cui sopra) ed un - associato ad una molto simile che elimina una riga dalla tabella carrello.

Funziona tutto perfettamente, le righe si aggiungono senza problemi ma quando da una di queste righe del riepilogo faccio clic su uno dei due pulsantini + o - funziona solo la prima volta. Dalla seconda in poi non va più nulla e non si genera la chiamata asincrona (la console di Firebug non mente).

Sono sicuro che si tratta di una cosa abbastanza semplice... ma... proprio non riesco ad arrivarci!

Grazie a tutti sin da ora!


*Modificato per correzione indentatura codice

[Virus_101]

CALLBACKS!!!!

1- bindare evento click dentro

$(document).ready(function(){


$("#mydiv").click( etc... )


})


inoltre tu fai

success: function(data) {
			$("#notice").fadeIn("slow");
			$("#notice").html(data);
			$("#notice").css("background-color","#CCFFCC");
			setTimeout('$("#notice").fadeOut("slow")',2000);
			$("#riepilogo_carrello").load(location.href+" #riepilogo_carrello>*"); 
			$("#riepilogo_acquisto").load(location.href+" #riepilogo_acquisto>*"); 
		},

Non noti l'errore ?
Non esegui correttemante e in sicurezza i callbacks !!!!

success: function(data) {
			$("#notice").stop().fadeIn("slow",function(){
				$("#notice").html(data);
				$("#notice").css("background-color","#CCFFCC");
				setTimeout(function(){ $("#notice").fadeOut("slow" ,function(){
					
					$("#riepilogo_carrello").load(location.href+" #riepilogo_carrello>*"); 
					$("#riepilogo_acquisto").load(location.href+" #riepilogo_acquisto>*"); 

				}); } , 2000 );			
		},

Noti la differenza concettuale ?

[AVRstudio]

Hmmm... già, noto!
Grazie mille, ora provo e scrivo il risultato!

PS: Il codice che ho postato era già bindato dentro $(document).ready... solo che non l'ho incollato

[Virus_101]

okok bene .

Devi sempre fare molta attenzione con i callbacks.
Se vuoi essere sicuro che una procedura inizi quando ne termina un'altra devi usare le funzioni di callback. EDIT( e tali procedure sono asincrone )

Purtroppo javascript e' molto ostico su queste cose .... dannati linguaggi funzionali

[AVRstudio]

Ok, sistemato e capito il concetto, ma non funziona comunque la seconda chiamata...
Mi viene da pensare che il problema sia dovuto al fatto che il pulsante (che fa riferimento comunque alla stessa istruzione che sul pulsante superiore funziona) sia nella parte che viene ricaricata dal metodo .load

....

[KillerWorm]

Mi viene da pensare che il problema sia dovuto al fatto che il pulsante (che fa riferimento comunque alla stessa istruzione che sul pulsante superiore funziona) sia nella parte che viene ricaricata dal metodo .load

Probabile.
A mio parere il problema è più che altro relativo all'applicazione dell'evento click.
Se non ho capito male tu stai creando al volo degli elementi con classe .btt_addtocart e dai per scontato che l'evento clic sia applicato anche ad essi ma il fatto che tu stia aggiornando una sola porzione della pagina non aggiorna in automatico anche l'applicazione di tale evento sugli elementi che vai a creare al volo anche se hanno la stessa classe .btt_addtocart.

Teoricamente dovresti riapplicare il click dopo che i nuovi elementi sono stati creati sulla pagina.
Potresti farlo manualmente sul callback del load oppure, se non sbaglio, dovresti risplvere utilizzando il metodo .on per delegare in modo dinamico un handler.

Una cosa del tipo:

$("#riepilogo_acquisto").on('click', '.btt_addtocart', function(){
// tutto il resto
})

Non l'ho mai provato ma, se non sbaglio, dovrebbe permettere di avere un aggiornamento del gestore di eventi anche per gli elementi creati successivamente. Tieni presente che è supportato da jQuery 1.7 in poi, per versioni precedenti devi vedere il metodo .delegate o .live.

[Virus_101]

AH mi era sfuggita questa parte... se ricrei gli elemnti devi binddare nuovamente l'evento onclick certamente !!

Puoi farlo con il metodo .live() oppure dopo aver innestato il nuovo elemento con una normalissima chiamata $(".mioelemento").bind("click" ,function(){ /*codice*/ })