[AJAX] Ajax et SQL ?

Version imprimable

Bonjour je me permet de vous déranger car un problème se présente à moi...
En fait j'aimerais par le biais d'un <select> choisir mes titres de formation et une fois le titre choisi mon formulaire se rempli automatiquement. pour commencer j'ai ma page principale qui contient :

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
76
77
78
79
80
81
<?php
session_start();
if(!isset($_SESSION["auth"])) header("location:../index.php");
require_once("../biblio/connexion.php");
 
$queryNum="SELECT * FROM planCours";
$resultNum=mysql_query($queryNum);
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Création plan de cours</title>
<meta name="description" content="formation et conseil en communication par les média électroniques - pao - multimédia - vidéo numérique - Production de Podcasts - Lyon" />
<meta name="keywords" content="adobe, podcast, podcasting, acrobat, dreamweaver, final cut, fireworks, flash, gimp, indesign, paint shop pro, photoshop, premiere Pro, after Effects, spip, xpress, actionscript, css, html, javascript, php" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/textes.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="../images/bigpebble.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function recharger(){
	var titre = $("#titre").val();;
    $.ajax({
		type: 'POST',
		url: 'recharge.php',
		data: {'titre':titre}, // On lui passe la var en parametre, on l'utilisera tout à l'heure.
		dataType: // je ne sais pas quoi indiquer ici 
		success: function(data) { 
 // Le problème qui se pose est comment faire pour que mon tableau soit remplacer...
}
 
	});
}
</script>
</head>
<body>
      <div id="formation">
      <div id="bienvenue">Création de plan de cours</div>
     <h3>Etape 1/3 </h3>
     <form id="form1" method="post" action="crePlanCours1.php">
       <fieldset>
         <legend>Le Cours</legend>
         <table id="foo" class="tabloFormulaire">
           <tr>
             <td height="23" class="cellGauche">Nom du Cours : 
             </td>
             <td class="cellDroite"><label for="titre">
              <select name="titre" id="titre" onchange="recharger();"><option></option><option value="nouveau">Nouveau</option>
			<?php while($row = mysql_fetch_assoc($resultNum)){ ?>
						<option value="<?php echo $row['titre']; ?>"><?php echo $row['titre']; ?></option>
                        <?php }?></select> 
             </label></td>
           </tr>
           <tr>
             <td class="cellGauche">Nombre de jours: </td>
             <td class="cellDroite"><input name="nbJours" type="text" class="grandChamp" id="nbJours" value="<?php echo $nbJours ?>"/></td>
           </tr>
           <tr>
             <td class="cellGauche">Public : </td>
             <td class="cellDroite"><textarea name="public" id="public"></textarea></td>
           </tr>
           <tr>
             <td class="cellGauche">Objectif de la formation : </td>
             <td class="cellDroite"><textarea name="objFormation" id="objFormation"></textarea></td>
           </tr>
           <tr>
             <td class="cellGauche">Prérequis : </td>
             <td class="cellDroite"><textarea name="preRequis" id="preRequis"></textarea></td>
           </tr>
             <td class="cellGauche">&nbsp;</td>
             <td class="cellDroite"><input name="titre1" type="hidden" value="<?php echo $titre; ?>"/></td>
           </tr>
           <tr>
             <td class="cellGauche">&nbsp;</td>
             <td align="right" class="cellDroite"><input type="submit" name="traitementPlan01" id="traitementPlan01" value="suivant" /></td>
           </tr>
         </table>
       </fieldset>
     </form>
   </div>

et ma seconde page qui est appelé est :
recharge.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
<?php
 
