Discussion :

[mme_chelaou]

Bonjour,

J'ai un select/option dans un formulaire, je veux utiliser onchange de ce select pour afficher un autre formulaire. Mais la methode que j'utilise me rafraichit la page.

Je souhaite savoir si Ajax permet de faire le onchange sans rafraichir la page ? si oui, comment ?

Merci bien pour votre aide

PS : mon langage principal est php

[supersnail]

Bonjour,
Quelle méthode utilises-tu?

Un bout de code serait le bienvenu pour qu'on puisse te répondre...

[RomainVALERI]

A priori ce que tu décris ne pose aucun problème en AJAX : cependant, difficile de te donner l'ensemble de l'implémentation (ou alors, si c'est vraiment pour les principes généraux d'ajax >>> FAQ et tutos AJAX ) sans voir un peu plus ton contexte particulier. Montre-nous peut-être déjà ton implémentation actuelle, qui recharge ta page.

[mme_chelaou]

La fonction js qui fait le onchange et qui charge la page

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function liste_retours()
{
projets = document.getElementById('projets').options[document.getElementById('projets').selectedIndex].value;
window.location.href='gestion_retours.php?liste_projets='+projets;
}
</script>

Le select où y a le changement :

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
.....
<form id="form1" action="?mode=2" method="post">
<table cellpadding="14" cellspacing="0" class="table_affichage_profil">
<tr>
<td>Liste Projets : </td>
<td>
<select name="projets" id="projets" class="input_texte" onchange="Javascript:liste_retours();">
<option value="0">Choisir Projet...</option>
<?php
while($row_projet = mysql_fetch_assoc($res_projet))
{
?>
<option value="<?php echo $row_projet['id_projet']; ?>" <?php if(sizeof($_GET)>0) {  }?>><?php echo $row_projet['libelle_projet']; ?></option>
<?php
}
?>
</select>
</td>
</tr>
</table>
</form>

C'est ici où je veux afficher mon formulaire:

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
<?php
if(sizeof($_GET)>0)
{
$id_projet = $_GET['liste_projets'];
$req_retour = "SELECT * FROM ".$table_retours." WHERE id_projet=".$id_projet;
$res_retour = mysql_query($req_retour);
$num = mysql_num_rows($res_retour);echo $req_retour;
if($num > 0)
{
$row_retour = mysql_fetch_assoc($res_retour);
?>
<table cellpadding="14" cellspacing="0" class="table_affichage_profil">
<tr>
<td>
Mon formulaire selon le ID du Projet
</td>
</tr>
</table>
<?php
}
}
?>

[RomainVALERI]

A priori, c'est ici que va intervenir la modification :

Code javascript :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function liste_retours()
{
projets = document.getElementById('projets').options[document.getElementById('projets').selectedIndex].value;
window.location.href='gestion_retours.php?liste_projets='+projets;
}
</script>

Cette ligne (rouge) sera remplacée par un appel ajax, avec la même url, et ça devrait ressembler à :

Code javascript :

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
var url = "gestion_retours.php?liste_projets=" + projets;
var xhr = getXhr();// on suppose que getXhr est une fonction crossbrowser (hyper-classique) qui te fournit un objet de transport adapté (XMLHTTPRequest ou ActiveX)
xhr.onreadystatechange = function() {
   if (xhr.readyState == 4) {
      if (xhr.status == 200 || xhr.status == 0) {
         // ICI : suite du traitement en cas de succès
         // >>> récupération des données du formulaire
         var nouveau_form = xhr.responseText;
         // etc. (affichage selon ton contexte) 
      }
      else {
         // traitement des échecs (pas de réponse du serveur)
      }
   }
}
xhr.open("GET", url, true);
xhr.send(null);

>>> Il resterait encore à mettre en adéquation le contenu html renvoyé par ta page php et ton traitement d'affichage. Là encore il existe plusieurs types de retours d'une fonction ajax : texte simple, xhtml, xml, json... tout fonctionne mais le choix dépendra surtout de ce que tu as à faire avec : pour l'affichage du formulaire je te déconseille de récupérer directement le code html du form et de l'inclure avec innerHTML : il vaut mieux le recréer par le DOM : cherche formulaire dynamique dans les contributions, il y a un post ultra populaire de SpaceFrog qui détaille parfaitement bien ce point.

Tiens-nous au jus ^^