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