Discussion :

[cheboy]

Bonjour à tous.

J'ai un souci. Je voudrais savoir comment rafraîchir automatiquement une Page Web en Jquery ou Ajax ou JS de façon à ce que le rafraîchissement se produise juste après l'affichages des Messages à Succès: "Vos informations ont bien été mises à jours." et "Votre carte a bien été enregistré.".

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
<script>
	$(document).ready(function(){
 
		$("#number").on("focusout",function(){
			var tmp = $("#card_form").attr("action");
			var url = tmp.replace("cardadded", "validatenum");
 
			$.post(url,{number : $(this).val()}).always(function(data){
				if(data.reponse == "ok"){
					$("#errorCls").empty();
				} else {
					$("#errorCls").text(data.msg).css("color", "red").fadeIn(800);
				}
			});
		});
 
		//Traitement du formulaire d'inscription
		$("#submit").on("click",function(){
			var number = $("#number").val();
			var name = $("#name").val();
			var expiry = $("#expiry").val();
			var cvc = $("#cvc").val();
 
			if(number == "" || name == "" || expiry == "" || cvc == "" ){
				$("#errorCls").text("All fields are required.").css("color", "red").fadeIn(800);
			} else {	
 
				var obj = new Object();
				obj.number = number;
				obj.name = name;
				obj.expiry = expiry;
				obj.cvc = cvc;
				var url = $("#card_form").attr("action");
 
				$.post(url,obj).always(function(data){
					if(data.reponse == "ok"){
						$("#errorCls").empty();
						$("#card_list").empty().html(data.code);
						$("#submit").text("Edit Card");
						if(data.operation == "edit"){
							$("#errorCls").text("Vos informations ont bien été mises à jours.").css("color", "green").fadeIn(800);
						} else if(data.operation == "add"){
							$("#errorCls").text("Votre carte a bien été enregistré.").css("color", "green").fadeIn(800);
						}
					} else {
						$("#errorCls").text(data.msg).css("color", "red").fadeIn(800);
					}
				});
 
			}
		});
 
});
</script>

Comment donc rafraichir automatiquement la Page une fois que la validation est réussie à travers l'affichage des 2 Messages à succès "Vos informations ont bien été mises à jours." et "Votre carte a bien été enregistré." ???

Merci de m'aider s'il vous plaît.

[psychadelic]

pourquoi n'utilise tu pas la méthode .done() dans tes appels Ajax par $.post() ..... ??
c'est fait pour ça...

[cheboy]

Déjà merci pour votre réponse mais je me demande exactement comment procéder et à quelle partie de mon Code puis-je appliquer cette Fonction .done() ???

Je rappelle que mon but est d'afficher dans un premier temps les messages à succès et rafraîchir envion 2 secondes après l'affichage de ces messages la même Page.

Merci de m'éclaircir svp

[psychadelic]

Rafraîchir le message après 2 secondes, ça veut dire l'effacer non ?
il y a la commande delay() en jquery.

mais pour afficher le message de réponse de ton appel ajax ($.post ... ), il faut utiliser la commande done(). quand tout ce passe bien, .fail() si un probleme ajax survient, et .always() pour récupérer la main après l'un des 2 cas précédents.

la doc n'est pas vraiment alambiquée pour l'expliquer...
http://api.jquery.com/jQuery.post/#jqxhr-object

[cheboy]

Bonjour et encore merci.

Vous savez, que je ne comprends pas et je suis encore débutant en JS. Ce ne serait pas mieux si vous me montrer tout à partir des exemples de code ???
SVP

[psychadelic]

Peut être ainsi ?

Code JavaScript :

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
  $.post( url,{number : $(this).val()})
  .done(function(response) {
    $('#Zmgs')
    .html( "Vos informations ont bien été mises à jours.")
    .delay( 2000 )
    .fadeOut( 400 )
    .html( "Votre carte a bien été enregistré.")
    .delay( 2000 )
    .fadeOut( 400 );
  })
  .fail(function(xhr, textStatus, errorThrown ) {
    $('#Zmgs')
    .html( "Error ! => "+ xhr.responseText)
    .delay( 2000 )
    .fadeOut( 400 );
  });

mais comme de toutes façon tes indication restent très floues, cela rests un jeu de devinettes