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


2 Answers

Vous n'avez pas besoin d'utiliser l'ID comme sélecteur, vous pouvez utiliser n'importe quelle expression qui peut trouver votre table.

S'il n'y a qu'une seule table sur l'appel $.ajax résultant, vous pouvez rechercher "une table dans le conteneur", en utilisant l'ID du conteneur, qui ne changera pas:

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

S'il y a plus d'une table, utilisez un autre type de sélecteur, au lieu de l'ID. Une classe CSS fonctionne bien:

$('table.table-diagnose').tableDnD( ... );

Donc, un attribut de data- :

$("table[data-diagnose]").tableDnD( ... );
Question

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




@BenjaminGruenbaum Bonjour beaucoup pour le tutoriel, j'ai modifié un peu le code pour bloquer le glisser-déposer sur les en-têtes de table et améliorer la fluidité de traînée en suivant le sens de la souris.

var old_y = 0;
(function ($) {
    $.GertVDragTable = function (tableName) {
        var selected;
        $(document).on("mousedown", tableName+" tr",function (e) {
            e.preventDefault(); //stop the text selection;
            if (($(this).find('th').length)== 0){   //prevent dragging on tr containing th
            selected = $(this);
            selected.find("td").css("background-color", "black");
            selected.find("td").css("color", "white");
            }
        });

        $(document).on("mouseup", function () {
            selected.find("td").css("background-color", "");
            selected.find("td").css("color", "");
            selected = null;
        });
        $(document).on("mousemove", function (e) {
            if (selected != null ) { // got an element selected
                if ($(tableName).has(e.target).length > 0) { //in the table
                    var el = $(e.target).closest("tr"); //the tr element we're on
                    if (el.find('th').length==0){ //prevent dropping on headers row

                    if (e.pageY > old_y){       //**
                    el.after(selected);}else{   //**-->more fluid dragging based on mouse direction
                        el.before(selected);    //**
                    }

                }
                }
                old_y = e.pageY;
            }
        });

        $(tableName).on('selectstart', false); //Don't let the user select the table
    }
})(jQuery);

voici le violon http://jsfiddle.net/59rdq/

J'espère que ce sera utile pour quelqu'un.




Si votre identifiant change, vous ne devriez pas utiliser d'identifiant alors:

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

Brancher

function initialize_table() 
{
    $('.tableDiagnose.table').tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);
        },
        dragHandle: ".dragHandle"
    });   
    DP('nee');  
}

EDIT : ajax est asynchrone:

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
                    update_table(); 
                    initialize_table();    // <== calls jquery plug in
                },
            error: function(){
                alert('error');
              } 
        });
        //removed .done as you already have a success option in ajax


    return false;   
}

EDIT: trouvé votre bug ........ vous récupérez l'ID de la table puis sélectionnez-le dans $ (tableid) mais vous avez manqué le #

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);
    // but you really should limit the use of variables when you don't need them*/
    //$('#'+tableid).tableDnD({            
    //like this directly
    $('#diagnoses_zelf table').tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

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

Voir la démo ici

MODIFIER




Related