if(isset ($_POST['titre'])){  
//donnée envoyée par script 
$titre=$_POST['titre'];
require_once("../biblio/connexion.php");
 
	$query="SELECT * FROM planCours WHERE titre='$titre'";
	$result=mysql_query($query) or die(mysql_error());
 
	while($row = mysql_fetch_assoc($result)){
	$titre = $row['titre'];
	$nbJours = $row['nbJours'];
	$public = $row['public'];
	$objFormation = $row['objFormation'];
	$preRequis = $row['preRequis'];
	}
 
	echo    "<table id=\"foo\" class=\"tabloFormulaire\">
           <tr>
             <td height=\"23\" class=\"cellGauche\">Nom du Cours : 
             </td>
             <td class=\"cellDroite\"><label for=\"titre\">
              <select name=\"titre\" id=\"titre\" onchange=\"recharger();\"><option></option><option value=\"nouveau\">Nouveau</option>
			 while($var1 = mysql_fetch_assoc($resultNum)){ 
						<option value=\"".$row['titre']."\"> ".$row['titre']."</option>
			}</select> 
             </label></td>
           </tr>
           <tr>
             <td class=\"cellGauche\">Nombre de jours: </td>
             <td class=\"cellDroite\"><input name=\"nbJours\" type=\"text\" class=\"grandChamp\" id=\"nbJours\" value=\"".$nbJours."\"/></td>
           </tr>
           <tr>
             <td class=\"cellGauche\">Public : </td>
             <td class=\"cellDroite\"><textarea name=\"public\" id=\"public\">".$public."</textarea></td>
           </tr>
           <tr>
             <td class=\"cellGauche\">Objectif de la formation : </td>
             <td class=\"cellDroite\"><textarea name=\"objFormation\" id=\"objFormation\">".$objFormation."</textarea></td>
           </tr>
           <tr>
             <td class=\"cellGauche\">Prérequis : </td>
             <td class=\"cellDroite\"><textarea name=\"preRequis\" id=\"preRequis\">".$preRequis."</textarea></td>
           </tr>
             <td class=\"cellGauche\">&nbsp;</td>
             <td class=\"cellDroite\"><input name=\"titre1\" type=\"hidden\" value=\"".$titre."\"/></td>
           </tr>
           <tr>
             <td class=\"cellGauche\">&nbsp;</td>
             <td align=\"right\" class=\"cellDroite\"><input type=\"submit\" name=\"traitementPlan01\" id=\"traitementPlan01\" value=\"suivant\" /></td>
           </tr>
         </table>";
 
}
else{
 
}

et donc j'aimerais savoir quoi mettre dans mon javascript qui est surement faux pour pouvoir remplacer mon ancien tableau par mon echo de la page recharge.php

31/05/2012, 16h01
TigerCX

Tu as 2 choix, le premier est plus simple pour ton cas puisqu'il ne te manque que quelques lignes de code.

Tu dois entourer ton <tavle id="foo">..</table> d'un conteneur <div> en lui attribuant un id unique. Ensuite tu récupères le résultat de ta requête AJAX et tu l'envoies dans ton conteneur de la façon suivante

Code:

document.getElementById('ton ID unique').innerHTML = resultatAjax;

L'autre solution, que je préfères, est de récupérer via AJAX une liste de combinaison champ=valeur séparé par un caractère qui ne risque pas de se retrouver dans ta base de données, exemple # ou même |. Donc tu aurais pour chaque champ de ton formulaire tu aurais une association (champ1=valeur|champ2=valeur|champ3=valeur|etc...).

Avec javascript, tu te crées une fonction équivalente à explode en PHP. Ensuite pour chaque valeur du tableau tu as champ=valeur, tu refais un autre explode et tu assignes chaque élément de ton formulaire à la valeur récupéré.

Cette méthode est plus complexe, mais une fois maîtrisé, tu peux la réutiliser pour un paquet d'autre situation.

Si ça t'intéresses, j'ai déjà les scripts pour un formulaire de ± 200 cases à cocher et ça foncionne à merveille, je pourrais mettre la solution complète ici.

déjà un grand merci a toi pour tout ça et il se peut que cela m’intéresse ne serait ce que pour l'étudier ton code!!
Ensuite j'en ai discuter sur le chat et on m'a proposer une façon de faire que je teste pour le moment donc qui ne fonctionne pas...

