Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

Question

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

I have been successfully using the TableDnD plugin for drag and drop functionality on table rows. However, I am now facing an issue with dynamically generated tables via AJAX. The code doesn't seem to work as expected when it comes to drag and dropping rows in these dynamically generated tables. Can someone help me understand how I can make this work seamlessly for dynamically created tables as well?

  $(document).ready(function () {
      // Drag and drop
      $("#table-1").tableDnD({
          onDragClass: "myDragClass",
          onDrop: function (table, row) {
              var rows = table.tBodies[0].rows;
              for (var i = 0; i < rows.length; i++) {
                  debugStr += rows[i].id + " ";
                  alert(rows[i].id);
              }
          },
          onDragStart: function (table, row) {}
      });
  });

javascript jquery ajax drag-and-drop tablednd

Answer 1

Answer №1

One potential reason for your issue could be that you are initializing .tableDnD() after the DOM has already loaded. If you are dynamically adding elements after this point, the function won't apply to those new elements.

To solve this problem, you can detect changes in the DOM and then apply .tableDnD() like this:

$(document).bind('DOMNodeInserted', function(){

    $("#table-1").tableDnD({
        onDragClass: "myDragClass",
        onDrop: function (table, row) {
            var rows = table.tBodies[0].rows;
            for (var i = 0; i < rows.length; i++) {
                debugStr += rows[i].id + " ";
                alert(rows[i].id);
            }
        },
        onDragStart: function (table, row) {}
    });

});

Alternatively, you can use a more efficient approach by applying .tableDnD() within the document ready function and binding it to the 'DOMNodeInserted' event:

$(document).ready({

    applyDnD();
    $(document).bind('DOMNodeInserted', applyDnD);

    function applyDnD() {
        $("#table-1").tableDnD({
            onDragClass: "myDragClass",
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                for (var i = 0; i < rows.length; i++) {
                    debugStr += rows[i].id + " ";
                    alert(rows[i].id);
                }
            },
            onDragStart: function (table, row) {}
        });
    };

});

Answer 2

One potential reason for your issue could be that you are initializing .tableDnD() after the DOM has already loaded. If you are dynamically adding elements after this point, the function won't apply to those new elements.

To solve this problem, you can detect changes in the DOM and then apply .tableDnD() like this:

$(document).bind('DOMNodeInserted', function(){

    $("#table-1").tableDnD({
        onDragClass: "myDragClass",
        onDrop: function (table, row) {
            var rows = table.tBodies[0].rows;
            for (var i = 0; i < rows.length; i++) {
                debugStr += rows[i].id + " ";
                alert(rows[i].id);
            }
        },
        onDragStart: function (table, row) {}
    });

});

Alternatively, you can use a more efficient approach by applying .tableDnD() within the document ready function and binding it to the 'DOMNodeInserted' event:

$(document).ready({

    applyDnD();
    $(document).bind('DOMNodeInserted', applyDnD);

    function applyDnD() {
        $("#table-1").tableDnD({
            onDragClass: "myDragClass",
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                for (var i = 0; i < rows.length; i++) {
                    debugStr += rows[i].id + " ";
                    alert(rows[i].id);
                }
            },
            onDragStart: function (table, row) {}
        });
    };

});

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

Answer №1

Similar questions

Does the syntax for the $.ajax() function appear to be incorrect in this instance?

Installation and execution of TypeScript jQuery / Bootstrap definition file on a local machine using npm typings: A step-by-step guide

Angular2 allows you to create pipes that can filter multiple values from JSON data

Error: It is not possible to access the 'map' property of an undefined value 0.1

Nextjs API call ended without a response being sent

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

What does {``} denote in react-native programming?

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

What is the process for importing a .gltf/.glb model into a Three.js application?

Having trouble retrieving information from the JSON data received from the Google Place Search API

Error: The `queries` property is undefined and cannot be read (react.js)

How to make a straightforward task list using ExpressJS

How can I dynamically pass a background:url using JavaScript to CSS?

Is it possible to dynamically group by one column in a dataset without requiring a trigger function?

The table element fails to display in IE11 due to a rendering issue, displaying the error message: "Render error - TypeError: Object does not support the property or method 'entries'"

The issue of JQuery mobile customizing horizontal radio buttons failing to function on physical devices has been identified

Failed to make a request to https://registry.npmjs.org/node-modules because of an error: error:0906D06C:PEM routines:PEM_read_bio:no start line

Is there a way for me to display a customized error message using antd components?

Choose a procedure to reset to the original setting

Error message: The Javascript Electron app is unable to find the node-fetch module when