11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème pour compter mes éléments après un petit coup d'Ajax

Bonjour à tous !

Je rencontre un drôle de problème avec Ajax.
Dans un tableau, je fais le total de tous les <span> de classe "price" :

$(selector + " .price").each( function () {
        total = total + parseFloat( $(this).html() );
});

Selector étant l'ID de mon tableau, vu que j'en ai plusieurs ayant la même structure. Pas de soucis, ça roule.

Le tableau, lui, ressemble plus ou moins à ça :

<table id="selector">
        <tr>
                <td><span class="price">19 500.00</span> €</td>
        </tr>
</table>


Je rajoute un <tr> après un coup d'Ajax et là, c'est le drame. Au lieu de me compter 2 classes "price", il m'en compte 3 ! Si j'en ai 3 à la base puis que j'en rajoute un suite à mon coup d'Ajax, il en comptera 7 ! Smiley sweatdrop Vous imaginez bien que mes totaux sont complètement biaisés
Voici comment je compte mes "price" : 
 console.log( $(selector + " .price").length )


Mon Ajax :

$.ajax({
        url: "ceciestunsecret",
        type: 'POST',
        data: form,
	success: function(data) {
	       $('#complete tbody').append(data);
	 },
	 processData: false,
	 contentType: false,
	 cache: false
}).done( function(){
	// des trucs
});


Après un 
 console.log( $(selector + " .price") )
voilà ce que Firebug m'indique une fois que j'ai fait ma petite tambouille en ajax ceci
upload/56615-Capturedu2.png
A la base, mon tableau avait 9 span.price. Ensuite, je me retrouve avec 19 span.price. J'ai lu ici et là que les résultats grisés étaient en cache. Seulement, j'ai bien mis "cache: false" dans mon appel Ajax. A première vue, les éléments grisés ont tous la valeur de mon retour Ajax. En gros, c'est celui que j'ajoute qui est compté 1 fois pour chaque span.price + 1 autre fois mais celle-ci, c'est normal.

Dans la structure HTML de ma page, tout va bien, je n'ai pas de span.price caché ou je-ne-sais-quelle autre bizarrerie.

Désolé pour le pave mais si vous avez une idée, je suis preneur !

Bonne fin de journée à vous !
Modifié par simon_jaa (04 Nov 2014 - 17:03)
Salut !

Merci pour ta piste mais je réinitialise bien mon total, je fait appel à la fonction suivante :

function total(selector) {
	var total = 0;

        // c'est ce console.log qui m'affiche, entre autre, les span.price grisés
	console.log( $(selector + " .price") );

	$(selector + " .price").each( function () {
		total = total + parseFloat( $(this).html() );
	});
	return total;
}


Vraiment, là, je colle.
Okey, j'ai enfin trouvé !

Il semblerait que le problème venait de là, dans ma requête Ajax :
$('#complete tbody').append(data);

Je l'ai résolu en donnant un id (complete-tbody) à mon <tbody> et en changeant cela :
$('#complete-tbody').append(data);


En fait, la première version ajoutait un data caché à tous les premiers <tr> (le tableau étant plus complexe que celui que je vous ai donné). Ils étaient bien dissimulés, je ne les avais donc pas trouvés ces sagouins.
Par contre, je ne sais pas pourquoi la version initiale me faisait ce schmilblick.

Voilà, je vous remercie d'avoir suivi mes péripéties inintéressantes !
Sujet clos
Aller à