[AJAX] AJAX et tableau

**Jimmy72_** · 30/09/2011, 16h44

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 :

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

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

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

**bewidia** · 30/09/2011, 18h22

C'est un cas de listes liées.
Ce tutoriel devrait aider : http://siddh.developpez.com/articles/ajax/

**Bovino** · 30/09/2011, 20h53

Essaye en testant le status 200 et le status 0 dans le readyStateChange.

**Jimmy72_** · 03/10/2011, 16h44

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.

@+

**Bovino** · 03/10/2011, 16h51

Envoyé par Jimmy72_

Et comment je teste le statut?

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

**Jimmy72_** · 03/10/2011, 17h45

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

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

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

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

[AJAX] AJAX et tableau

AJAX

Vue hybride

Discussions similaires

Partager

Partager