[AJAX] AJAX et tableau

Version imprimable

Bonjour,

J'ai une liste déroulante dans laquelle j'ai de multiples disciplines. Pour chaque discipline j'ai une liste de grades.

J'aimerais qu'en fonction de la discipline sélectionnée, tous les grades concernant s'affiche.

Voici mes 3 fichiers

GestionGrade.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
 
<?php include "header.php"; ?>
 <div id="menuHaut">
  <div id='MH1'>
    <a href='formGrade.php'>Ajout de grade</a>
  </div></div> 
<?php  
  include 'menuGauche.php';
  echo "<h1>Liste des grades</h1>"; 
?>
 
<form action="gestionGradeModif.php" method="POST" name="gestGrade">
  <input type="hidden" name="disOuGrade" value="grade">
 
 <p style="position:relative;left:400px;"> Choix de la discipline :	
  <select name="disciplineNom2" onChange="changeGrade();">
    <option value=""></option>
    <?php
      $reqDis1="SELECT * FROM disciplines";
      $dis1=mysql_query($reqDis1) or die( mysql_error() );
      while($datadis = mysql_fetch_array($dis1))
      {
        echo"<option name='$datadis[discipline]' value='$datadis[discipline]'>$datadis[discipline]</option>";
      }
    ?>
  </select>
 </p>
 <div id="tableGrade">
 
 </div>
 
 
  <input type="submit" value="Supprimer" style="position:absolute;left:350px; top:390px;"></input>
 
  </form>
  <?php
  echo'<div id="divPaginationDiscipline">';
  
   for($i=1;$i<=$nombreDePages;$i++)
                {                 
                        if($i!=$pageActuelle)
                        {
                           echo "<a href='gestionGrade.php?idD= ".$id_disci." && page=".$i."'>".$i."</a>&nbsp;";       
                        }
                        else
                        {
                           echo $i."&nbsp;";       
                        }
                }
                echo"</div>";
  ?>
<?php include ("footer.php"); ?>

gestionGradeModif.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
 
<?php 
 echo '<div name="tableGrade" >'; 
 
  $idDiscipline = $_POST['idDiscipline'];
 
   echo "    <table border='1' id='tableModifGrade'>
            <tr>
              <th>Grade</th>
              <th>Supprimer</th>
            </tr> ";
 <?php           
if(isset( $idDiscipline )){
    $db="samourai_gestion";
    $sql = mysql_connect("localhost","****","*******") or die ('Erreur : '.mysql_error()); 
    mysql_select_db($db);
 
    $gradeParPages = 7;
 
    $select = "SELECT count(*) FROM grades WHERE idDiscipline='".$id_disci."'";
    $result = mysql_query($select) or die (mysql_error() );
    $row = mysql_fetch_array($result);
    $total = $row[0];
 
     	//Nous allons maintenant compter le nombre de pages.
  		$nombreDePages=ceil($total/$gradeParPages);
 
 
  		if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
  		{
  			$pageActuelle = intval($_GET['page']);
 
 
  			if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
  			{
  				$pageActuelle=$nombreDePages;
  			}
  		}
  		else // Sinon
  		{
  			$pageActuelle=1; /* La page actuelle est la n°1*/    
  		}
      $premiereEntree =($pageActuelle-1)* $gradeParPages;
 
      $requete = "SELECT * FROM grades WHERE idDiscipline ='".$id_disci."' ORDER BY nom_grade ASC LIMIT ".$premiereEntree.",".$gradeParPages."";
  	  $resultat =  mysql_query($requete);
 
 
      while ($data = mysql_fetch_assoc($resultat))
    {
      echo '<tr><td>'.$data['nom_grade'].'</td>';
      echo '<td><input type="checkbox" id="Del_Grade"></td></tr> ';   
    }
 
 
 echo " </table><br /><br />
 
</div>  "; 
  ?>

et ajaxGrade.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
 
 
 
function getXhr()
{
  if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	}
  return xhr;
}
 
