[AJAX] Comment modifier un formulaire en Ajax ?

Version imprimable

11/08/2010, 16h07
l.laurent60

[AJAX] Comment modifier un formulaire en Ajax ?

Bonjours à tous,

J'ai un formulaire avec deux listes déroulantes et un checkbox en dessous avec beaucoup d'éléments.
Mon souhait serais de pouvoir filtrer les éléments de la checkbox progressivement en fonction des choix fait dans les listes et cela sans recharger la page car je perdrai des éléments.

Faut-il mettre la partie checkbox dans un fichier PHP et le faire en Ajax ?
Si oui comment et sinon comment...:cry:

Merci par avance pour votre aide.
11/08/2010, 17h04
llaffont

Tu as plusieurs solution.

Je te propose celle là.

Dans un premier temps tu génère un script PHP qui te retourne un div contenant tous tes checkbox sans exception quand aucun paramètre lui est transmis.

Ensuite tu gères via Javascript les interactions avec tes listes qui en fonction des options choisi généreront une nouvelle palette de Checkbox suite à une requête ajax sur ton script PHP.

Regarde dans ma signature j'ai un exemple de liste Select Ajax.
11/08/2010, 17h25
l.laurent60

Je te remercie pour ton aide, c'est très sympa, je vais essayer de prendre modèle sur ton exemple.

Loic merci pour le code,

Je commence a l'installer et premier bug le contenu de la div message ne s'efface pas ?

Code:

1
2
3
4
5
6
 
 
<body>
     <div id="MessageJS"><span>Ce navigateur ne prend ...</span>/div>     
     <div id="page">
      ...

L'inclusion des fichiers est bon, j'ai vérifié avec Firebug.

Code:

1
2
3
4
5
6
 
<script language="javascript" src="js/jquery-1.4.2.min.js"           ></script>
<script language="javascript" src="js/ui.datepicker-fr.js"           ></script> 
<script language="javascript" src="js/jquery-ui-1.8.2.custom.min.js" ></script>
<script language="javascript" src="js/jquery.autocomplete.js"        ></script>
<script language="javascript" src="js/MesAjaxFonction.js"        ></script>

Code:

1
2
3
4
5
6
7
8
 
$(function(){
	$("#MessageJS").empty();  /          //Efface le message qui affiche que le navigateur ne prends pas en charge JAVASCRIPT.
	$("#Page").show();                   // Si le JavaScript Fonction on affiche la page.	
	$("select").change(function () {     //Action lors d'une selection sur les boites dates
		ChangeOption(this);
	});
});

Pourquoi cela ne marche pas ?
Je ne vois pas d'appel de la fonction ? Un body onload ou autre ?
Est ce normale ?

Merci pas avance.

12/08/2010, 10h38
llaffont

Cela ne devrait se produire que si ton navigateur ne gère pas le JS:calim2:
12/08/2010, 10h45
l.laurent60

Hélas ce n'est pas ca, car dans ma page j'utilise déjà du JS.
Donc qu'est ce qui peut posé problème ?
Je ne pense pas avoir une erreur dans mon code...
12/08/2010, 10h58
llaffont

le $(function(){}) de JQuery revient à faire le Onload de JavaScript.

Je ne vois pas la raison de cet échec. Les appels des scripts son bien dans le Head ?

Si tu as "customisé" ton Jquery UI comment se fait-il que le date "Datepicker" ainsi que l'Autocomplete ne sont pas déjà inclus dans ton Custom ?

La console FIREBUG ne t'indique rien ? Aucun conflit ou truc du genre...
12/08/2010, 11h46
l.laurent60

Je viens de trouver j'avais un / qui se promener dans le code, excuse moi pour le dérangement inutile, je vais pouvoir avancer.
Merci Loic

J'avance mes cela n'est pas concluant
voici le code html

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
 
