[DOM] Tableau, innerHTML et IE
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <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 à trier</option>
<option value="toDo">Concours à 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és</option>
</select>
</div>
</form> |
les 2 <div> :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <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é</td>
<td width="40">Détails</td>
</tr>
</thead>
<tbody>
....
</tbody>
</table>
</div> |
Code:
1
2
3
| <div id="pagination">
<?php createPagination($nbPages, $currentPage); ?>
</div> |
la fonction JS addFiltre() :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| 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éponses</th>';
table_start += ' <th width="80">Rating</th>';
table_start += ' <td width="30">Lots</td>';
table_start += ' <td width="40">Dé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é</td>';
table_start += ' <td width="40">Dé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;
} |
