Impossible de trouver l'élément dans DOM après l'avoir chargé avec ajax (vous voulez lier jquery à l'élément)
Donc, j'ai 2 pages html. 1 qui fonctionne comme conteneur et le 1 qui fonctionne comme contenu.
Lorsque je charge le contenu de la page avec un tableau que je suis en mesure d'utiliser le glisser-déposer.
Mais quand je vais sur ma page de conteneur et de charger le contenu de la page dans une div avec l'ajax, le faire glisser et déposer des arrêts de travail. Toutes les autres fonctionnalités javascript à l'intérieur de la page de contenu encore du travail. Comment puis-je lier le jquery, le mdn plugin à la table de chargement avec ajax?
Je suis en utilisant le drag & drop avec ce tutoriel http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
mon code ressemble à ceci:
$(window).load(function()
{ if(temp == 0)
{
DP("eerste keer")
load_table();
temp = 1;
}
} );
function load_table()
{
DP('load_table');
$.ajax({
//async: false,
type: "POST",
url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, //<== loads requested page
success: function (data) {
$("#diagnoses_zelf").html(''); //<== clears current content of div
$("#diagnoses_zelf").append(data).trigger('create'); //<== appends requested page
},
error: function(){
alert('error');
}
}).done(function() {
update_table();
initialize_table(); //<== calls jquery plug in
});
return false;
}
function initialize_table()
{
var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
alert(tableid);
$(tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
var tette = $(row).index;
alert(tette);
},
dragHandle: ".dragHandle"
});
}
Comment est-ce possible et ce que je peux faire à ce sujet?
Quelqu'un peut-il m'aider, s'il vous plaît.
Très court:
Je veux avoir accès à l'ID de la table, je charge dans mon conteneur de la page avec ajax et utiliser le jquery, faites glisser et déposez les brancher sur elle.
MODIFIER
Résultats:
En quelque sorte mon tableau dans la page conteneur fut renommé pSqlaTable au lieu de l'id que j'ai donné dans le contrôleur de la page qui est.
<table id="tableDiagnose" class="table table-hover">
C'est pourquoi le code ne pouvais pas trouver la table annymore Suis fixé par le présent code grâce à Fábio Batista:
$('#diagnoses_zelf table').tableDnD( ... );
mais comment puis-je utiliser le mdn plugin maintenant ?
Il trouve la table maintenant, mais je ne suis pas encore en mesure de lier le mdn plugin, Suis-je capable de se lier à un jquery branchez-le à l'ajax chargé de tables ?
MODIFIER
//drag & drop http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
function initialize_table()
{
var tableid = $('#diagnoses_zelf table').attr('id');
alert(tableid);
$('#' + tableid).tableDnD({
onDrop: function(table, row) {
alert(table + " " + row);
},
onDragStart: function(table,row){
alert('issemer?');
},
dragHandle: ".dragHandle"
});
}
C'est le code, je suis toujours coincé avec. tableid est correct, mais l'initialisation de l'jquery n'est pas. Je ne peux pas faire glisser les drows dans le tableau. Est ma syntaxe mal ?
MODIFIER
Pourrait-il que je ne peux pas lier le jquery à la table parce que je dynamicaly générer la table sur l'autre page avec ZPT (ou javascript) ?
source d'informationauteur
Vous devez vous connecter pour publier un commentaire.
Le problème avec les plugins.
Vous êtes de mélange beaucoup de bibliothèques externes et le code. Il en résulte possibles erreurs de correspondances entre les versions, et beaucoup de boîtes noires dans votre code.
En tant que développeur, cela devrait vous faire sentir très mal à l'aise. Avoir code vous ne comprenez pas entièrement dans votre base de code peut être vraiment frustrant vraiment rapide.
L'alternative.
Souvent, ce genre de plug-ins fournissent des fonctionnalités de nous, comme les développeurs JavaScript peut réaliser tout aussi facilement sans eux. Ce processus de développement, assez simple scénarios, nous permet de créer le code de nous comprendre et d'avoir un temps plus facile de maintenir. Non seulement nous apprendre de ce processus, mais nous créons également des petits morceaux de code spécifique. Piloté par la communauté de solutions sont très bonne en général, mais il est important de se rappeler qu'ils ne sont pas une solution miracle. Souvent, vous êtes coincé à l'aide d'un pas-si-projet actif qui a un bug spécifique à votre cas et que vous avez à creuser par le biais d'un grand inconnu de la base de code.
Votre code
Que faut-il faire glisser et déposer des plugin?
Et bien je vous le décomposer comme suit:
mousedown
événement sur les lignes de la tablemouseup
se produit, détecter, et de finaliser la position.Nous allons voir comment nous pouvons faire quelque chose de similaire.
Supposons le tableau HTML est quelque chose comme:
Voici un violon avec le table avec style appliqué
Prochaine, nous serons à l'écoute de la sélection des événements. Nous allons ajouter un événement pour les lignes de la table pour la sélection et le document de lorsque la souris est en place. jQuery a des écouteurs d'événement pour de tels événements. Puisque nous voulons que ces événements à coller, même après l'AJAX, nous allons utiliser
.on
qui nous permet de l'utiliser délégué événements..on
signifie que même si l'on ajoute le contenu de la table plus tard, il ne sera pas question.Ici, c'est un travail de violon d'un tel code.
Maintenant, nous allons vous souhaitez modifier le drag&drop de travail, c'est-à-mise à jour de la position actuelle à l'un reflétant la position de la souris. Nous pouvons écouter de la
mousemove
événements, et de détecter l'élément que nous sommes actuellement sur. Quelque chose commeVous pouvez voir un violon ici
C'est gentil, mais nous voulons réellement changer la position de l'élément. Donc nous allons avoir besoin de modifier la structure de la table pour permettre cela. Nous pouvons supprimer l'élément, et l'ajouter à la position correcte. Nous allons vérifier si nous avons un élément sélectionné, et si nous le faisons, nous pouvons le suivre par rapport à l'élément en cours dans l'événement mousemove. On peut pour commencer détecter si l'on doit faire glisser avec quelque chose comme:
(Violon)
Maintenant, nous allons ajouter de la sélection proprement dite, nous allons remplacer les éléments lorsque la cible n'est pas notre élément et nous sommes dans la table. Notre code complet doit être quelque chose comme:
(Violon)
Jusqu'à maintenant, nous n'avons que quelques lignes de code, ce qui est agréable car nous savons exactement ce qui se passe et n'a pas besoin d'utiliser beaucoup de lignes de code externe nous ne comprenons pas totalement.
Mais il sera AJAX?
Nous allons charger les données dans la table avec l'AJAX et de voir! Nous allons simuler une réponse AJAX à l'aide d'un
setTimeout
ce qui nous permettrait de simuler une requête asynchrone. Nous allons utiliserCela signifie, mettre à jour le code HTML de
#MySpecialTable
après une seconde. Nous allons voir si cela fonctionne allons-nous?Alors pourquoi faut-il travailler? bien, nous avons utilisé délégué événements ce qui signifie que nous ne se soucient pas si les éléments que nous sommes de chargement sont dans la droite de l'écran, maintenant ou pas. Nous avons eu la perspicacité de le faire puisque nous avons construit notre code nous et nous savions que notre objectif final est. La seule chose qui reste à faire est de nettoyer un peu le code.
Nous allons appliquer notre code dans la suite, pour éviter de dollars à partir d'un problème de non-conflit mode (qui est, de dollars est déjà pris dans la page:
Ensuite, nous allons ajouter une liaison pour notre table d'événement:
Finalement, notre code peut ressembler à quelque chose comme ça.
De l'utiliser, une simple
$.GertVDragTable("#MySpecialTable");
alternativement, nous pouvons le mettre sur$.fn
et permettre à chaque fonction à appeler. Qui est une question de goût.Pas de copier-pâtes s'il vous plaît 🙂 je l'apprécierais si vous vous arrêtez à chaque étape et de penser pourquoi l'étape suivante a été prise.
Vous n'avez pas besoin d'utiliser l'ID comme un sélecteur, vous pouvez utiliser n'importe quelle expression qui peut trouver votre table.
Si il n'y a qu'une seule table dans la
$.ajax
appel, vous pouvez rechercher pour "un tableau à l'intérieur du conteneur", en utilisant le numéro du conteneur, ce qui ne changera pas:Si il n'y a plus d'une table, utilisez un autre type de sélecteur, au lieu de l'ID. Une classe CSS qui fonctionne très bien:
Une
data-
attribut:Essayez d'ajouter un
title
à votre table, comme suit:Ensuite utiliser le jQuery sélecteur d'attribut pour trouver cette table au lieu de le trouver par
id
.Si votre id est en train de changer, vous ne devriez pas utiliser un ID puis:
Plugin
MODIFIER: ajax est asynchrone :
EDIT: trouvé votre bug........
vous pouvez récupérer la table id puis le sélectionner dans $(tableid) mais vous avez raté le
#
Voir la démo ici
MODIFIER
Avez-vous d'inclure le fichier de script dans la page conteneur ou dans le contenu de la page? Je suppose que vous pourriez vouloir essayer de le charger lors de l'appel du mdn plugin avec getScript:
plus sur getscript: ici
@BenjaminGruenbaum Salut merci beaucoup pour le tutoriel, j'ai modifié un peu le code pour bloquer le drag n drop sur la table des en-têtes et d'améliorer la faire glisser la fluidité de suivi de la direction de la souris.
voici le violon http://jsfiddle.net/59rdq/
J'espère qu'il sera utile pour quelqu'un.