[AJAX] Onchange sans rafraichir la page

Version imprimable

17/08/2009, 10h16
mme_chelaou

[AJAX] Onchange sans rafraichir la page

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
17/08/2009, 10h32
supersnail

Bonjour,
Quelle méthode utilises-tu?

Un bout de code serait le bienvenu pour qu'on puisse te répondre...
17/08/2009, 10h34
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.

Voilà mon code

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

Code:

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:

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:

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
}
}
?>

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

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:

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