Récupérer une variable et l'envoyer à une requête MySQL via PHP

Version imprimable

Bonjour,

Je me trompe peut-être de "rubrique", mais mon problème relève de l'AJAX/PHP.

Je dispose d'une liste déroulante alimentée par ma table

Code:

1
2
3
4
5
6
7
8
9
<div style="font-size:9px">  
Choisissez votre thème :<select id="theme">
<?php 
$theme_list = mysql_query("SELECT * FROM theme ORDER BY Libelle ASC"); 
while($theme=mysql_fetch_array($theme_list)) {
   echo '<option value="'.$theme["ID"].'">'.$theme["Libelle"].'</option><br/>'; //Attention à ne pas oublier le . qui sert à concaténer ton expression
}?>
 </select>
</div>

J'utilise un script JQuery pour des raisons de performance et esthétique pour récupérer la variable choisie par l'utilisateur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
  $(document).ready( function () {
 
   $('#theme').joliSelect(
   {
    'width'          : '200',
    'bkdColor'       : '#e0c1c1',
    'bkdColorSelect' : '#e09188',
    'arrowColor'     : '#e09188',
    'fontColor'      : '#914f53',
    'maxHeight'      : '200',
	'defaultText'    : 'Choisir un thème',
    'onChooseItem':  function()
      {
        document.getElementById('theme_liste').style.visibility="visible";
alert(document.getElementById('theme').value);
 
      }
   });
  })
</script>

L'idée est de pouvoir injecter dans mon <div> ci dessous, le résultat de la requête, à partir de ma variable "ID" qui est récupérée par la liste déroulante.

Code:

1
2
3
4
5
6
7
8
9
<div id="theme_liste">
<?php 
        $ligne = mysql_query("SELECT * FROM bg ORDER BY ID DESC"); 
        while($row = mysql_fetch_array($ligne)) 
        {         
                echo '<div class="scroll-content-item"><img src="files/'.$row["Img"].'" width="100%" onclick="go('.$row["ID"].');" ></div>';
	}
?>
     </div>

J'ai pensé passer par la fonction suivante, mais je ne suis pas convaincu :

Code:

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
	url: "requetesqllogo.php", // Mon fichier contient la requête avec une récupération de la variable "ID" 
	data: "ID="+ID,
	type:'GET',
	DataType:'html',
       	ifModified:true,
	success: function(content) {
            	$('#logo').html(content);
		document.getElementById('theme_liste').InnerHTML;	
	}
});

Je pense que je complique beaucoup les choses :(

Merci.

19/09/2013, 14h14
SpaceFrog

Code:

document.getElementById('theme_liste').InnerHTML;

8O
ça fait quoi dans ton success ?
19/09/2013, 14h25
Bovino

Souviens-toi que JavaScript est sensible à la casse... :roll:

Donc notamment DataType != dataType et InnerHTML != innerHTML.

Merci pour vos messages.

A vrai dire, je n'ai pas continuer dans la version "renvoi de requête SQL". Bon, j'avoue, mon code n'était pas complet : Je reprends donc :

Voici mon code AJAX :

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
<script type="text/javascript">
  $(document).ready( function () {
 
   $('#theme').joliSelect(
   {
    'width'          : '200',
    'bkdColor'       : '#e0c1c1',
    'bkdColorSelect' : '#e09188',
    'arrowColor'     : '#e09188',
    'fontColor'      : '#914f53',
    'maxHeight'      : '200',
	'defaultText'    : 'Choisir un thème',
    'onChooseItem':  function()
      {
 
 
 
	 		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
 
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
				function go2(ID){
 
 
			var ID = document.getElementById('theme').value;
			$.ajax({
 
        		url: "RequeteThemeSQL.php",
			data: "ID="+ID,
			type:'GET',
			dataType:'html',
       			ifModified:true,
 
		success: function(content) 
               {
            	$('#theme_liste').html(content);
		alert(content);
		document.getElementById('theme_liste').innerHTML=content;
		}
    });
 
 
 
			}
 
 
      }
   });
  })
</script>

On dirait que le code ne s’exécute pas. Lorsque je sélectionne dans mon <select>, rien ne se passe.

Voici le code du select :

Code:

1
2
3
4
5
6
7
8
9
<div style="font-size:9px">  
Choisissez votre thème :<select id="theme">
<?php 
$theme_list = mysql_query("SELECT * FROM theme ORDER BY Libelle ASC"); 
while($theme=mysql_fetch_array($theme_list)) {
   echo '<option value="'.$theme["ID"].'">'.$theme["Libelle"].'</option><br/>'; //Attention à ne pas oublier le . qui sert à concaténer ton expression
}?>
 </select>
</div>

19/09/2013, 15h13
SpaceFrog

:koi:

pourquoi getxhr alors que tu utilises $.ajax ????

Autant pour moi :) C'était un résidu d'une ancienne fonction récupérée depuis mon autre script.

