Propriété JS qui cesse de s'appliquer à un tableau Ajax
Bonjour à tous,
Pour situer le contexte de mon problème je créer un tableau d'utilisateur via une requête Ajax. Une fois que cette événement est terminer j'applique aux éléments de mon tableau des actions JS. Mon problème est que ces événements s'applique bien au 90 premiers éléments de mon tableau mais passé celui-ci le JS n'est plus appliqué. J'ai fais des tests dans tout les sens le problème survient toujours au même endroit, sans distinction d'utilisateur.
Pour générer ce tableau j'utilise jquery, bootstrap et ce théme: http://theme.eakroko.de/flat. Pour info le thème tableau que j'utilise est dans table > large table et c'est le tableau Dynamique Ajax Loading en bas de page.
J'ai pour ma part enrichi ce tableau de contenu html.
Donc une fois mon tableau généré par ma requête Ajax j'applique ces événement:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| $(document).ajaxComplete(function() {
$('#error_expand').parent().css('line-height', '150px');
$(".dataTables_scrollBody").each(function() {
$(this).css('height', '550px');
});
$('#DataTables_Table_0_filter').before('<div class="button-add pull-left"><a href="solution.php?action=sol_usr_add_form"><button title="" type="button" class="glyphicon-user_add btn-primary btn-large"></button></a></div>');
saveAvailableStorage(domain_id);
displayModal(action, domain_id);
colorCells();
//pour que la methode ajaxComplete ne soit appelé qu'une fois au chargement du tableau d'utilisateur et non à chaque appel Ajax
$(document).unbind("ajaxComplete");
}); |
je vous met aussi le code HTML de 2 lignes du tableau une ou le JS s'applique bien et une ou ça ne fonctionne pas
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| //avec le JS appliqué
<tr class="even">
<td class=" sorting_1">slash</td><td class="">7limpidd</td>
<td class=""><span class="pull-left">Basic</span><button name="solution_4" type="button" class="openmodal btn-lg glyphicon-edit btneditsol pull-right" rel="tooltip" title="Modifier la solution"></button></td>
<td class=""><button type="button" class="btnmodal btn-info openmodal" name="option_4">Aucune option</button></td>
<td style="background-color: rgb(223, 240, 216);" class=""><span class="colored">0,00%</span></td>
<td class=""><select class="maxstorage" name="MaxAccountSize" id="4" style="width :75px"></select><input id="storageSize_4" value="30G" type="hidden"></td>
<td class=""><a href="solution.php?action=sol_set&Name=slash"><button rel="tooltip" title=" Editer" type="button" class="btn-primary icon-edit hover-blue update"></button></a>
<button type="button" rel="tooltip" title="Effacer" name="delete_4" class="btndelete btn-danger hover-red update_delete icon-remove-sign openmodal"></button></td>
</tr>
//sans le JS appliqué
<td class=" sorting_1">spinoza</td>
<td class="">toto</td>
<td class=""><span class="pull-left">Basic</span><button name="solution_317" type="button" class="openmodal btn-lg glyphicon-edit btneditsol pull-right" rel="tooltip" title="Modifier la solution"></button></td>
<td class=""><button type="button" class="btnmodal btn-info openmodal" name="option_317">Aucune option</button></td>
<td class=""><span class="colored">0,00%</span></td>
<td class=""><select class="maxstorage" name="MaxAccountSize" id="317" style="width :75px">...</select><input id="storageSize_317" value="1G" type="hidden"></td>
<td class=""><a href="solution.php?action=sol_set&Name=spinoza"><button rel="tooltip" title=" Editer" type="button" class="btn-primary icon-edit hover-blue update"></button></a>
<button type="button" rel="tooltip" title="Effacer" name="delete_317" class="btndelete btn-danger hover-red update_delete icon-remove-sign openmodal"></button></td> |
La seul différence visible ici est au niveau du background-color de la 5eme cellule. Mais cela impact aussi tout mes boutons d'actions.
Je précise enfin que je n'ai aucune erreur de la console.
Si vous avez ne serait-ce qu'un embryon de piste je suis preneur car je sèche totalement là!
Merci
