11548 sujets

JavaScript, DOM et API Web HTML5

Bien le bonjour !

J'ai une page avec plusieurs liens, chacun affichant un formulaire qui va de pair avec une liste, comme suit ($i allant de 1 à 10 par exemple) :



<a class="commenter_wall" href="#" onclick="afficher_formulaire_et_liste(<?php echo $i; ?>)" >Commenter</a>

<form id="submit_under_wall<?php echo $i; ?>" >
        <label for="message_under_wall">Share your message on the Wall</label>
	<input type="text" id="message_under_wall"  />
	<button type="submit">Post to wall</button>
</form>
								
<ul id="under_wall<?php echo $i; ?>" class="wall" >
		<li class="under_wall"></li>
</ul> 


J'ai un script en AJAX qui ajoute dans une liste à l'id fixe chaque message entré dans un formulaire à l'id fixe lui aussi, par contre j'arrive pas à l'adapter quand les id sont variable comme au-dessus :

<script type="text/javascript">	
		$(document).ready(function(){
		$("form#submit_wall").submit(function() {

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


MAJ : voir mon second post il reste juste un bout d'AJAX qui pose problème Smiley cligne
Modifié par Tchernobyl (07 Aug 2011 - 21:00)
Hello,

Bon déjà ça, ça ne peut pas fonctionner, pour la simple et bonne raison que tu cherches un <ul> avec un id "#wall", alors que dans ton code html, ton <ul> porte une classe ".wall"

$("ul#wall").prepend("<li class=\"wall\">"+message_under_wall+"</li>");


Donc :

$("ul.wall").prepend("<li class='wall'>"+message_under_wall+"</li>");


Deuxièmement, c'est normal que les <li> (que tu insères dynamiquement) portent aussi la classe ".wall" ? Pourquoi pas hein, ça dépend du style que tu souhaites leur donner… Mais bon par souci de clarté j'évite de donner la même classe à deux éléments de types différents.
Salut ! J'ai résolu mon problème tout seul, j'ai réussi à obtenir l'id correspondant à un formulaire (et sa liste) en cliquant sur un bouton !

Je laisse ma solution comme aide aux futurs membres qui rencontreront le problème : Smiley smile
<script type="text/javascript">	
$(document).ready(function()
{	
	$(".commenter_message_wall").click(function(){

	var element = $(this);
	var id_cible = element.attr("id");

              // utilisation de id_cible

	return false;
	});
});
</script>

Modifié par Tchernobyl (07 Aug 2011 - 21:21)