liste déroulantes liées, innerHTML non compatible IE

liste déroulantes liées, innerHTML non compatible IE - HTML/CSS - Programmation

Marsh Posté le 02-08-2013 à 14:28:01    

Bonjour voilà tout est dans le titre j'ai 3 listes déroulantes liées, fonctionnant très bien sous Firefox mais pas sous IE. La raison est innerHtml qui n'est pas compatible avec IE. J'ai essayer plusieurs solutions comme Jquery avec $(#nondelabaliseselect).html ou OuterHTML qui ne fonctionne que pour lapremiere liste est non la 2nd. Peut-être que l'id n'est pas envoyé(alert de l'id selectionner non déclencher après l'avoir dé-commenté). Je suis tomber après sur les méthodes DOM mais là je sèche :/  
Les versions des navigateurs utilisés sont Firefox 20 et IE 7.0.
Voici les parties de code concernées :
 
Partie JS :
 

Code :
  1. function go()
  2.   {
  3.    var xhr = getXhr();
  4.    //creation d'une fonction qui s'executera à chaque changement d'etat
  5.    xhr.onreadystatechange = function()
  6.    {
  7.     //readyState = Etat de l'objet utilisé exemple 4 => Prêt | status = Code réponse du serveur exemple 200 => OK
  8.     if(xhr.readyState == 4 && xhr.status == 200)
  9.     {
  10.      //reponse retournée par le serveur au format texte
  11.      leselect = xhr.responseText;
  12.      //creation d'un objet html  
  13.      document.getElementById('antenne').innerHTML = leselect;
  14.     }
  15.    }
  17.    xhr.open("POST","refreshAntennes.php",true);
  19.    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  21.    sel = document.getElementById('service');
  22.    //on recupere le choix de la premiere liste
  23.    idservice = sel.options[sel.selectedIndex].value;
  24.    //alert(idservice); //verif que la bonne valeur est stockée
  26.    //on l'envoie pour adapter la seconde liste par la suite à partir de ce choix
  27.    xhr.send("idservice="+idservice);
  29.   }


 
partie HTML/PHP:
 
 

Code :
  1. <tr>
  2.                             <td>
  3.                                 <label for='add_service_agent'>Service</label>
  4.                             </td>
  5.                             <td>
  6.                                 <select name='service' id='service' onchange='go()'>
  7.                <option value='-1'>--Choisir Service--</option>
  8.     <?php
  9.      include("include/connect.php" );
  10.      $res = mysql_query("SELECT Id_service AS ids, Lib_service
  11.           FROM SERVICE
  12.           ORDER BY No_Service" );
  13.      while($row = mysql_fetch_assoc($res))
  14.      {
  15.       echo "<option value='".$row["ids"]."'>".$row["Lib_service"]."</option>";
  16.      }
  17.     ?>
  18.    </select>
  19.                             </td>
  20.                         </tr>


 

Code :
  1. <tr>
  2.       <td><label for='add_antenne_agent'>Antenne</label></td>
  3.       <td>
  4.         <select name='antenne' id='antenne' onchange='go2()'>
  5.              <option value='-1'>--Choisir Antenne--</option>
  6.         </select>
  7.      </td>
  8. </tr>


 
Dans cette exemple, on a un service et une antenne(appelé aussi sous-branche/section), lorsque je sélectionne un service on obtient la liste d'antennes correspondante. Pour ce faire :
- On fait appel à l'objet XMLHttpRequest qui s'occuper de mettre a jour cette liste a chaque changement de service.
- Dans la fonction JS go() on remarque que quelque chose est envoyé, c'est l'id du service sélectionner qui est envoyé via la méthode POST
- La page cible(refreshAntennes.php) contient une requête SQL qui va s’exécuter en prenant comme critère de recherche cette id.
- Enfin on récupère chacun des éléments dans la balises select qui a pour id : antenne.
 
Voilà j'espère avoir bien expliquer, merci d'avance et bonne journée :)


Message édité par furil le 02-08-2013 à 14:28:50
Reply

Marsh Posté le 02-08-2013 à 14:28:01   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed