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

  • 1
  • 2
Réponse 1 / 28
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
Finalement!
Après de longues nuits sans sommeil je suis parvenue à ce que je voulais et pour ceux que ça intéressent voici les codes:

voirlist.js

function voirList(el) {
  
var xhr;
try { xhr = new XMLHttpRequest(); }
catch (e) {
xhr = new ActiveXObject(Microsoft.XMLHTTP);
             } 
xhr.onreadystatechange = function () {
if (xhr.readyState == 4)
if (xhr.status == 200)
document.getElementById("mydiv").innerHTML=xhr.responseText;
        else
alert(xhr.status);
}

xhr.open('POST', 'ajax.php', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhr.send('ajax=' + el.options[el.selectedIndex].value);
      }

ajax.php
<?php

if ( isset($_POST['ajax']) ) {
 switch ($_POST['ajax'] ){

case'page 1':include('p1.php');

break;

case'page 2':include('p2.php');

break;

case'page 3':include('p3.php');

break;

case'page 4':include('p4.php');

break;

case'page 5':include('p5.php');

break;

default:include ('p1.php');

break;
   }

   }

?>

index.php
entre les balises et ajouter:
<form action ='#' >

  <fieldset>

    <legend>Theme</legend>

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

<select id="list" onChange="voirList(this)">

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

 <option value="p1" >Page 1</option>

 <option value="p2" >Page 2</option>

  <option value="p3" >Page 3</option>

  <option value="p4" >Page 4</option>

  <option value="p5" >Page 5</option>

 

</select>

</fieldset>

</form>

et le div qui recevra le texte:

Je crois qu'il n'y a pas d'erreurs. Pas si compliqué mais j'ai quand même cherché longtemps et finalement je l'ai monté à ma sauce. Le div est rechargé sans recharger la page en méthode POST avec ce satané bazar de SELECT!  (Ca marche sous FF. Pas testé sous IE.) Maintenant faut que je trouve où cliquer pour marquer "résolu"! Ca devrait prendre moins de temps...Bonne journée! (désolée pour le format c'est pas très beau...mais bon, ça marche!)
3
Réponse 2 / 28
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
24 mars 2009 à 23:50
Oh ! Je ne sais pas trop quoi te répondre mais comme personne ne t'as répondu...

As-tu pensé à utiliser une iFrame. Tu pourrais appelé ta page PhP dans la frame ou même que ton Div soit dans la frame ;)

Mais je ne crois pas répondre à ta question,

JDMCreator
0
Réponse 3 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
25 mars 2009 à 00:10
Merci d'avoir répondu! Ca fait plaisir!!!Même si je crois effectivement que ça n'y répond pas tout à fait.
Je cherche à ne pas utiliser les frames ou iframes.
S'il y a un moyen avec ajax de rafraichir un div avec la méthode GET je me dis que ce ne doit pas être impossible avec POST à partir d'un select. Mais chaque fois que je trouve un script sur un forum ça parle de table SQL et des formulaires, blablabla, et le script devient obscur pour moi qui débute juste avec ajax. Je veux juste amener un texte via un select, et pis c'est tout. T'as pas une autre piste...(snifff)?
Merci, en attendant!
0
Réponse 4 / 28
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
25 mars 2009 à 09:05
Bonjour,

