Réinitialisation d'une liste déroulante après requete ajax

Signaler
Messages postés
260
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
5 novembre 2010
-
cs_lowkey
Messages postés
260
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
5 novembre 2010
-
Bonjour,

Voici ce que je développe :
une question s'affiche, les réponses sont dans une liste déroulante.
Lorsque je sélectionne une réponse, la question suivante apparait(elle se trouve dans une bdd), mais la liste déroulante où se trouve la réponse 1 reprend son index d'origine.

Voici mon code:

function go(num,rang,rep){
 var xhr = getXhr();
 xhr.onreadystatechange = function(){  if(xhr.readyState 4 && xhr.status 200){
   leselect = xhr.responseText;
   document.getElementById('quest').innerHTML=document.getElementById('quest').innerHTML+leselect;
  }
 }
 xhr.open("POST","/module_devis/question_suivante.php",true);
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 xhr.send("nqu="+num+"&rang="+rang+"&rep="+rep);
}

Est-ce normal ?





<hr />

lowkey

8 réponses

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
Bonjour,
    si j'ai compris : il doit "rester" un<option selected> dans responseText ?
    peut-être ?
    quoique, comme
        document.getElementById('quest').innerHTML=
            document.getElementById('quest').innerHTML+leselect
        ça ajoute à ce qui existe... faut voir.


<hr />                Cordialement            Bul        
Messages postés
260
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
5 novembre 2010
1
Salut bultez !!

Exactement, le code est cencé ajouter la question à la suite (ce qu'il fait), et l'option qui est 'selected' doit le rester.
Or, après l'ajout, ma liste déroulante se positionne sur mon premier 'option'.
Cela peut-il venir du faite que je lance ma requete sur le 'onclick' des 'option'? :

$list=mysql_query("SELECT * FROM reponse WHERE id_question=".$q1[0]);
$rep="<select><option value='0'></option>";
while ($l=mysql_fetch_row($list))
{
     $rep.="<option value='".$l[0]."' onclick='go(".$l[3].", 1, ".$l[0].")'>".html_entity_decode(stripslashes($l[1]))."</option>";
}
$rep.='</select>';

<hr />
lowkey
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
1° le selected est positionné en PHP, je suppose
       enfin... devrait l'être
       on ne voit pas ici ( mais c'est est souci php à priori )

2° onclick sur une option est exclusif "moteur gecko",
       ça ne fonctionnera pas avec IE

<hr />                Cordialement            Bul        
Messages postés
260
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
5 novembre 2010
1
Merci pour ta réponse aussi rapide.

Effectivement, sous IE, ça ne marche pas.

Je viens de modifier ma fonction go() :

function go(num,rang,rep){
 var xhr = getXhr();
 // On défini ce qu'on va faire quand on aura la réponse
 xhr.onreadystatechange = function(){
  // On ne fait quelque chose que si on a tout reçu et que le serveur est ok  if(xhr.readyState 4 && xhr.status 200){
   leselect = xhr.responseText;
   // On se sert de innerHTML pour rajouter les options a la liste
   if(document.getElementById('que'+(rang+1)))
   {
    document.getElementById('que'+(rang+1)).parentNode.innerHTML=leselect;
   }else
   {
    document.getElementById('quest').innerHTML+=leselect;
   }
   
  }
 }


 xhr.open("POST","/module_devis/question_suivante.php",true);
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 xhr.send("nqu="+num+"&rang="+rang+"&rep="+rep);
}

Si je suis à la question 3 (par exemple), je change la réponse à la question 1, je fais changer la question 2, mais je ne la rajoute pas sinon j'aurais deux fois la question 2.
Dans ce cas là, la réponse (question 1) reste dans ma liste déroulante. Ca n'a donc pas l'air de venir de php.
Je suis vraiment perdu là...

Sinon, que me conseilles-tu à la place du 'onclick'? Je souhaite garder ma fonction go() dans l'element 'option'.

Merci





<hr />

lowkey
Messages postés
260
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
5 novembre 2010
1
Oups, j'oubliais...

Je ne sais pas si c'est important, mais il vaut mieux le dire. l'élément ayant l'id 'quest' est un <table/>
et les éléments ayant les id 'que1', 'que2', ... sont les <tr/> de ce <table/>

<hr />
lowkey
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
avec IE,    sur les select
    pas de innerHTML
    pas de onclick ( ou autres ) sur les options

    quelques explications ici

    et si on parle de select liés entr'eux
       ce qui pourrait t'aider ? ,
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
>>souhaite garder ma fonction go() dans l'element 'option'.
    ne marche pas avec IE


<hr />                Cordialement            Bul        
Messages postés
260
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
5 novembre 2010
1
Merci bultez.

Les selects ne sont pas liés entre eux.
J'ai trouvé ce qui me bloquait au niveau des index des select :

document.getElementById('quest').innerHTML+=leselect;
Ce bout de code n'ajoute pas seulement 'leselect', mais il réécrit tout l'element ayant l'id 'quest'.

J'ai donc essayé d'autres méthodes :

document.getElementById('quest').insertData(leselect);
et
var reste = document.createTextNode(leselect);
document.getElementById("quest").appendData(reste.nodeValue);

mais aucun ne marche...

Pour ce qui est de l'incompatibilité IE, je vais aller voir le lien que tu m'as donné.

Merci

<hr />
lowkey