javascript getelementbyid - Impossible de trouver l'élément dans DOM après l'avoir chargé avec ajax (vous voulez lier jquery à l'élément)




3 Answers

Le problème avec les plugins.

Vous mélangez beaucoup de bibliothèques externes et de code. Cela entraîne des erreurs de correspondance entre les versions et de nombreuses boîtes noires dans votre code.

En tant que développeur, cela devrait vous rendre très mal à l'aise. Avoir du code que vous ne comprenez pas complètement dans votre base de code peut devenir très frustrant vraiment très vite.

L'alternative.

Souvent, ce type de plugin nous fournit des fonctionnalités que les développeurs JavaScript peuvent accomplir aussi facilement sans eux. Ce processus de développement, dans des scénarios assez simples, nous permet de créer du code que nous comprenons et d'avoir un temps plus facile à maintenir. Non seulement nous apprenons de ce processus, mais nous créons également des petits morceaux de code spécifique. Les solutions axées sur la communauté sont très bonnes en général, mais il est important de se rappeler qu'elles ne sont pas une solution miracle. Souvent, vous êtes bloqué en utilisant un projet qui n'est pas très actif et qui a un bug dans votre cas spécifique et vous devez creuser à travers une base de code large et inconnue.

Votre code

Alors, que fait ce plugin glisser-déposer?

Eh bien, je le décomposerais comme suit:

  • mousedown événement mousedown sur les lignes de la table
  • Lorsqu'un tel événement se déclenche, commencez à déplacer la ligne du tableau pour qu'elle corresponde à la position de la souris
  • Lorsque le mouseup se produit, le détecter et finaliser la position.

Voyons comment nous pouvons faire quelque chose de similaire. Supposons que le HTML de la table est quelque chose comme:

<table>
    <tbody>
    <tr>
        <td> Hello 1</td>
    </tr><tr>
        <td> Hello 2</td>
    </tr>
    </tbody>
</table>

Voici un violon avec la table avec un style de base appliqué

Ensuite, nous allons écouter les événements de sélection. Nous allons ajouter un événement aux lignes de la table pour la sélection et au document à quand la souris est levée. jQuery a des écouteurs d'événements pour de tels événements. Puisque nous voulons que ces événements restent après AJAX, nous utiliserons .on qui nous permet d'utiliser des événements délégués. .on signifie que même si nous ajoutons du contenu à la table plus tard, cela n'aura aucune importance.

var selected; // currently selected row
$(document).on("mousedown","#MySpecialTable tr",function(){
   $("#textDiv").text(this.textContent); 
    selected = this;
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.textContent); 
    selected = null;
});

Voici un violon de travail de ce code.

Maintenant, nous allons vouloir changer le glisser-déposer pour travailler quand, c'est-à-dire, mettre à jour la position actuelle à celle qui reflète la position de la souris. Nous pouvons écouter les événements mousemove et détecter l'élément sur lequel nous sommes actuellement. Quelque chose comme

$(document).on("mousemove",function(e){
    $("#textDiv").text($(e.target).html());
});

Vous pouvez voir un violon de travail ici

C'est bien, mais nous voulons changer la position de l'élément. Nous aurons donc besoin de changer la structure de la table pour permettre cela. Nous pouvons retirer l'élément et l'ajouter à la bonne position. 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 actuel dans l'événement mousemove. Nous pouvons d'abord détecter si nous devrions faire glisser avec quelque chose comme:

$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            $("#mousePos").text("DRAGGING");    
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

(Violon)

Maintenant, nous allons ajouter la sélection actuelle, nous remplacerons les éléments lorsque la cible n'est pas notre élément et nous sommes dans la table. Notre code complet devrait être quelque chose comme:

var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
    e.preventDefault();//stop the text selection;
   $("#textDiv").text(this.textContent); 
    selected = $(this);
    selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.text()); 
    selected.find("td").css("background-color","");
    selected = null;
});
$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            var el = $(e.target).closest("tr");//the tr element we're on
            el.before(selected);// replace the elements
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table

( Violon )

Maintenant, nous n'avons que quelques lignes de code, ce qui est bien car nous savons exactement ce qui se passe et n'avons pas besoin d'utiliser beaucoup de lignes de code externe que nous ne comprenons pas complètement.

Mais va-t-il AJAX?

