11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un petit script qui affiche un formulaire quand je clique sur un lien, et qui affiche directement dans la page le message soumis via ce formulaire grâce à AJAX.

Quand je clique une fois sur le lien, le formulaire s'affiche et quand je fais un submit le message s'affiche bien, pas de problème.

Par contre quand je clique plusieurs fois sur le lien puis que je fais un submit de mon message, il s'affiche autant de fois que j'ai cliqué sur le lien depuis que je suis sur la page ! Je comprends pas pourquoi ça fait ça ! o_O

L'idéal serait de réinitialiser la fonction click quand on clique plus d'une fois dessus, une petite idée ? Smiley smile

<script type="text/javascript">	

$(document).ready(function(){

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

		var element = $(this);
		var id_under_wall = element.attr("id");
			
		// On fait apparaître le formulaire 
		$("form#submit_under_wall"+id_under_wall).show(300);	
		
		// Traitement du formulaire
		$("form#submit_under_wall"+id_under_wall).submit(function() {

			var message_under_wall = $('#message_under_wall'+id_under_wall).attr('value');
		
			$.ajax({
				type: "POST",
				url: "mon_url",
				data:"message_under_wall="+ message_under_wall,
				success: function(){
						$("ul#under_wall"+id_under_wall).prepend("<li>"+message_under_wall+"</li>");
						$("ul#under_wall"+id_under_wall+" li:first").fadeIn();
					}
			
			});
				
		return false;	
		});
	
	return false;
	});
});	
</script>

Modifié par Tchernobyl (09 Aug 2011 - 16:10)
un compteur ? si il est égal à 1 tu rentres pas dans l'appel et tu le réinitialise au bout de 3 secondes ?
Yop,

C'est exactement ce que j'ai fait (et je suis sur de mon système de compteur avec nb_click représentant le nombre de click sur le lien) mais curieusement ça continue de me poster autant de message que de fois où j'ai clicker sur le lien commenter, le AJAX doit être gardé en cache ou quelque chose comme ça... mais je connais pas assez l'AJAX pour tabler sur son comportement.

<script type="text/javascript">	

$(document).ready(function(){

var nb_click=0;

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

               nb_click++;

		var element = $(this);
		var id_under_wall = element.attr("id");
			
		// On fait apparaître le formulaire 
		$("form#submit_under_wall"+id_under_wall).show(300);

         if(nb_click==1){	
		
		// Traitement du formulaire
		$("form#submit_under_wall"+id_under_wall).submit(function() {

			var message_under_wall = $('#message_under_wall'+id_under_wall).attr('value');
		
			$.ajax({
				type: "POST",
				url: "mon_url",
				data:"message_under_wall="+ message_under_wall,
				success: function(){
						$("ul#under_wall"+id_under_wall).prepend("<li>"+message_under_wall+"</li>");
						$("ul#under_wall"+id_under_wall+" li:first").fadeIn();
					}
			
			});
				
		return false;	
		});

        nb_click==0;

        }else{ nb_click==0; }
	
	return false;
	});
});	
</script>

Modifié par Tchernobyl (09 Aug 2011 - 13:59)
Déjà, moi je ne comprends pas trop cette ligne :

$("form#submit_under_wall"+id_under_wall).submit(function() { 


Le .submit permet d'attacher une fonction lorsque qu'un Form est envoyé. Ton bouton où tu cliques est un submit ?

Sinon, tu devrais regarder du côté de bind et unbind, et comprendre qu'un .click attache une fonction à chaque fois.
Salut ! Dans le 1er post, je précise que le lien sur lequel je clique affiche un formulaire, qui une fois soumis, affiche directement dans la page le message (comme élément d'une liste, c'est le système du wall de facebook).

Les bind/unbind m'ont été très utiles, merci beaucoup Smiley cligne
Modifié par Tchernobyl (09 Aug 2011 - 16:10)