AJAX et tableau [Résolu]

Jimmy72_ · 30/09/2011, 15h44

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, 17h22

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

Bovino · 30/09/2011, 19h53

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

Jimmy72_ · 03/10/2011, 15h44

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, 15h51

Citation:

Envoyé par Jimmy72_

Et comment je teste le statut?

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

Jimmy72_ · 03/10/2011, 16h45

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.

Bovino · 03/10/2011, 17h12

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

Jimmy72_ · 04/10/2011, 08h18

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,

30/09/2011, 19h53	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Essaye en testant le status 200 et le status 0 dans le readyStateChange. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

03/10/2011, 17h12	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	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... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

30/09/2011, 17h22	#2
bewidia Membre habitué Inscription : octobre 2009 Messages : 122 Détails du profil Informations forums : Inscription : octobre 2009 Messages : 122 Points : 116 Points : 116	C'est un cas de listes liées. Ce tutoriel devrait aider : http://siddh.developpez.com/articles/ajax/
	00

03/10/2011, 15h44	#4
Jimmy72_ Invité régulier Jimmy Pierrat Webmaster Inscription : juin 2010 Messages : 40 Détails du profil Informations personnelles : Nom : Jimmy Pierrat Informations professionnelles : Activité : Webmaster Informations forums : Inscription : juin 2010 Messages : 40 Points : 8 Points : 8	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. @+
	00

04/10/2011, 08h18	#8
Jimmy72_ Invité régulier Jimmy Pierrat Webmaster Inscription : juin 2010 Messages : 40 Détails du profil Informations personnelles : Nom : Jimmy Pierrat Informations professionnelles : Activité : Webmaster Informations forums : Inscription : juin 2010 Messages : 40 Points : 8 Points : 8	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,
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email