Voici le code épuré :

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
<script type="text/javascript">
  $(document).ready( function () {
 
   $('#theme').joliSelect(
   {
    'width'          : '240',
    'bkdColor'       : '#e0c1c1',
    'bkdColorSelect' : '#e09188',
    'arrowColor'     : '#e09188',
    'fontColor'      : '#914f53',
    'maxHeight'      : '200',
	'defaultText'    : 'Choisir un thème',
    'onChooseItem':  
	function()
    	{
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
				//function go2(ID){
 
 
			var ID = document.getElementById('theme').value;
			alert(ID);
			$.ajax({
 
        		url: "RequeteThemeSQL.php",
				data: "ID="+ID,
				type:'GET',
				dataType:'html',
       			ifModified:true,
 
 
        		success: function(content) {
            	$('#theme_liste').html(content);
				alert(content);
				document.getElementById('theme_liste').innerHTML=content;
											}
   					});
							//	}
		}
 
   		});
  })
</script>

J'ai volontairement désactivé la fonction go2(ID) qui n'a aucun sens, puisque j'ai intégré le code dans la fonction principale. Par contre, j'ai du mal à saisir un point qui me semble essentiel :

Ma fonction fait appel au fichier php suivant RequeteThemeSQL.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 <?php 
 		include('connect_ftp.php');
		$ID = $_GET["ID"];
        $ligne = mysql_query("SELECT * FROM bg WHERE IDTheme='$ID' ORDER BY ID DESC"); 
        while($row = mysql_fetch_array($ligne)) 
           {         
 
                         echo '<div class="scroll-content-item"><img src="files/'.$row["Img"].'" width="100%" onclick="go('.$row["ID"].');" ></div>';
 
           }
 
		   ?>

Comme je le pensais, le résultat retourné par ma fonction Ajax est "

Code:

<div class="scroll-content-item"><img src="files/'.$row["Img"].'" width="100%" onclick="go('.$row["ID"].');" ></div>

Or moi, je souhaite que ma fonction renseigne mon div intitulé <div id="theme_liste"> avec le résultat de la fonction incluant la boucle "While".

J'ai du mal à me faire comprendre :(

19/09/2013, 16h17
SpaceFrog

Citation:

J'ai du mal à me faire comprendre

ça au moins c'est clair ...

Ah quel idiot je peux être parfois! Merci de m'avoir mis sur le chemin ... Voilà, j'ai trouvé mon erreur :

J'ai oublié de rendre visible mon <div> (rendu invisible par un CSS).

Du coup mon code s'affiche correctement. Pour ceux que ça intéresse, voici un code qui permet d'afficher une liste d'image après avoir sélectionné dans la liste déroulante "une catégorie". Par exemple: Afficher les vignettes qui correspondent au thème "Mariage".
J'ai utilisé le script JoliSelect JQuery

J'ai créé donc ma <div> et je lui ai attribué l'effet "hidden"

Code:

1
2
#theme_liste{
	visibility:hidden; }

Puis en Ajax, :

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
<script type="text/javascript">
  $(document).ready( function () {
 
   $('#theme').joliSelect(
   {
    'width'          : '240',
    'bkdColor'       : '#e0c1c1',
    'bkdColorSelect' : '#e09188',
    'arrowColor'     : '#e09188',
    'fontColor'      : '#914f53',
    'maxHeight'      : '200',
	'defaultText'    : 'Choisir un thème',
    'onChooseItem':  
	function()
    	{
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
				//function go2(ID){
 
 
			var ID = document.getElementById('theme').value;
			alert(ID);
			$.ajax({
 
        		url: "RequeteThemeSQL.php",
				data: "ID="+ID,
				type:'GET',
				dataType:'html',
       			ifModified:true,
 
 
        		success: function(content) {
            	$('#theme_liste').html(content);
				alert(content);
				document.getElementById('theme_liste').style.visibility="visible";
				document.getElementById('theme_liste').innerHTML=content;
											}
   					});
							//	}
		}
 
   		});
  })
</script>

Et enfin mon fichier PHP RequeteThemeSQL.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 <?php 
                include('connect_ftp.php');
                $ID = $_GET["ID"];
        $ligne = mysql_query("SELECT * FROM bg WHERE IDTheme='$ID' ORDER BY ID DESC"); 
        while($row = mysql_fetch_array($ligne)) 
           {         
        
                         echo '<div class="scroll-content-item"><img src="files/'.$row["Img"].'" width="100%"></div>';
                                                
           }
                  
                   ?>

Voilà pour le code ! Merci à vous :)