<form id="formulaire" name="formulaire" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onsubmit="return ctrlForm(this.form)">
	 	   <table>
	 	   	  <tr>
	 	   	  	<td class="titre" >Type de c</td>
	 	   	  	<td>
	 	   	  		<div id="select_1">
  	   	  		  <SELECT name="TypeCompetition" id="TypeCompetition" class="Groupe">   
                     <OPTION VALUE="">Choisir un type</OPTION>
                     <?php   
                        while( list( $NtypeCompetition, $typeCompetition ) = mysql_fetch_row($competition)) {
                           if ($typeCompetition) {
                                 echo '<OPTION VALUE="'.$NtypeCompetition.'">'.$typeCompetition.'</OPTION>';
                           } 
                        }
                     ?>		
                </SELECT>
              </div>
	 	   	    </td>
	 	   	  </tr>
	 	   	  <?php 
	 	   	  if($_SESSION['fede']=='cnosf') {  
	 	   	  ?>	
		 	   	  <tr>
		 	   	  	<td>Nom </td>
		 	   	  	  <td>
	  		 	   	  	<div id="select_2">
	                   <SELECT name="TypeFederation" id="TypeFederation" class="SousGroupe"  onChange="changeSport(this.form)"> 
	                       <OPTION VALUE="">Choisir une valeur</OPTION>
	                       <?php
	                          while( list( $typefederation, $NInstitution, $SiteInternet ) = mysql_fetch_row($federation )) {
	                             if ($typefederation) {
	                                 echo '<OPTION VALUE="'.$typefederation.'">'.$typefederation.'</OPTION>';
	                             } 
	                          }
	                         ?>
	                   </SELECT> 
	                </div   
		 	   	    </td>
		 	   	  <?php
		 	   	  }
		 	   	  ?>  
	 	   	  </tr>
	 	   	  <tr>
	 	   	  	<td valign="top">Sports au programme </td>
	 	   	  	  <div id="resultat">
				 </div>
	 	   	  </tr>

12/08/2010, 14h58
llaffont

Là tu obtiens une page avec 2 selects, Type de competition et Nom, remplient via les données en base.

Kel est ton problème ? Car dans le bout de code que tu nous montre il n'y a rien de particulier. pas d'Ajax, pas JavaScript 8O

Désolé le code précédent est pourri, un clic trop rapide.
J'avance mais cela n'est pas concluant

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
 