Code:

1
2
3
4
5
6
<script>
function recharger(){
	var titre = $("#titre").val();
$('#table1').load('recharge.php?titre='+titre);
}
</script>

et avec ca on récupére les donée de la page recharge.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
<?php
 
if(isset ($_GET['titre'])){$titre=$_GET['titre'];
require_once("../biblio/connexion.php");
 
	$query="SELECT * FROM planCours WHERE titre='$titre'";
	$result=mysql_query($query) or die(mysql_error());
 
	while($row = mysql_fetch_assoc($result)){
	$titre = $row['titre'];
	$nbJours = $row['nbJours'];
	$public = $row['public'];
	$objFormation = $row['objFormation'];
	$preRequis = $row['preRequis'];
	}
 
echo    "<tr>
	 <td class=\"cellGauche\">Nombre de jours: </td>
	 <td class=\"cellDroite\"><input name=\"nbJours\" type=\"text\" class=\"grandChamp\" id=\"nbJours\" value=\"".$nbJours."\"/></td>
   </tr>
   <tr>
	 <td class=\"cellGauche\">Public : </td>
	 <td class=\"cellDroite\"><textarea name=\"public\" id=\"public\">".$public."</textarea></td>
   </tr>
   <tr>
	 <td class=\"cellGauche\">Objectif de la formation : </td>
	 <td class=\"cellDroite\"><textarea name=\"objFormation\" id=\"objFormation\">".$objFormation."</textarea></td>
   </tr>
   <tr>
	 <td class=\"cellGauche\">Prérequis : </td>
	 <td class=\"cellDroite\"><textarea name=\"preRequis\" id=\"preRequis\">".$preRequis."</textarea></td>
   </tr>
	 <td class=\"cellGauche\">&nbsp;</td>
	 <td class=\"cellDroite\"><input name=\"titre1\" type=\"hidden\" value=\"".$titre."\"/></td>
   </tr>
   <tr>
	 <td class=\"cellGauche\">&nbsp;</td>
	 <td align=\"right\" class=\"cellDroite\"><input type=\"submit\" name=\"traitementPlan01\" id=\"traitementPlan01\" value=\"suivant\" /></td>
   </tr>";
 
 
}
else{
	//echo json_encode('Une erreur est survenue');
}

31/05/2012, 16h35
TigerCX

Si tu ne l'as pas vu, change $('#table1').load('recharge.php?titre='+titre); pour $('#foo').load('recharge.php?titre='+titre);Sinon, la même chose mais en entourant ton <table>...</table> comme ceci <div id="unique"><table>...</table></div>et $('#unique').load('recharge.php?titre='+titre);En prenant soin de remettre les <table></table>

Voici la fonction explode à utiliser à toutes les sauces.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function explode(delimiter,string){
  returnArray = new Array(); // Création du tableau à retourner
  tempValue = ''; // Création de la variable pour contenir chaque valeur du tableau
  j=0; // Variable incrémentée pour chaque élément du tableau
  for(i=0;i<string.length;i++){ // Pour chaque caractère de la chaîne passée en paramètre
    if(string[i] == delimiter){ // Vérification si le caractère est équivalent au délimiteur passé en paramètre
      returnArray[j] = tempValue; // On attribut la variable qui a reçu la valeur du tableau au tableau à retourner avec comme clé j
      tempValue = ''; // Remise à zéro de la variable conteneur
      j++; // incrémentation de la clé de l'élément du tableau à retourner
    }
    else{
      tempValue += string[i]; // Sinon on ajoute le caratère en cour à la variable conteneur
    }
  }
  returnArray[j] = tempValue; // Dernier élément à ajouter au tableau à retourner, cette ligne est nécessaire car il manquerait le dernier élément
  return returnArray; // Retourne le tableau
}