Bonjour à tous,

Je viens vous exposer mon problème car je me retrouve bloqué.

Voilà en faite je suis entrain de faire une shoutbox en ajax pour mon site, ma shoutbox fonctionne très bien, mais seulement j'aimerais y ajouter une fonction d'auto-rafraichissement l'hors de l'envoie d'un message d'un utilisateur.

Voici mon code :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
 
$(document).ready(function(){
	//global vars
	var inputUser = $("#nick");
	var inputMessage = $("#message");
	var inputHumain = $("#humain");
	var loading = $("#loading");
	var messageList = $(".content > ul");
 
 
 
	//functions
	function updateShoutbox(){
		//just for the fade effect
		messageList.hide();
		loading.fadeIn();
		//send the post to shoutbox.php
		$.ajax({
			type: "POST", url: "modules/Shoutbox/shoutbox.php", data: "action=update",
			complete: function(data){
				loading.fadeOut();
				messageList.html(data.responseText);
				messageList.fadeIn(2000);
			}
		});
	}
	//check if all fields are filled
	function checkForm(){
		if(inputUser.attr("value") && inputMessage.attr("value") && inputHumain.attr("value"))
			return true;
		else
			return false;
	}
 
	//Load for the first time the shoutbox data
	updateShoutbox();
 
	//on submit event
	$("#form_shout").submit(function(){
		if(checkForm()){
			var nick = inputUser.attr("value");
			var message = inputMessage.attr("value");
			var humain = inputHumain.attr("value");
			//we deactivate submit button while sending
			$("#send_shout").attr({ disabled:true, value:"Envoie" });
			$("#send_shout").blur();
			//send the post to shoutbox.php
			$.ajax({
				type: "POST", url: "modules/Shoutbox/shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message + "&humain=" + humain,
				complete: function(data){
					messageList.html(data.responseText);
					updateShoutbox();
					//reactivate the send button
					$("#send_shout").attr({ disabled:false, value:"Envoyer" });
					$("#message").attr({ disabled:false, value:"Votre message ..." });
				}
			 });
		}
		else alert("Remplissez s'il vous plaît tous les champs !");
		//we prevent the refresh of the page after submitting the form
		return false;
	});
 
 
});

Mon contenu s'affiche dans une balise <ul>, dont voici le code brut :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
 
<div id="container_shout">
    <div class="content">
        <div id="loading"><img src="modules/Shoutbox/images/loading.gif" alt="Loading..." /></div>
        <ul>
        AFFICHAGE DES MESSAGES
        </ul>
     </div>
</div>

Es-ce que une âme charitable saurais me donner un petit coup de main ?