Chargons les données dans la table avec AJAX et voyons! Nous allons simuler une réponse AJAX en utilisant un setTimeout qui nous permettrait de simuler une requête asynchrone. Nous utiliserons

setTimeout(function(){
    $("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);

Cela signifie que vous #MySpecialTable mettre à jour le code HTML de #MySpecialTable après une seconde. Voyons voir si cela fonctionne nous?

Alors pourquoi ça marche? Eh bien, nous avons utilisé des événements délégués, ce qui signifie que nous ne nous intéressons pas si les éléments que nous chargeons sont à l'écran ou non. Nous avons eu la perspicacité de le faire puisque nous avons construit notre code nous-mêmes et savions quel était notre objectif final. La seule chose à faire est de nettoyer un peu le code.

Nous allons envelopper notre code dans ce qui suit, pour éviter que $ ne soit un problème en mode non conflictuel (c'est-à-dire que $ est déjà pris dans la page:

(function($){

})(jQuery);

Ensuite, nous allons ajouter une liaison pour notre événement de table:

$.GertVDragTable = function(elementSelector){ // rest of code.

Finalement, notre code pourrait ressembler à ceci.

En l'utilisant, serait un simple $.GertVDragTable("#MySpecialTable"); alternativement, nous pouvons le mettre sur $.fn et permettre à chaque fonction de l'appeler. Ce qui est une question de goût.

Pas de copie-pasta s'il vous plaît :) J'apprécierais que vous vous arrêtiez sur chaque scène et que vous pensiez à la prochaine étape.

innerhtml evenement

J'ai donc 2 pages html. 1 qui fonctionne comme conteneur et 1 qui fonctionne comme contenu. Lorsque je charge la page de contenu avec une table, je peux utiliser le glisser-déposer.

Mais quand je vais à la page de mon conteneur et charge la page de contenu dans un div avec ajax, le glisser-déposer cesse de fonctionner. Toutes les autres fonctionnalités javascript à l'intérieur de la page de contenu fonctionnent toujours. Comment puis-je lier le plugin jquery dnd à la table chargée d'ajax?

J'utilise drag & drop avec ceci comme 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 que puis-je faire à ce sujet? Quelqu'un peut-il m'aider avec ça sil-vous-plait.

Très court: Je veux accéder à l'ID de la table que je charge dans ma page de conteneur avec ajax et utiliser le glisser-déposer de jquery.

MODIFIER

Résultats:

D'une façon ou d'une autre, ma table dans la page du conteneur a été renommée pSqlaTable au lieu de l'identifiant que je lui ai donné dans la page du contrôleur qui est.

<table id="tableDiagnose" class="table table-hover">

Thats pourquoi le code n'a pas pu trouver la table annymore Obtenu par ce code grâce à Fábio Batista:

$('#diagnoses_zelf table').tableDnD( ... );

, mais comment puis-je utiliser le plugin dnd maintenant?

Il trouve la table maintenant, mais je ne suis toujours pas capable de lier le plugin dnd. Suis-je capable de lier un plugin jquery à des tables chargées ajax?

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 avec lequel je suis toujours coincé. tableid est correct mais l'initialisation de la jquery ne l'est pas. Je ne peux pas faire glisser les drows dans la table. Ma syntaxe est-elle incorrecte?

MODIFIER

Serait-ce que je ne peux pas lier la jquery à la table parce que je génère dynamiquement la table sur l'autre page avec ZPT (ou javascript)?




Essayez d'ajouter un title à votre tableau, comme ceci:

<table id = "tableDiagnose" class = "table table-hover" title = "table-content">

Ensuite, utilisez le sélecteur d'attribut jQuery pour trouver cette table au lieu de la trouver par id .

$('table[title="table-content"]').tableDnD({ 
// the rest of your code



Incluez-vous le fichier de script dans la page du conteneur ou dans la page de contenu? Je suppose que vous voudrez peut-être essayer de le charger lors de l'appel du plugin dnd avec getScript:

...
$.getScript('pathTotableDnDlib').done(function(){
    $(tableid).tableDnD({    
    onDrop: function(table, row) {
    alert(table + "     "  +  row);

    },
    onDragStart: function(table,row){
    var tette = $(row).index;
    alert(tette);
    },
    dragHandle: ".dragHandle"
});});
...

plus sur getscript: ici




Related

javascript jquery html ajax dom