[AJAX] Comment modifier un formulaire en Ajax ?

**l.laurent60** · 11/08/2010, 16h07

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...

Merci par avance pour votre aide.

**llaffont** · 11/08/2010, 17h04

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.

**l.laurent60** · 11/08/2010, 17h25

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

**l.laurent60** · 12/08/2010, 10h14

Loic merci pour le code,

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

Code :

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

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 :

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

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 :

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

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.

**llaffont** · 12/08/2010, 10h38

Cela ne devrait se produire que si ton navigateur ne gère pas le JS

**l.laurent60** · 12/08/2010, 10h45

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...

**llaffont** · 12/08/2010, 10h58

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...

**l.laurent60** · 12/08/2010, 11h46

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

**l.laurent60** · 12/08/2010, 14h43

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

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
 
<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>

**llaffont** · 12/08/2010, 14h58

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

**l.laurent60** · 12/08/2010, 15h17

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

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
 
<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 :

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
 
 
$(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 :

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
 
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.

**llaffont** · 12/08/2010, 15h34

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 :

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

$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.' ?

**l.laurent60** · 12/08/2010, 15h51

la requéte est :

Code :

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

1
2
 
$sps = $DBA->Query("SELECT Sp FROM PN WHERE Ntype".$IdSelectParent."='yes'");

le problème est qu'il ne retourne rien

**llaffont** · 12/08/2010, 16h10

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 :

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

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

**l.laurent60** · 12/08/2010, 16h39

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 :

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

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" ;

**llaffont** · 12/08/2010, 16h50

Utilises tu FireBug et FireFOX ?

Essaye ça !

Code :

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

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;
}

**l.laurent60** · 12/08/2010, 17h17

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 :

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
$(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 );
}

**llaffont** · 12/08/2010, 17h43

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 :

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
 
<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 :

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
 
$(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 );
}

**l.laurent60** · 12/08/2010, 17h58

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 ?

**llaffont** · 12/08/2010, 21h16

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 )

[AJAX] Comment modifier un formulaire en Ajax ?

AJAX

Discussions similaires

Partager

Partager