Recharger le DOM après appel AJAX

[Maerlyn31]

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 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

[galerien69]

salut,

Comme tu l'as précisé l'appel dans un callback est une possibilité.
Par exemple, au lieu de faire une fonction anonyme,

Code :

$(function(){...});

tu pourrais faire une fonction initBouzin();
que tu appeles ensuite

Code :

$(document).ready(initBouzin);

Puis dans le callback, simplement appeler initBouzin();
Bien sûr, s'il faut détruire des trucs (unbinder des events par exemple), tu peux très bien faire un objet qui présente les méthodes initBouzin, unbindBouzin.

Une deuxième possibilité est l'utilisation des events avec trigger et bind.
Dans ton $(document.ready(){...});, tu peux par exemple faire un

Code :

1
2
//appele initBouzin si l'évent updateBouzin est lancé
$(document).bind('updateBouzin', initBouzin);

et dans ton callback

Code :

$(document).trigger('updateBouzin');//envoie l'évènement updateBouzin

Je préfère personnellement la première, parce que l'appel est direct. L'intérêt des events c'est quand tu veux pas te trimballer un objet au sein d'un callback, où par exemple si tu as plusieurs noeuds qui doivent réagir face à un event. Mais ici, ca a pas l'air d'être le cas.

[Bovino]

Je pense que ton salut passe par live() (et celui des bouquetins de Kabylie par la même occasion )

[Maerlyn31]

Merci à vous deux pour votre réactivité

Pour l'instant je n'ai pas spécialement d'event ou d'objets à balader, donc je pars plutôt sur une solution comme proposé par Galerien69.

Etant donné que je bosse sur du "pseudo CMS" parti à priori pour être utilisé un moment, ma peur concerne surtout la lisibilité du code avec ce genre de solution. Mais bon, au pire je me retrouverais avec un initPage inbuvable, remplaçant un $(document).ready() inbuvable

Par contre la fonction live() m'avait l'air intéressante pour le futur, mais une (très superficielle ^^) recherche sur Google m'a renvoyé vers des articles déconseillant fortement son usage, et préconisant l'usage de .delegate() ou autre réjouissances ...
Une chose est sûre en tout cas, il y a encore beaucoup de concepts en javascripts qui restent super flou pour moi. C'est bien joli de faire un $('.class').click().toggle(), mais ça n'explique pas comment binder ses event sur des trigger de repopulate d'xhr object j'ai plus qu'à retourner bosser !

Un peu hors sujet mais un petit point qui me travaille aussi : y a-t-il des symfoniens (1.4) dans la salle ? Si oui, utilisez-vous des gestionnaires d'assets plus poussés que les fichiers view.yml d'origine ? Je cherche encore un peu avant de me lancer dans un plugin maison pour faire ce boulot, mais déléguer le travail de structuration du jvs à un gestionnaire bien fait permettrait de zapper pas mal de la question de maintenance du code

[danielhagnoul]

Bonjour

Si la partie droppable est modifiée par une transaction AJAX, il faut la détruire et la reconstruire.