function changeGrade()
{
 
    var xhr = getXhr();
 
		xhr.onreadystatechange = function()  
    {     
 
		  if(xhr.readyState == 4 && xhr.status == 200)   // ne fonctionne plus à partir d'ici
      {
         alert('hello !');       
         var leselect = xhr.responseText;
						document.getElementById('tableGrade').innerHTML = leselect;
					}	
				}
				xhr.open("POST","gestionGradeModif.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.gestGrade.getElementById('disciplineNom2');
				iddisciplineModif = sel.options[sel.selectedIndex].value;
				xhr.send("idDiscipline="+iddisciplineModif);
    }

Voilà, je vous remercie d'avance pour les lumières avec, j'espère, pouvoir éclairer ma lanterne =D

30/09/2011, 17h22
bewidia

C'est un cas de listes liées.
Ce tutoriel devrait aider : http://siddh.developpez.com/articles/ajax/
30/09/2011, 19h53
Bovino

Essaye en testant le status 200 et le status 0 dans le readyStateChange.
03/10/2011, 15h44
Jimmy72_

Et comment je teste le statut?

Sinon je vais essayé avec les listes liées. En regardant bien, ca correspond =D

Je vous dirais ce que cela donne.

@+
03/10/2011, 15h51
Bovino

Citation:

Envoyé par Jimmy72_

Et comment je teste le statut?

:roll:

En lisant le code que tu as copié collé... :aie:

donc j'ai avancé un peu dans mon code mais lorsque j'arrive sur mon gestionGradeModif.php, il ne m'affiche rien sur ma page.

Voici mon code:

GestionGrade.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
 
<?php include "header.php"; ?> 
 
<div id="menuHaut">  
  <div id='MH1'>    
    <a href='formGrade.php'>Ajout d'un grade</a>  
  </div>
</div>  
 
<?php
 
      $gradeParPages = 7;  
 
    $select = "SELECT count(*) FROM grades WHERE idDiscipline='".$id_disci."'";
    $result = mysql_query($select) or die (mysql_error() );
    $row = mysql_fetch_array($result);
    $total = $row[0];
 
     	//Nous allons maintenant compter le nombre de pages.
  		$nombreDePages=ceil($total/$gradeParPages);
 
 
  		if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
  		{
  			$pageActuelle = intval($_GET['page']);
 
 
  			if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
  			{
  				$pageActuelle=$nombreDePages;
  			}
  		}
  		else // Sinon
  		{
  			$pageActuelle=1; /* La page actuelle est la n°1*/    
  		}
      $premiereEntree =($pageActuelle-1)* $gradeParPages;
 
    echo "<h1>Liste des grades</h1>";    
  include 'menuGauche.php'; 
?>  
<form action="gestionGradeModif.php" method="POST" name="gestGrade">  
  <input type="hidden" name="disOuGrade" value="grade">    
  <p style="position:relative;left:400px;"> Choix de la discipline :	   
    <select id="disciplineNom2" name="disciplineNom2" onChange="changeGrade();">    
      <option value="">
      </option>
<?php    
      $reqDis1="SELECT * FROM disciplines";
      $dis1=mysql_query($reqDis1) or die( mysql_error() );
      while($datadis = mysql_fetch_array($dis1))
      {
        echo"<option name='$datadis[discipline]' value='$datadis[id_discipline]'>$datadis[discipline]</option>";
      }
      $id_disci = $datadis["id_discipline"];
 
          ?>  
    </select> 
  </p>
<div id='tableGrade'> 
  <table name="tablegrade" border='1'>
    <tr>
      <th>Grade</th>
      <th>Supprimer</th>
    </tr>  
<?php
  $requete = "SELECT * FROM grades WHERE idDiscipline ='".$id_disci."' ORDER BY nom_grade ASC LIMIT ".$premiereEntree.",".$gradeParPages."";   	  
  $resultat =  mysql_query($requete);              
  while ($data = mysql_fetch_assoc($resultat)){       
  echo '<tr>
          <td>'.$data['nom_grade'].'</td>
          <td><input type="checkbox" id="Del_Grade"></td>
        </tr>';
  }  
?>    
 
    </table><br /><br />
</div>
 
  <input type="submit" value="Supprimer" style="position:absolute;left:350px; top:390px;">
  </input>     
</form>  
<?php
  echo'<div id="divPaginationDiscipline">';
 
   for($i=1;$i<=$nombreDePages;$i++)
		{		  
			if($i!=$pageActuelle)
			{
			   echo "<a href='gestionGrade.php?idD= ".$id_disci." && page=".$i."'>".$i."</a>&nbsp;";       
			}
			else
			{
			   echo $i."&nbsp;";       
			}
		}
		echo"</div>";
  ?>
<?php include ("footer.php"); ?>

gestionGradeModif.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
 
<?php 
 echo '<table name="tablegrade">
        <tr>
          <th>Grade</th>
          <th>Supprimer</th>
        </tr>
    '; 
 
  $idDiscipline = $_POST['idDiscipline'];
 
    $gradeParPages = 7;  
 
    $select = "SELECT count(*) FROM grades WHERE idDiscipline='".$idDiscipline."'";
    $result = mysql_query($select) or die (mysql_error() );
    $row = mysql_fetch_array($result);
    $total = $row[0];
 
     	//Nous allons maintenant compter le nombre de pages.
  		$nombreDePages=ceil($total/$gradeParPages);
 
 
  		if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
  		{
  			$pageActuelle = intval($_GET['page']);
 
 
  			if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
  			{
  				$pageActuelle=$nombreDePages;
  			}
  		}
  		else // Sinon
  		{
  			$pageActuelle=1; /* La page actuelle est la n°1*/    
  		}
      $premiereEntree =($pageActuelle-1)* $gradeParPages;
 
 
 <?php           
 
      $requete = "SELECT * FROM grades WHERE idDiscipline ='".$idDiscipline."' ORDER BY nom_grade ASC LIMIT ".$premiereEntree.",".$gradeParPages."";
 
      echo  $requete;
      $resultat =  mysql_query($requete);
 
      while ($data = mysql_fetch_assoc($resultat))
    {
      echo '<tr><td>'.$data['nom_grade'].'</td>';
      echo '<td><input type="checkbox" id="Del_Grade"></td></tr> ';   
    }
 
 echo '</table>'; 
  ?>

ajaxGrade.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
 
function getXhr(){
  var xhr = null; 
 
  if(window.XMLHttpRequest){ // Firefox et autres
	   xhr = new XMLHttpRequest();
  } 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
		  xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
		  xhr = new ActiveXObject("Microsoft.XMLHTTP");
		  }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
  return xhr;
}
 
