AJAX : Menu déroulant

[cdossert]

Bonjour,
Je suis en train de découvrir et d'utiliser AJAX pour sa puissance.
J'ai un gros soucis au niveau des formulaire.

Je vais tenter d'être le plus clair possible, et je remercie par avance celles et ceux qui peuvent m'aider à résoudre mon problème.

- Voici le contenu de script.js :

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
function new_xhr(){
	var xhr_object = null;
	if(window.XMLHttpRequest)
	   xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject){
	   try {
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else {
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr_object = false;
	}
	return xhr_object;
}
 
function load_page(select) {
	var xhr2 = new_xhr();
	xhr2.onreadystatechange = function(){
		if ( xhr2.readyState == 4 ){
			if(xhr2.status  != 200){
				document.getElementById("intro").innerHTML ="Error code " + xhr2.status;
			} else {
				document.getElementById("intro").innerHTML = xhr2.responseText;
			}
		} else {
			document.getElementById("intro").innerHTML = "Chargement en cours ...<br /><img src='design/loading.gif' alt=''/>";
		}
	}
	xhr2.open("GET", select.split('?')[1]+".php", true);
	xhr2.send(null);
}

Voici le contenu succint de ma page index.php

- Tout d'abord le menu contenant 2 liens :
Page 1 (me permettant d'appeler le fichier "site/page1.php" à l'intérieur de ma page index.php
Page 2 (me permettant d'appeler le fichier "site/page2.php" à l'intérieur de ma page index.php

Code html :

1
2
3
4
<ul class="arrange horizontal" id="top-menu-links">
                <li><a href="?site/page1" onClick="load_page(this.href);return false;">Page 1</a></li>
				<li><a href="?site/page2" onClick="load_page(this.href);return false;">Page 2</a></li>
</ul>

ET ici l'inclusion des fichiers page1.php et page2.php

Code html :

1
2
<div id="intro">
</div><!--//intro-->

Jusque là : PAS DE PROBLEME !

Là où celà se complique :
Dans mon fichier "site/page2.php", j'ai un menu déroulant permettant de faire apparaitre des éléments sur la page, selon ce que l'utilsateur choisi, grâce à la commande ONCHANGE()

Code html :

1
2
3
4
5
6
7
<form name="FormProduit" id="FormProduit" method="post" action="">
<input name="show" type="hidden" id="show" value="VOIR" />
                <select name="gr" onChange="document.FormProduit.submit();">
                       <option value="1">CHOIX 1</option>
                       <option value="2">CHOIX 2</option>
                 </select>
</form>

Le problème est lorsque je fais un choix dans mon menu déroulant, le contenu du fichier "site/page2.php" disparait de mon fichier parent : index.php

J'espère être clair !
Je vous remercie pour votre aide !

[NoSmoking]

Bonjour,
ce que tu as est le comportement normal du submit d'un formulaire ayant une action.

Dans mon fichier "site/page2.php", j'ai un menu déroulant permettant de faire apparaitre des éléments sur la page, selon ce que l'utilsateur choisi, grâce à la commande ONCHANGE()

ce n'est peut être pas la bonne méthode que de le mettre dans une FORM.