Sujet Précédent Sujet Suivant

Rafraichir div avec select méthode POST

Résolu
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009 - 24 mars 2009 à 19:50
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009 - 29 mars 2009 à 15:02
Bonjour,

Mon premier message sur le forum qui jusque là m'a bien inspiré!Voici le Hic:
J'utilise un select pour appeler différentes pages php. Le script
utilisé est en méthode POST et je ne sais pas comment faire avec AJAX
pour rafraichir le div qui reçoit le texte sans recharger toute la
page.
J'y arrive en méthode GET au moyen de liens inclus dans un menu.
Mais avec le select je suis coincée. Aucune piste et je cherche depuis
plusieurs jours.Voici la forme élémentaire de mon sélect:

<form action="#" method="POST">

<fieldset>

<legend>Thème</legend>

<label for="nom">Rubriques</label>

<select id="nom" onChange="location.href='index.php?page='+document.getElementById('nom').options[document.getElementById

('nom').selectedIndex].value">

<option value="1" >-------------</option>

<option value="rubrique1" >Rubrique1</option>

<option value="rubrique2">Rubrique2</option>

<option value="rubrique3" >Rubrique3</option>

</select>

</fieldset>

</form>

Pour info voici le script ajax.js:

function envoieRequete(url,id)

{

var xhr_object = null;

var position = id;

if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();

else

if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

// On ouvre la requete vers la page désirée

xhr_object.open("GET", url, true);

xhr_object.onreadystatechange = function(){

if ( xhr_object.readyState == 4 )

{

// j'affiche dans la DIV spécifiées le contenu retourné par le fichier

document.getElementById(position).innerHTML = xhr_object.responseText;

}

}

// dans le cas du get

xhr_object.send(null);

}

Qu'est-ce que je suis censée écrire et y aura-t-il conflit avec mon
ajax.js qui appelle d'autres pages en méthode GET? Sinon est-ce que je
peux le transformer pour le passer en GET?

Merci de votre aide!Configuration: Windows Vista
Firefox 3.0.7

28 réponses

Précédent
  • 1
  • 2
Réponse 21 / 28
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
26 mars 2009 à 14:39
pas sur que tu me répondes "à moi"
quand je mattais le ; en gros et en rouge
c'était pour dire qu'il était en trop
donc, déjà, supprimer le !
0
Réponse 22 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 14:45
Ah ben elle est bonne celle là!
Bon: l'ai enlevé...mais ça change rien
0
Réponse 23 / 28
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
26 mars 2009 à 15:03
une autre erreur ailleurs, c'est sûr !
t'as essayé mon exemple ? il baigne, n'est-il pas.
0
Réponse 24 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 15:11
Je t'assure que là j'y pige plus rien. Bon je vais reprendre ton exemple.

Mais juste pour dire: En fait Firebug ne voit plus d'erreurs...juste il ne voit rien. Il ne m'annonce aucune erreur dans mes déclarations et je ne sais rien de l'état de l'objet (1, 2, 3 ou ...non pas 4!). La requête ne passe pas mais je ne sais pas où ça bloque. Appelez-moi "gabi-patience"!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 25 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 15:30
Bon j'y suis. Effectivement ton exemple marche au poil. Pas d'erreur, rien. RAS. Je vais tacher de le mettre à ma sauce ( c'est pas gagné!) L'autres script du tuto ne dit toujours rien. Je vais essayer aussi de voir pourquoi...
0
Réponse 26 / 28
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
26 mars 2009 à 18:57
faudrait décortiquer de près, et on n'a pas le html !
0
Réponse 27 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 20:21
Bon je vais tacher de résumé:
Dans une page (simplifiée): 2 div. L'un avec le select, l'autre pour recevoir la page appelée en php. Ce qui donne dans le body de ma page index.php:

<form action='#' method="POST">
  <fieldset>
    <legend>Thème</legend>
    <label for="rub">Rubriques</label>
<select id="rub" >
<option value="1" >-------------</option>
 <option value="page1" >Rubrique1</option>
 <option value="page2" >Rubrique2</option>//autres rubriques= autres pages en php appelées
   </select>
</fieldset>
</form>

Plus loin dans mon index.php le div qui va contenir la page appelée:

Comment, avec Ajax,  créer une fonction qui me permette d'appeler une page différente pour chaque option sélectionnée et que celle-ci me soit retournée dans mon div "orange"? Je sélectionne rubrique1 >> j'affiche page1.php dans mon div, rubrique2 >>page2.php, etc...(les pages: c'est du texte et c'est tout)

Après, méthode POST ou GET c'est pas si  important. Je veux juste pouvoir au final ne rafraichir que le div et non toute la page. C'est pour ça que je me coltine Ajax (que je vais finir par plus aimer!). Si je ne peux pas le faire c'est toute ma mise en page qui tombe à l'eau.( bien sûr je peux toujours renoncer au select...mais je m'obstine car il me résiste trop!!!)

Voilà je crois que j'ai résumé. Quant au javascript, j'ai pas trouvé mieux que ce que je t'ai envoyé alors je le remets pas. Je reste connectée!!!
0
Réponse 28 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 21:07
Au fait: avant de chercher compliqué j'avais cela (pur php, un simple onChange et des includes),
inclus dans le body:

<form action='#' >
  <fieldset>
    <legend>Theme</legend>
    <label for="rub">Rubriques</label>
<select id="rub" onChange="location.href='index.php?page='+document.getElementById('rub').options
[document.getElementById('rub').selectedIndex].value;">
<option value="1" >-------------</option>
 <option value="page1" >Rubrique1</option>
 <option value="page2" >Rubrique2</option>
  BLABLABLA
   </select>
</fieldset>
</form>

Et plus loin, toujours dans la même page, ça:

<?php
switch(@$_GET['page'])
{
case'rubrique1':
include('page1.php');
break;

case...BLABLABLA


}
?>



Ca marche nickel! Mais maintenant faut que je trouve le moyen de ne pas rafraichir toute la page à chaque option sélectionnée...Voilà j'ai tout dit!
0
Rejoignez-nous