function changeGrade()
{
    var xhr = getXhr();
		xhr.onreadystatechange = function(){              // ne fonctionne plus à partir d'ici
 
      if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))   
      {       
          var leselect = xhr.responseText;
					document.getElementById('tableGrade').innerHTML = leselect;
			}	
		}
		xhr.open("POST","gestionGradeModif.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		sel = document.getElementById('disciplineNom2');
		iddisciplineModif = sel.options[sel.selectedIndex].value;		
		xhr.send("idDiscipline="+iddisciplineModif);
}

Enfaite, je n'obtiens aucune réponse de ma requête dans mon gestionGradeModif.php.
Merci de votre aide.

03/10/2011, 17h12
Bovino

Tu ne peux pas mettre une balise table enfant direct d'une autre table...
Supprime la balise <table> de ton retour et ça devrait mieux fonctionner...
04/10/2011, 08h18
Jimmy72_

C'est à dire? Je n'ai pas très bien compris ce que vous m'avez dit ^^

Bon j'ai réussi a avoir ce que je voulais dans mon tableau. Mon seul probleme qui est génant c'est que si j'ai plus de 7 grades pour une discipline, je répartis cela sur plusieurs pages et donc lors du changement de page sa me remet tout a zéro mm en passant l'id_discipline en POST.

Cordialement,