Discussion :

[maitaddi]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('theme_liste').InnerHTML;

ça fait quoi dans ton success ?

[Bovino]

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

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

[maitaddi]

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SpaceFrog]

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

[maitaddi]

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 :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[SpaceFrog]

J'ai du mal à me faire comprendre

ça au moins c'est clair ...

[maitaddi]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#theme_liste{
	visibility:hidden; }

Puis en Ajax, :

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

Sélectionner tout - Visualiser dans une fenêtre à part

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