Problème innerHTML sur IE

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Problème innerHTML sur IE

par VaN » 22 avr. 2008, 22:33

trouvé, après 2 jours à se prendre la tête dessus.

Je poste la cause de mon erreur, car je suis sûr que je ne dois pas être le seul à buter sur de l'ajax, àa servira à d'autres :

J'utilisai le mot "pagination" à la fois pour l'id de mon div recueillant la pagination, et la fois pour le nom de la variable recueillant le contenu de ma nouvelle pagination générée en AJAX.

Solution trouvée sur un vieux post datant de 2004, sur le forum d'alsacreations (IE, à cette époque, semblait transformer les id html en variable Javascript, et ça à l'air d'être toujours le cas, 4 ans après..)

Problème innerHTML sur IE

par VaN » 20 avr. 2008, 01:09

Bonjour,

sur une page, j'affiche un tableau HTML, contenant des entrées de ma base de données. J'ai également un système de filtres, reposant sur 2 <select>, chacun lançant une fonction javascript sur le onChange. Cette fonction JS apelle un fichier ajax.php, qui opère une nouvelle requete SQL en fonction des filtres. 2 <div> sont alors reparsés, grâce à un .innerHTML, le <div> affichant le tableau, et le <div> affichant un système de pagination (car l'un des filtres sert à choisir le nombre de lignes affichées par pages).

Ce système un peu lourd fonctionne parfaitement sous FF. Par contre je rencontre un problème sous IE :
Mon premier <div>, celui contenant le tableau se mets correctement à jour, quelque soit les filtres que j'opère. Par contre, le deuxième <div>, contenant la pagination, ne se met jamais à jour. En cherchant sur le net, j'ai lu qu'il arrivait parfois que IE, en cas de multiples .innerHTML, comprenait le premier, mais pas les suivants. La solution donnée était de passer par le DOM. J'aimerai éviter pour le moment cette solution. Est-il possible de résoudre mon problème facilement, en restant avec une utilisation des innerHTML ?

les 2 filtres :

Code : Tout sélectionner

<form action="" name="formFiltres" method="post"> <div id="itemsPerPage"> Afficher : <select name="itemsDisplayed" id="itemsDisplayed" onchange="addFiltre(document.getElementById('filtre').value, <?php echo $_SESSION['user_id']; ?>, <?php echo $firstItem; ?>, this.value, 'updItems', <?php echo $concoursToDisplayStatut; ?>);"> <option value="10" <?php if($_SESSION['itemsDisplayed'] == 10) echo 'selected="selected"'; ?> >10</option> <option value="20" <?php if($_SESSION['itemsDisplayed'] == 20) echo 'selected="selected"'; ?>>20</option> <option value="50" <?php if($_SESSION['itemsDisplayed'] == 50) echo 'selected="selected"'; ?>>50</option> <option value="100" <?php if($_SESSION['itemsDisplayed'] == 100) echo 'selected="selected"'; ?>>100</option> </select> </div> <div id="filtres"> Filtres : <select name="filtre" id="filtre" onchange="addFiltre(this.value, <?php echo $_SESSION['user_id']; ?>, <?php echo $firstItem; ?>, document.getElementById('itemsDisplayed').value, 'updFiltre', <?php echo $concoursToDisplayStatut; ?>);"> <option value="tous">Tous</option> <option value="new">Concours &agrave; trier</option> <option value="toDo">Concours &agrave; faire</option> <option value="today">Concours du jour</option> <option value="journalier">Concours journaliers</option> <option value="prioritaire">Concours prioritaires</option> <option value="instantgagnant">Instant gagnant</option> <option value="done">Concours faits</option> <option value="ignored">Concours ignor&eacute;s</option> </select> </div> </form>
les 2 <div> :

Code : Tout sélectionner

<div id="list"> <table width="100%" id="sortTable"> <thead> <tr> <th width="12">#</th> <th>Site</th> <th width="64">Date limite</th> <th width="80">Type</th> <th width="80">Rating</th> <td width="30">Lots</td> <td width="38">A faire</td> <td width="22">Fait</td> <td width="38">Ignor&eacute;</td> <td width="40">D&eacute;tails</td> </tr> </thead> <tbody> .... </tbody> </table> </div>

Code : Tout sélectionner

<div id="pagination"> <?php createPagination($nbPages, $currentPage); ?> </div>
la fonction JS addFiltre() :

Code : Tout sélectionner

function addFiltre(filtre, user_id, firstItem, itemsDisplayed, updAction, concoursStatut) { table = creerXHR('ajax.php?ajax=addFiltre&filtre='+ filtre +'&user_id='+ user_id +'&firstItem='+ firstItem +'&itemsDisplayed='+ itemsDisplayed +'&updAction='+ updAction +'&concoursStatut='+ concoursStatut); // document.getElementById('sql').innerHTML = sql; /* table_start = '<script type="text/JavaScript"> '; table_start += 'var sortTable = new sortableTable("sortTable",4,"str,str,str,str,date,str,str");'; table_start += 'window.onload = function(){'; table_start += 'sortTable.init();'; table_start += '}'; table_start += '</script> '; */ // On recréé le debut et la fin de la table, qu'on va concaténer sur le milieu de la table généré par l'ajax if(concoursStatut == 1) { table_start = '<table width="100%" id="sortTable">'; table_start += ' <thead>'; table_start += ' <tr>'; table_start += ' <th>Site</th>'; table_start += ' <th width="64">Date limite</th>'; table_start += ' <th width="80">Type</th>'; table_start += ' <th width="100">R&eacute;ponses</th>'; table_start += ' <th width="80">Rating</th>'; table_start += ' <td width="30">Lots</td>'; table_start += ' <td width="40">D&eacute;tails</td>'; table_start += ' </tr>'; table_start += ' </thead>'; table_start += ' <tbody>'; } else { table_start = '<table width="100%" id="sortTable">'; table_start += ' <thead>'; table_start += ' <tr>'; table_start += ' <th width="12">#</th>'; table_start += ' <th>Site</th>'; table_start += ' <th width="64">Date limite</th>'; table_start += ' <th width="90">Type</th>'; table_start += ' <th width="80">Rating</th>'; table_start += ' <td width="30">Lots</td>'; table_start += ' <td width="38">A faire</td>'; table_start += ' <td width="22">Fait</td>'; table_start += ' <td width="38">Ignor&eacute;</td>'; table_start += ' <td width="40">D&eacute;tails</td>'; table_start += ' </tr>'; table_start += ' </thead>'; table_start += ' <tbody>'; } table_end = ' </tbody>'; table_end += '</table>'; table = table_start + table + table_end; document.getElementById('list').innerHTML = table; // on init à nouveau la table, pour la rendre triable sortTable.init(); //longueurCible = document.getElementById('list').firstChild.length; //document.getElementById('list').firstChild.replaceData(0, longueurCible, table); pagination = creerXHR('ajax.php?ajax=changePagination&filtre='+ filtre +'&user_id='+ user_id +'&firstItem='+ firstItem +'&itemsDisplayed='+ itemsDisplayed +'&concoursStatut='+ concoursStatut); document.getElementById('pagination').innerHTML = pagination; }