<tr>
   <td class="titre" >Type de compétition </td>
   <td>
       <div id="select_1">
     	  <SELECT name="TypeC" id="TypeC" class="Groupe">   
                <OPTION VALUE="">Choisir un type </OPTION>
                     <?php   
                        while( list( $NtypeC, $typeC ) = mysql_fetch_row($comp) {
                           if ($typeC) {
                                 echo '<OPTION VALUE="'.$NtypeC.'">'.$typeCompetition.'</OPTION>';
                           } 
                        }
                     ?>		
                </SELECT>
              </div>
         </td>
  </tr>
  <tr>
     <td>Nom </td>
      <td>
	 <div id="select_2">
	     <SELECT name="TypeF" id="TypeF" class="SousGroupe"  onChange="changeSport(this.form)"> 
	         <OPTION VALUE="">Choisir</OPTION>
	              <?php
	                  while( list( $typef, $NIn) = mysql_fetch_row($fed)) {
	                      if ($typef) {
	                          echo '<OPTION VALUE="'.$typef.'">'.$typef.'</OPTION>';
	                             } 
	                          }
	                         ?>
	                   </SELECT> 
	          </div   
	    </td></tr>

	 <tr>
	     <td valign="top">Sp</td>
	     <div id="resultat">
	      </div>
	 </tr>

le code JS

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
 
 
$(function(){
	$("#MessageJS").empty();             //Efface le message qui affiche que le navigateur ne prends pas en charge JAVASCRIPT.
	$("#Page").show();                   // Si le JavaScript Fonction on affiche la page.	
	$("select").change(function () {     //Action lors d'une selection sur les boites dates
		ChangeOption(this);
	});
});
 
function ChangeOption(Balise){
var OptionChoisi= $(Balise).val(),                            // On récupère la valeur de l'option
	idBalise = $(Balise).attr("class"),                         // on récupère le nom de la class affecté au SELECT pour la suite de l'inter-action
	parametres = 'actionPOST=Go&IdSelectParent='+OptionChoisi,  //déclare les parametres pour la fonction AJAX. 
	url = './RetourPHP.php';                                    // L'URL du Script fournissant le retour.
 
 
if (OptionChoisi != 0){ 
	                                                            // Je ne traite pas le ELSE à vous d'adapter en fonction de vos besoins.
$.ajax({
		type: "POST",                                             // Requete POST
		url: url, 
		dataType: "html",                                         // Format du retour de l'url
		success : AfficheSuccess,                                 // Si tout marche bien
		data: parametres, 
		error: AfficheErreur                                      // Si on se plante ;o)
	})	
}
//Afin de pouvoir exploiter les variables de l'objet déclencheur nous déclarons la function de succès à l'interrieur de la fonction d'événement.
function AfficheSuccess(retourSuccess){
	switch (idBalise) {	                                        // on change la façon de réagir en fonction de l'élément déclencheur.
 
		case 'Groupe' :
			$('#resultat').empty();
			$('select.SousGroupe').empty();
			$('select.SousSousGroupe').empty();
			$('select.SousGroupe').append( retourSuccess );
		break;
 
		case 'SousGroupe' :
			$('#resultat').empty();
			$('#resultat').append( $("select.Groupe").val()+'  '+ $("select.SousGroupe").val()+'  );
		break;
 
	}
}
}
 
function AfficheErreur(retourErreur){
	 $('#MessageJS').append( retourErreur );
}

le code php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
if(isSet($_REQUEST['actionPOST'])){
 
  retourSelectFormaté();
}
 
function retourSelectFormaté(){
  include "function.php";
  $IdSelectParent = "NType".$_POST['IdSelectParent'];
 	 $DBA = new DB('BASE');
         $sps = $DBA->Query("SELECT Sp FROM PN WHERE".$IdSelectParent."='ok' ); 
	while( list( $sp ) = mysql_fetch_row ($sps) ) {
	   echo '<td class="sport"> 
	  <INPUT TYPE=CHECKBOX value="'.$sp.'" NAME="'.$sp.'">'.$sp.'<BR/> 
		         </td>';   
	}; 
}

Le principe étant de venir mettre les résultats ( une checkbox ) dans cette div : <div
id="resultat"><div>
en fonction des renseignement des selects

Mais il me sort des trucs de ouffe, des CSS d'une autre page, etc ...
je ne comprends rien.

12/08/2010, 15h34
llaffont

Le retour PHP de retourSelectFormate() donne quoi ? (évite le é dans le nom de ta fonction)

Moi je ne comprends pas bien ta requete SQL :

Code:

$sps = $DBA->Query("SELECT Sp FROM PN WHERE".$IdSelectParent."='ok' )

.$IdSelectParent."='ok' ça ne serait pas plutot un truc comme ça SELECT Sp FROM PN WHERE IdSelectParent='.$IdSelectParent.' ?
12/08/2010, 15h51
l.laurent60
la requéte est :
Code:

1 2 $sps = $DBA->Query("SELECT Sp FROM PN WHERE Ntype".$IdSelectParent."='yes'");
le problème est qu'il ne retourne rien
12/08/2010, 16h10
llaffont
donc erreur dans ta requête !

Ton objet $DBA ne gère pas le "or die" ?

As tu essayé ton script.php sans passer par ajax ?
Code:

1 2 3 4 5 6 7 8 //tu le change le temps du test retourSelectFormaté(); if(isSet($_REQUEST['actionPOST'])){ }

J'ai suivi ton conseil j'ai testé en sortant l'appel de la fonction retourSelectFormaté(); de plus forcé la valeur de $IdSelectParent et j'ai fais un appel direct du fichier est c'est bon.
Cela veut qui quoi :
la valeur Posté n'est pas bonne ? ce qui plante a requête ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 //tu le change le temps du test retourSelectFormaté(); if(isSet($_REQUEST['actionPOST'])){ } function retourSelectFormaté(){ // $IdSelectParent="NType".$_POST['IdSelectParent']; $IdSelectParent="Ntype4" ;

Utilises tu FireBug et FireFOX ?

Essaye ça !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function retourSelectFormate(){
$retourAjax="";
  include "function.php";
  $IdSelectParent = "NType".$_POST['IdSelectParent'];
 	 $DBA = new DB('BASE');
         $sps = $DBA->Query("SELECT Sp FROM PN WHERE".$IdSelectParent."='ok'"); 
	while( list( $sp ) = mysql_fetch_row ($sps) ) {
	   $retourAjax .='<td class="sport"> 
	  <INPUT TYPE=CHECKBOX value="'.$sp.'" NAME="'.$sp.'">'.$sp.'<BR/> 
		         </td>';   
	}; 
echo $retourAjax;
}

Avant tout merci pour ton aide, car c'est plutôt hard.
J'ai modifié le code comme tu me le préconisé mais sans résultat.
Il m'affiche la page avec le premier select (good) et le second a disparue pour ne laisser qu'un grand rectangle blanc.
Je me demande si la configuration du fichier MesAjaxfonction est bonne ?

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
$(function(){
	$("#MessageJS").empty();             //Efface le message qui affiche que le navigateur ne prends pas en charge JAVASCRIPT.
	$("#Page").show();                   // Si le JavaScript Fonction on affiche la page.	
	$("select").change(function () {     //Action lors d'une selection sur les boites dates
		ChangeOption(this);
	});
});
 
function ChangeOption(Balise){
var OptionChoisi= $(Balise).val(),                            // On récupère la valeur de l'option
	idBalise = $(Balise).attr("class"),                         // on récupère le nom de la class affecté au SELECT pour la suite de l'inter-action
	parametres = 'actionPOST=Go&IdSelectParent='+OptionChoisi,  //déclare les parametres pour la fonction AJAX. 
	url = './RetourPHP.php';                                    // L'URL du Script fournissant le retour.
 
 
if (OptionChoisi != 0){ 
	                                                            // Je ne traite pas le ELSE à vous d'adapter en fonction de vos besoins.
$.ajax({
		type: "POST",                                             // Requete POST
		url: url, 
		dataType: "html",                                         // Format du retour de l'url
		success : AfficheSuccess,                                 // Si tout marche bien
		data: parametres, 
		error: AfficheErreur                                      // Si on se plante ;o)
	})	
}
//Afin de pouvoir exploiter les variables de l'objet déclencheur nous déclarons la function de succès à l'interrieur de la fonction d'événement.
function AfficheSuccess(retourSuccess){
	switch (idBalise) {	                                        // on change la façon de réagir en fonction de l'élément déclencheur.
 
		case 'Groupe' :
			$('#resultat').empty();
			$('select.SousGroupe').empty();
			$('select.SousSousGroupe').empty();
			$('select.SousGroupe').append( retourSuccess );
		break;
 
		case 'SousGroupe' :
			$('#resultat').empty();
			$('select.SousSousGroupe').empty();
			$('select.SousSousGroupe').append( retourSuccess );
		break;		
 
		case 'SousSousGroupe' :
			$('#resultat').empty();
			$('#resultat').append( $("select.Groupe").val()+'  '+ $("select.SousGroupe").val()+'  '+ $("select.SousSousGroupe").val() );
		break;
 
	}
}
}
 
function AfficheErreur(retourErreur){
	 $('#MessageJS').append( retourErreur );
}

Dans ton cas tu n'a que deux formulaire.
Type et Nom.

Ils n'interagissent pas l'un envers l'autre puisque tu les génères depuis le début.

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
 
<tr>
   <td class="titre" >Type de compétition </td>
   <td>
       <div id="select_1">
     	  <SELECT name="TypeC" id="TypeC" class="Groupe">   
                <OPTION VALUE="">Choisir un type </OPTION>
                     <?php   
                        while( list( $NtypeC, $typeC ) = mysql_fetch_row($comp) {
                           if ($typeC) {
                                 echo '<OPTION VALUE="'.$NtypeC.'">'.$typeCompetition.'</OPTION>';
                           } 
                        }
                     ?>		
                </SELECT>
              </div>
         </td>
  </tr>
  <tr>
     <td>Nom </td>
      <td>
	 <div id="select_2">
	     <SELECT name="TypeF" id="TypeF" class="SousGroupe"  onChange="changeSport(this.form)"> 
	         <OPTION VALUE="">Choisir</OPTION>
	              <?php
                          while( list( $typef, $NIn) = mysql_fetch_row($fed)) {
                              if ($typef) {
                                  echo '<OPTION VALUE="'.$typef.'">'.$typef.'</OPTION>';
                                     } 
                                  }
                                 ?>
	                   </SELECT> 
	          </div   
	    </td></tr>

Dans mon exmple le choix fais dans le premier génère le second.

Dans ton cas le choix fait dans le premier et le second doivent générer un resultat de chekbox donc pas besoin de connaitre l'intitulé du déclencheur. Le code suivant ne doit fonctionner qu'une fois le second select 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
 
$(function(){
	$("#MessageJS").empty();             //Efface le message qui affiche que le navigateur ne prends pas en charge JAVASCRIPT.
	$("#Page").show();                   // Si le JavaScript Fonction on affiche la page.	
	$("select.SousGroupe").change(function () {     //Action lors d'une selection sur le second select
		ChangeOption(this);
	});
});
 
function ChangeOption(Balise){
var OptionChoisi= $(Balise).val(),                            // On récupère la valeur de l'option
	parametres = 'actionPOST=Go&IdSelectParent='+OptionChoisi,  //déclare les parametres pour la fonction AJAX. 
	url = './RetourPHP.php';                                    // L'URL du Script fournissant le retour.
 
 
if (OptionChoisi != 0){ 
	                                                            // Je ne traite pas le ELSE à vous d'adapter en fonction de vos besoins.
$.ajax({
		type: "POST",                                             // Requete POST
		url: url, 
		dataType: "html",                                         // Format du retour de l'url
		success : AfficheSuccess,                                 // Si tout marche bien
		data: parametres, 
		error: AfficheErreur                                      // Si on se plante ;o)
	})	
}
//Afin de pouvoir exploiter les variables de l'objet déclencheur nous déclarons la function de succès à l'intérieur de la fonction d'événement.
function AfficheSuccess(retourSuccess){
 
			$('#resultat').empty();
			$('#resultat').append( retourSuccess );
}
 
function AfficheErreur(retourErreur){
	 $('#MessageJS').append( retourErreur );
}

12/08/2010, 17h58
l.laurent60

Dans ton cas tu n'a que deux formulaire.
Je dirai que j'ai un formulaire avec 2 SELECT et j'aimerai pouvoir filtrer les éléments de la check box qui se trouve en dessous, et fonction des choix fait en amont.

Ils n'interagissent pas l'un envers l'autre puisque tu les génères depuis le début.
Là je ne suis pas sur de capter, alors comment le formuler dans le fichiers mesAjaxFonction ?

Ton exemple n'est peut être pas approprié à mon dev ?
12/08/2010, 21h16
llaffont

Si tu veux que ton premier select génère le contenue de ton second Select, mon exemple est le bon.

Si non ! si tu veux seulement qu'une fois les options choisie dans tes Select une liste de case à cocher fasse sont apparition mon exemple est également le bon mais il est à adapter.

Peux tu me faire un Zip de ta page HTML généré avant toute modification ajax ? (Une page qui contienne tes deux select remplis )
13/08/2010, 13h47
l.laurent60

1 pièce(s) jointe(s)

Pièce jointe 65895
Loic comme convenu voici la PJ.
merci
13/08/2010, 15h18
llaffont

1 pièce(s) jointe(s)

ce n'était pas ce que je demandais...
bref !

Tiens regarde ce code qui reprend tout ce que tu as présenté dans ce post et qui fonctionne dans la limite de connaissance que j'ai de ton système. (et oui ! j'ignore comment est configuré ta BDD ce que fait changeSport(); et plein d'autre truc)

Lis les commentaires je pose des questions et j'explique les raisons de tel action.
15/08/2010, 21h57
l.laurent60

Enfin cela marche, merci à tous pour votre aide et bravo aux forums.
16/08/2010, 12h20
llaffont

Content pour toi ! :ccool:

Si un jour tu y mets sur la toile colle l'URL ici afin de nous montrer le résultat :D

n'oublie pas le :resolu: si tu en as fini ;)