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