Discussion :

[Anons]

J'utilise ce script : j'ai un formulaire dont le texte renseigné est récupéré pour l'afficher sans charger de page. Seulement il a l'air de pas si bien fonctionner mais je ne maitrise pas encore le jQuery ni Ajax, quelqu'un voit le problème ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form id="submit_wall" >
	<label for="message_wall">Share your message on the Wall</label>
	<input type="text" id="message_wall" />
	<input type="submit" value="Post to wall">
</form>
 
<ul id="wall"> </ul>
 
<script type="text/javascript">
	$(document).ready(function(){
	$("form#submit_wall").submit(function() {
 
	var message_wall = $('#message_wall').attr('value');
 
	$.ajax({
	type: "POST",
	url: "insert.php",
	data:"message_wall="+ message_wall,
	success: function(){
	$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
	$("ul#wall li:first").fadeIn();
	}
	});
	return false;
	});
	});
</script>

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// un ID doit être unique, c'est donc une référence autosuffisante
$("#submit_wall").submit(function(){
 
	// méthode val() : http://api.jquery.com/val/
	var messageWall = $('#message_wall').val();
 
	// FAQ jQuery : http://javascript.developpez.com/faq/jquery/?page=Ajax#AjaxRequest
	$.post("insert.php", { "message_wall" : messageWall }, function(data, textStatus, jqXHR) {
		// console.log(data, textStatus, jqXHR);
		// succès de la transaction, traité le contenu de data
 
		// attention à l'imbrication des quotes et double quotes
		$("#wall").prepend('<li style="display: none;">' + messageWall + '</li>');
 
		$("#wall li:first").fadeIn();
 
	}).error(function(jqXHR, textStatus, errorThrown){
		// console.log(jqXHR, textStatus, errorThrown);
		// échec de la transaction, gèrer la catastrophe
 
	});
 
	// false : le formulaire n'est pas soumis
	return false;
});