[AJAX] Afficher une alerte dans la page appelante au retour d'un appel AJAX ?

Version imprimable

17/07/2011, 18h57
madina

[AJAX] Afficher une alerte dans la page appelante au retour d'un appel AJAX ?

Bonjour,

dans mon formulaire de saisie, je veux faire un appel ajax à la place de la soumission par "action" de la balise <form>.
Pour cela, j'ai fais un événement onclick() sur le bouton "Valider" qui appelle ma fonction d'ajax.

au retour de l'appel, je fais un alert() mais il m'affiche l'alerte dans la page php qui était apellé par ajax or je veux que l'alerte soit dans la page appelante(de saisie).

Le but c'est de dire au user si une insertion ou un champ doit être saisie( ce que je fais dans la page php, qui est dans le "open" de l'objet AJAX.

les messages sont fait par "echo" dans la page php et je veux les faire par "alert" au retour dans ma page de saisie.

Je pensais à un "innerHTML" mais je sais pas s'il est possible de l'appliquer sur une alerte au préalable déclaré.

Comment je dois faire pour que l'alerte reste dans la page appelante ?

Est-ce que l'appel de la fonction d'ajax doit se faire sur un événement onclick() du bouton de soumission "valider"(car y'a toujours aussi action="fichierPHP" dans la balise <form>.) ?

Merci de vos aides.

Cordialement

Pour plus de précisions je vous livre mon code pour cela :

Fonction qui gére le retout ajax

Code:

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
<script language="JavaScript">
 
function retour_insertion()
{
  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
  else var XhrObj = new XMLHttpRequest(); //Mozilla
 
  //content = document.getElementById("pseudo_check"); 	//zone d'affichage
 
  XhrObj.open("POST", "valider_operations.php");
 
  //Ok pour la page cible
  XhrObj.onreadystatechange = function()
  {
    if (XhrObj.readyState == 4 && XhrObj.status == 200) {
            alert(XhrObj.responseText);
      } 
    }
 
// Je recupére les valeurs des différents champs présents dans le formulaire 
 
		valide = document.getElementById('valide');
		sel = document.getElementById('Num_compte');
		Num_compte =sel.options[sel.selectedIndex].value;
		date_realise=document.getElementById('date_realise');
		reference=document.getElementById('reference');
		montant_realise=document.getElementById('montant_realise');
		sel_cr = document.getElementById('code_cr');
		code_cr =sel_cr.options[sel.selectedIndex].value;
		fournisseur=document.getElementById('fournisseur');
 
 
 
 
  XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
// Envoi les différentes valeurs présentes dans le formulaire de saisie
  XhrObj.send("code_cr="+codecr,"valide="+valide,"Num_compte="+Num_compte,
  "date_realise="+date_realise,"montant_realise="+montant_realise,"reference="+reference,"fournisseur="+fournisseur);
 
}
 
</script>

Code de mon fichier php ici valider_operations.php :

Code:

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
67
68
69
70
71
72
73
74
75
<?php
 
if (isset($_POST['valide'])) 
{
if  ($_POST['Num_compte']!='-1' )
{
  $trouve_moi  = '/';
  $position = strpos($_POST['date_realise'], $trouve_moi);
if ($position == true) {
 
if ( $_POST['montant_realise']!=null )  
{
if (isset($_POST['code_cr']) and $_POST['code_cr']!='-1')
{
 
$_montant_realise=$_POST['montant_realise'];
$_date_realise=$_POST['date_realise'];
list($jour,$mois,$annee) = explode('/',$_date_realise);
$date_effect = $annee.'-'.$mois.'-'.$jour;
$_num_compte=$_POST['Num_compte'];
$_code_cr=$_POST['code_cr'];
$_reference=$_POST['reference'];
$_fournisseur=$_POST['fournisseur'];
 
include('fonctions.php');
                    connect();
 
$sql_insert='insert into 
operations(montant_realise,date_realise,Num_compte,Code_cr,reference,fournisseur)
                 values('.$_montant_realise.',"'.$date_effect.'","'.$_num_compte.'"
                 ,"'.$_code_cr.'","'.$_reference.'","'.$_fournisseur.'")';
                 
$result_insert=mysql_query($sql_insert) or die ('Erreur SQL !, vos informations n\'ont pas pu être enregistré dans la base de donnée'.$sql_insert.'<br />'.mysql_error());
                 
                 
                 
                 
                if($result_insert)
  {
    echo 'L\'operation a été bien enregistrée' ;
  }
                 
 
}
 
else
{
echo 'Vous avez oublié de saisir le Code CR';
 
}
}
 
else
{
echo 'Vous avez oublié de saisir le Montant';
 
}
}
 
else
{
echo 'Vous avez oublié de saisir la date';
 
}
}
 
else
{
 echo 'Vous avez oublié de saisir le Numéro de Compte';
 
 }
 
 }
 
?>

ma page de saisie :

Code:

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
<form name="test" action="valider_operations.php" method="post" >
   <fieldset><legend>OPERATION DE CHARGES</legend>
 
   	<table border="0" align="center">
 
--------les champs de siaise-----------------
 
					<tr align="center">
					<th>Date_Operation</th>
					<td align="center">
					<input type="text" id="date_realise" name="date_realise"/>
 
 </td>
										</tr>
 
 
									<tr align="center">
										<th>Montant Operation</th>
			<td align="center"><input class="numeric" type="text" name="montant_realise" id="montant_realise" /></td>
					</tr>
<tr>
 
		<td colspan="2" align="center"><input type="submit" name="valide" value="Enregistrer" onclick()="retour_insertion();"></td>
 
 
					</tr>
					</table>
					</fieldset>
 
 
		</form>

Voilà au lieu d'avoir une alerte en restant dans la page de saise, ça me redirige vers la page php avec les "echo" affichés.

J'appelle la fonction ajax à la suite de l'evenement "onclick()" sur le bouton "Enregistrer" du formulaire.

Merci de vos aides là-dessus !

Cordialement

18/07/2011, 07h56
andry.aime

Bonjour
:sleep:

Citation:

XhrObj.send("code_cr="+codecr,"valide="+valide,"Num_compte="+Num_compte,

Code:

XhrObj.send("code_cr="+codecr+"&valide="+valide+"&Num_compte="+Num_compte....

A+.

Bonjour,

En fait j'ai corrigé la fonction d'appel mais ça m'affiche toujours rien.
Je sais pas ou se situe encore le probléme .
voici le code modifié :

Code:

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
<script language="JavaScript">
 
function retour_insertion()
{
  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
  else var XhrObj = new XMLHttpRequest(); //Mozilla
 
  content = document.getElementById("pseudo_check"); 	//zone d'affichage
 
  XhrObj.open("POST","valider_operations.php",true);
    XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  //Ok pour la page cible
  XhrObj.onreadystatechange = function()
  {
    if (XhrObj.readyState == 4 && (XhrObj.status == 200 || xhr.status == 0)) {
             alert(XhrObj.responseText);
      } 
    }
 
		valider = document.getElementById('valider');
		sel = document.getElementById('Num_compte');
		Num_compte =sel.options[sel.selectedIndex].value;
		date_realise=document.getElementById('date_realise');
		reference=document.getElementById('reference');
		montant_realise=document.getElementById('montant_realise');
		sel_cr = document.getElementById('code_cr');
		code_cr =sel_cr.options[sel.selectedIndex].value;
		fournisseur=document.getElementById('fournisseur');
 
 
 
 
 XhrObj.send("code_cr="+codecr+"&valider="+valider+"&Num_compte="+Num_compte+"&montant_realise="+montant_realise+"&date_realise="+date_realise+"&reference="+reference+"&fournisseur="+fournisseur);
 
}
 
</script>

Code:

1
2
3
4
<form>
<input type="button" name="valider" value="valider" onclick=" retour_insertion()"; />
 
</form>

quand je clique sur le bouton j'ai pas encore d'alerte.
j'ai créé une bouton normale aulieu d'un boutonn "submitt" .
Si j'ai la réponse, il me faudra adapter ça au bouton "submitt".

Merci de votre aide !

18/07/2011, 12h35
andry.aime
1- Je ne sait pas comment tu travailles mais dans ce post, tu as une charmante fonction qui instancie une variable xhr, mais dans cette discussion, ça me fait :vomi:.

2- tu dois récupérer les valeurs avec l'attribut value pour les input.
Code:

1 2 3 4 valider = document.getElementById('valider').value; ... date_realise=document.getElementById('date_realise').value; ....
A+.

Merci bon ça marche. c'est vrai que j'aurai du utiliser l'instancitaion de l'objet faite en haut avec un

Code:

var xhr = getXhr();

avec ce code :

Code:

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
function inserer_compte()
{
  //XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
  var xhr = getXhr();
 
  content = document.getElementById('pseudo_check'); 	//zone d'affichage
 
  xhr.open("POST","valider_operations.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  //Ok pour la page cible
  xhr.onreadystatechange = function()
  {
    if (xhr.readyState == 4 && xhr.status == 200) {
             alert(xhr.responseText);
      } 
    }
 
 
		sel = document.getElementById('Num_compte');
		Num_compte =sel.options[sel.selectedIndex].value;
		date_realise=document.getElementById('date_realise').value;
		reference=document.getElementById('reference').value;
		montant_realise=document.getElementById('montant_realise').value;
		sel_cr = document.getElementById('code_cr');
		code_cr =sel_cr.options[sel.selectedIndex].value;
		fournisseur=document.getElementById('fournisseur').value;
 
 
 
 
 xhr.send("code_cr="+code_cr+"&Num_compte="+Num_compte+"&montant_realise="+montant_realise+"&date_realise="+date_realise+"&reference="+reference+"&fournisseur="+fournisseur);
 
}

Maintenant mon problème est que j'ai une alerte avec une bouton normale ( déclaré avec type="button") mais pas avec une bouton déclaré avec type="submitt".

or si je fais :

Code:

1
2
3
4
<form name="test" action="valider_operations.php"  method="post" >
<input type="submit" name="valide" value="Enregistrer"
 onclick=" inserer_compte()";/>
</form>

Il me redirige vers la page "valider_operations.php".

Comment lui faire comprendre que même en cliquant sur le bouton "submitt" du formulaire, je veux rester dans la même page?

Cordialement.

18/07/2011, 14h01
andry.aime
Pourquoi utiliser un bouton submit si tu ne veux qu’appeler une fonction javascript :koi:

Sinon
Code:

1 2 <input type="submit" name="valide" value="Enregistrer" onclick=" inserer_compte(); return false;"/>
18/07/2011, 14h12
madina

Merci ça marche parfaitement.

mais on peut pas enlever le message se trouvant au dessous du message retourné : "Empêcher cette page d'ouvrir des dialogues supplémentaires" ?
18/07/2011, 14h24
andry.aime

Citation:

Envoyé par madina

mais on peut pas enlever le message se trouvant au dessous du message retourné : "Empêcher cette page d'ouvrir des dialogues supplémentaires" ?

ça c'est la configuration de ton navigateur, tu ne pourras pas l’empêcher avec javascript.

A+.
18/07/2011, 14h41
madina

Ah ok je vois.

En fait dans les messages retournés par l’appel ajax , je veux si le message correspond à :

'L\'operation a été bien enregistrée' : afficher une alerte avec un message additionnel Voulez-vous saisir un nouveau enregistrement ? et deux boutons Oui et Non.

pour en cas ou l'utilisateur appuie sur le bouton Oui, effacer tous les champs du formulaire.

Comment je peux faire ?

je pense à comparer directement

Code:

xhr.responseText

avec les différents message et au cas ou faire une alerte à deux ou un bouton mais je doute que c'est pas très propre.

s'il y' a une suggestion pour réaliser cela ?

Cordialement.
18/07/2011, 14h54
andry.aime
Je ne pense pas qu'un alert suivie d'une boite de confirmation soit très esthétique qu'un simple affichage d'un div avec le mot.
Pour la boite de confirmation
Code:

1 2 3 if(confirm("Voulez-vous saisir un nouveau enregistrement ?")){ document.getElementById("idDuFormulaire").reset(); }
A+.
18/07/2011, 15h03
madina

Ok je vois mais le confirm(), je dois l'afficher que si la chaine retournée est : L'enregistrement a été bien effectué.

En fait je dois vérifier si la chaine retournée est : L'enregistrement a été bien effectué. Afficher :
L'enregistrement a été bien effectué.
Voulez-vous ajouter un enregistrement ?

dans les autres cas, je mets une simple alerte.

Donc je dois comparer la réponse texte retournée avec les différents différentes textes qui apparaissent des les "echo" de ma page php.

Y'a t-il une fonction permettant de le faire ?
18/07/2011, 15h15
andry.aime
Code:

1 2 3 4 5 if(xhr.responseText=="L'enregistrement a été bien effectué."){ if(confirm("...")){ } }
Mais n'utilise pas une longue phrase mais un simple mot comme "OK" ou "KO" suffi.
Sinon, je ne comprend pas ce que tu veux.

A+.

Merci je vois bien.

En fait j'ai mis comme chaine retournée "OK" s'il y'a bien eu insertion

et dans ma fonction j'ai mis

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
xhr.onreadystatechange = function()
  {
    if (xhr.readyState == 4 (&& xhr.status == 200 ) {
 
		leselect = xhr.responseText;
	            //content.innerHTML=xhr.responseText;
				if (leselect == 'OK'){
 
                 //if (confirm("L'operation a ete bien enregister")){
				 //document.getElementById('Num_compte').reset();
				 //document.getElementById('montant_realise').reset();
				alert("L'operation areussi");
				 }
 
 
 
 
	  else
	  {
	  alert(leselect);
	  }
    }
	}

Mais ça fonctione plus, ça me redirige vers la page php.

Quel est le problème à ce niveau ?

18/07/2011, 23h54
madina

ça marche