select ou pas, ajax c'est possible en get ou en post
la réponse du serveur est retournée dans une variable,
tu en fais ce que tu veux, donc pourquoi pas afficher dans un div.
faire une ch'tiote recherche sur "ajax" ( ou "xmlhttprequest" ) dans codesSources
et/ou sur la toile ==> foultitudes de réponses ( et c'est 10 lignes coté javascript ! )

Cordialement
0

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

Posez votre question
Réponse 5 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
25 mars 2009 à 13:23
En fait je peux l'envoyer en POST et l'afficher dans un div. J'utilise xmlhttprequest en méthode GET pour des lies dans mon menu. Mon problème c'est de trouver comment faire avec le select en méthode POST pour qu'il ne me rafraichisse pas toute la page.
Exemple: j'ai un diapo en haut de la page...et il recommence indéfiniment à chaque appel. Une colonne ouverte avec scriptaculous sur la gauche se referme de même à chaque onClick sur une option.
Je cherche toujours...mais pour l'instant je tombe sur des trucs super complexes et pas justement ces quelques lignes de script. J'imagine que ça doit pas être bien compliqué...j'arrive juste pas à trouver ce que je cherche. J'envisage d'abandonner le select mais ça m'énerve...j'aimerais bien connaître l'astuce.

Cordialement,
Gabi26
0
Réponse 6 / 28
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
25 mars 2009 à 13:46
>>comment faire avec le select en méthode
POST
select en method post ?
ça ne veut rien dire ça ?
tu peux appeler le php avec ajax avec method post
suite au choix d'une option dans un select, ça oui

>> pour qu'il ne me rafraichisse pas toute la page.
ben.... c'est ajax ça.
la réponse du serveur avec ajax n'est pas affichée
mais retournée dans une variable js, donc tu en
fais ce que tu veux

>>J'utilise xmlhttprequest en méthode GET pour des lies dans mon menu.
d'autant plus, si tu utilises tu as tout ce qu'il faut
( au get ou post prsè, mais ça ne change rien
  $_POST coté php, et les paramètres transmis
  dans le send coté js, rien d'autre )
0
Réponse 7 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
25 mars 2009 à 14:18
Merci pour tes réponses.
Je continue de chercher. je crois que jai compris et m'en vais de ce pas...réessayer!(trifouiller du côté de la variable et du send)
Je te tiens au courant...!
Merci à toi.
Bonne journée.
0
Réponse 8 / 28
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
25 mars 2009 à 14:30
>>je crois que j'ai compris
alors.. c'est nickel !   tu vas trouver comment faire.
@+
0
Réponse 9 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
25 mars 2009 à 20:56
Juste pour info je te dis où j'en suis, càd...toujours aussi bloqué même en simplifiant...Voici les bouts de code.

(Pour ajax.js)

var xhr = null;
    {
    if(window.XMLHttpRequest)
       xhr = new XMLHttpRequest();
    else if(window.ActiveXObject)
    {
    try    {
    xhr = new ActiveXObject("Msxm12.XMLHTTP");
    }
    catch (e)    {
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    else
    {
       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest.");
       xhr=false;
    }
  
function go() {
var xhr = getXhr ()

xhr.onreadystatechange=function ();
{if (xhr.readyState 4 &&xhr.status 200)
{
document.getElementById ('rub').innerHTML = xhr.responseText;
}
}
xhr.open("POST",'preambule.php',true);
xhr.setRequestHeader ('Content-Type','application/x-www-form-urlencoded');
sel=document.getElementById ('rub');
idrub=sel.options[sel.selectedIndex].value;
xhr.send("idrub="+idirub);

Et à l'intérieur de "index.php" (ai mis qu'une seule option pour essayer en appelant seulement une page php prédéfinie)

<form action=' ' method="POST">
 <fieldset>
 <legend>Traduction</legend>
 <label for="rub">Rubriques</label>

<select id="rub" onchange="go ();">
<option value="1" >-------------</option>
 <option value="preambule" >Pr&#233ambule</option>
 </select>
</fieldset>
</form>

Je m'approche j'espère mais ça ne veut rien savoir. Or je n'en suis qu'au début car je dois pour chaque option appeler une page php différente et la placer dans un div précis. (ce que j'arrive à faire quand ils 'agit d'un lien qui appelle, avec ajax et la méthode GET, une page php spécifique ...Mais j'y viendrais en temps voulu).
Allez zou! je garde courage! Si tu peux toutefois m'éclairer une fois de plus... merci d'avance. Bonne soirée.
J'y retourne....
0
Réponse 10 / 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 à 10:16
page "appel"





    <script>

    function envoieRequete(url)

    {    var xhr_object = null;

        if     (window.XMLHttpRequest)

                  {    xhr_object = new XMLHttpRequest();    }

        else    {    if     (window.ActiveXObject)

                    {    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");    }

                 }

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

        xhr_object.onreadystatechange = function()

            {    if ( xhr_object.readyState == 4 )

                {    document.getElementById('iddiv').innerHTML = xhr_object.responseText;

                    document.getElementById('nom').onchange=function()

                    {    alert(this.selectedIndex);    };  // pour voir, c'est tout

                }

            }

        xhr_object.send("");

    }

    envoieRequete("p1.php");

    </script>






 p1.php :



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

    <fieldset>

    <legend>Thème</legend>

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

    <select id="nom"

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

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

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

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

    </select>

    </fieldset>

</form>




ça baigne. pas regardé pourquoi par rapport à toi ;o)
0
Réponse 11 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 11:48
Merci Bul3.
heureusement que t'es là pour m'envoyer quelques lignes d'inspiration!
Je regarde je teste je compare  je bidouille et bricole et... je te réponds. Merci. A tout'
0
Réponse 12 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 13:02
Bon ben c'est triste à dire mais non seulement ça marche pas  mais j'ai même pas l'alerte. Comment c'est possible?

Voilà ce que j'ai tenté, sans plus de chance:

function go(url) {
var xhr = null;
{
 if(window.XMLHttpRequest) // Firefox
{xhr = new XMLHttpRequest(); }
else {
if (window.ActiveXObject) // Internet Explorer
{    
xhr=new ActiveXObject("Microsoft.XMLHTTP");}
}
}
      
xhr.open("POST",url,true);
xhr.onreadystatechange=function ();
{if (xhr.readyState 4 &&xhr.status 200)
{

document.getElementById ('orange').innerHTML = xhr.responseText; //'orange' est l'id du div qui doit contenir la page php appelée

document.getElementById ('rub').onchange=function() //'rub' id du select
{alert (this.selectedIndex);};
}
}
xhr.setRequestHeader ('Content-Type','application/x-www-form-urlencoded');
xhr.send("");
}
go('preambule.php');//la page php appelée en sélectionnant une option

Mais pourquoi je vois même pas l'alerte!? Ca marche pour toi? Grrrr...Merci pour ton post en attendant! Si tu vois où est l'erreur... c'est avec plaisir que je me ferai remonter les BRETELLES! A +
0
Réponse 13 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 13:07
Ah et j'ai oublié le select:

<form action='#' method="POST">
  <fieldset>
    <legend>Thème</legend>
    <label for="rub">Rubriques</label>
<select id="rub" >
<option value="1" >-------------</option>
 <option value="preambule" >Pr&#233ambule</option>
 <option value="portage" >Portage salarial</option>
  blablabla
 
</select>
</fieldset>
</form>

Plus loin dans la même page, soit index.php

Page preambule.php:

Preambule
blablablabla
0
Réponse 14 / 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 à 13:22
bah.... essaye ce que je t'ai mis : ça baigne.
tu dois te gourer dans un ID, dans l'url... ou ailleurs ?
au fait, je ne sais plus si déjà mis :
Navigateurs |Quelques Explications |----
Chrome
, contrôler page actuelle / Options pour développeurs
/ Console Javascript, ----
FireFox
, Outils / Console d'erreurs
et mieux : télécharger FireBug, ----
Internet
Explorer
, activer le deboggage : Outils/options Internet/Avancés
dans la liste, sous "Navigation" : décocher
o Afficher une notification de chaque erreur de script
o Désactiver le débogage de Scripts (Internet Explorer)
et mieux ( pour IE < 8 ) : télécharger le Debogger IE
voir aussi : DebugBar et Companion JS, ----
K-Meleon
, utils / Cons, ----
Opera
, utils / Asole d'erreurs, ----
Safari
, Debug / Show JavaScript Console
° modifier Fichier com.apple.Safari.plist situé dans le
répertoire : Support:\Documents and Settings\utilisateur
\Application Data\Apple Computer\Safari\Preferences\
y ajouter <key>IncludeDebugMenu</key>
----
0
Réponse 15 / 28
gabi26 Messages postés 38 Date d'inscription jeudi 19 mars 2009 Statut Membre Dernière intervention 12 avril 2009
26 mars 2009 à 13:36
Merci!
J'ai bien Firebug et il signale une erreur de syntaxe dans la ligne onreadystatechange...
Je l'ai cependant écrite correctement.
Peut-être voit-il un problème dans la fonction...Je sens que je tourne en rond!
je retourne à ton script même si j'ai déjà tout essayé. Si l'alerte ne s'affiche pas ce n'est pas qu'il ne voit pas la requête? Parce que là il voit rien...mais vraiment rien du tout!
0
Réponse 16 / 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 à 13:58
tu sais, si un navigateur te dis qu'il y a une erreur,
c'est qu'il y en a une !

xhr.onreadystatechange=function ();
0
Réponse 17 / 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:25
Je n'avais pas oulié le point virgule ni fait de faute pour le xhr.onreadystatechange(); . Mais tu as raison il y a bien une boulette quelque part. Seulement là je cale... enfin presque puisque je continue de chercher.
J'ai fait un test avec un petit script (tout fait dans un tuto). En sélectionnant une option et en cliquant sur un lien pour lancer la requête le serveur doit me retourner la variable en m'indiquant la valeur sélectionnée. Rien de bien compliqué. ET bien rien! Le serveur me retourne que d'chi... Faut le faire quand même!Par contre Firebug bloque sur une accolade de fermeture..."syntax error". J'ai essayé de la mettre en bout de ligne ou en return. J'ai essayé de l'isoler (toute seule sur la ligne)...Bref "syntax error". J'aime bien Firebug mais là il m'aide pas...
0
Réponse 18 / 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:32
>>Je n'avais pas oublié le point virgule
??  il n'en faut pas !!!
0
Réponse 19 / 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:32
Je vais reprendre un de mes scripts pour appeler une page php par ajax avec la méthode GET  (qui marche très bien).
Et je vais essayer de l'adapter à nouveau à mon select en regardant de plus près ton script et celui que j'ai trouvé.
je suis tenace!!! Te tiens au courant.
Si toi tu vois d'autres pistes à explorer...?
J'ai besoin de tester l'envoi de la requête...parce que c'est quand même bizarre que l'alerte ne s'affiche pas.
Bonne journée!
0
Réponse 20 / 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:35
Bon ben j'ai vu... l'état vaut 1. Merci Firebug!
0
Rejoignez-nous