Recharger le DOM après appel AJAX
Hello !
Je me pose des questions existentielles sur la (les?) bonnes pratiques à appliquer pour appeler mes fonctions jQuery / jQuery UI. Je suis en fait coincé sur un projet où je me retrouve avec des appels dans tous les sens, du coup 1 fois sur 2 j'en ai la moitié qui pètent.
Prenons un exemple concret. Je veux créer une page administrant des utilisateurs. Cette page est composée comme suit :
- à gauche, un tableau d'utilisateurs. Ce tableau est paginé, lors d'un clic sur "next", "last", le tableau se recharge via un appel AJAX. Pas de soucis là dessus.
- à droite, un bloc contenant des "permissions". On peut associer les permissions à un utilisateur, en faisant glisser une permission vers la ligne de tableau souhaitée.
Pas de soucis non plus, avec jQuery UI et des appels AJAX ça tourne.
Voilà donc le code auquel j'arrive :
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
| $(function(){
// Mes "permissions" sont des bloc de classe ".permission", je les rend "draggable"
$( "#dragging_area .permission" ).draggable({
revert: true,
opacity: 0.7,
helper: "clone"
});
// Mes cellules de tableau ont une classe .cell_permissions, ce sont elles qui doivent recevoir les permissions, je les rend "droppable"
$( ".cell_permissions" ).droppable({
accept: ".permission",
activeClass: "av-state-active",
hoverClass: "av-state-hover",
drop: function( event, ui ) {
// Léger bouzin pour faire tourner la requete, mais là n'est pas le soucis
var perm_id = $(ui.draggable).attr('id').substring(11);
$(this).html('<img src="/avEssentialsPlugin/images/ajax-loader.gif" />');
$(this).load($(this).attr('id'), {'id': perm_id});
}
});
});
// Un peu plus loin, j'ai une fonction permettant de changer de page de mon tableau : les cellules .cell_permissions font partie de ce tableau et sont donc aussi rechargées
function changePage(url)
{
$('#av-admin-table-body').empty();
$('#av-manager-table-loader').show();
$('#av-manager-table-total').load(url, function(){
$('#av-manager-table-loader').hide();
});
} |
Le problème est que ces deux fonctionnalités se font la gueule :zekill: et je les comprend bien : mes fonction "draggable" et surtout "droppable" de jQuery UI sont appelées dans la fonction document.ready, donc appliquées une fois, au chargement de ma page. Lorsque je recharge le tableau, les nouvelles lignes ne voient jamais la couleur de "droppable" ...
Je pourrais très bien re-faire un coup de $( ".cell_permissions" ).droppable(...) dans un callBack de ma fonction changePage/load, mais le droppable n'est ici un exemple : comment organiser son code lorsqu'on a 2, 3, ... n appels à exécuter, sur du contenu récupéré via un appel Ajax ?
Pour l'instant j'ai pensé à plusieurs piste :
- privilégier l'utilisation des "onclick", "onchange", etc. ... qui sont donc en dur dans le code récupéré via AJAX.
- surcharger la fonction load() par une fonction load() réecrite qui appelerait systématiquement document.ready en callBack (j'ignore si c'est possible)
- arrêter le dev' web et partir élever des bouquetins en Kabylie
Voila je rame un peu, et jQuery n'est pas ma spécialité je m'embrouille encore un peu avec les notions de DOM, document.ready, évenement, etc., donc je suis preneur de toute piste ou élément de refléxion
Merci d'avance,
Baptiste
