[Jquery] traversing haut et bas
Bonjour,
Avant de vous poser ma question, voici une explication du contexte:
Je développe actuellement un application avec JQuery dans laquelle
il y a des boutons qui produisent des appels Ajax vers php pour du traitement
et dont le résultat met à jour des éléments de ma page. Problématique
tout a fait classique.
Je cherche à simplifier mon code javascript pour gérer ces boutons.
Un de mes problèmes récurrent est que le résultat d'une action ajax/php
me retourne des fragments html qui comportent de nouveaux boutons.
Pour éviter de devoir réassigner des gestionnaires de clic sur ces boutons
après mise à jour d'un élément, je gère un seul clic au niveau de la page.
Le code de mes boutons ressemble à ceci:
<a class='action' href='/ajax/une_action?p1=v1' rel='#id span'>Libellé</a>
Et mon code (en version simplifiée) ressemble à ça:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
$(document).ready( function() {
$(document.body).click(function(event) {
var target = $(event.target);
if(target.hasClass('action')) {
event.preventDefault();
var url = target.attr('href');
var rel = target.attr('rel');
$(rel).load(url);
}
});
}); |
En gros, si l'utilisateur clique sur un bouton je le détecte par remontée sur
le document.body, je test la présence de la classe 'action', évite le traitement
par défaut puis extrait l'url et l'attribut rel.
J'utilise l'attribut rel comme sélecteur pour la zone à modifier. puis lance ma requête Ajax.
Mon objectif est de traiter toutes mes actions avec un code javascript minimaliste
L'attribut 'rel' me sert à indiquer l'élément qui doit être mis à jour suite à
la requête Ajax. Dans certains cas il s'agit d'un élément dont j'ai l'Id, alors
un simple rel='#id' suffit.
Dans certains cas, c'est l'élément parent du bouton, par exemple le 'td'
représentant la cellule dans laquelle se trouve mon bouton.
Dans d'autres cas c'est le tbody d'une table et le bouton se trouve dans
une cellule du thead
Pour l'instant j'ai inventé une syntaxe 'bricole' qui permet de résoudre
ce problème, par exemple: rel='^table tbody' où le symbole ^ signifierait
de rechercher le parent de type table depuis l'emplacement de mon
bouton, puis de redescendre pour trouver le tbody.
Les sélecteurs css de JQuery sont très bien pour descendre dans l'arborescence.
Ma question est donc la suivante:
Connaissez-vous une syntaxe adaptée pour faire des sélections plus complètes
qui permettent de remonter puis redescendre dans l'arborescence du DOM ?
et mieux encore, une implémentation JQuery :-) ?
