locked
jQuery tableDnd is Not a Function? RRS feed

  • Question

  • User-1485433867 posted

    Trying to use the tableDnd function to drag and drop an asp.net GridView row.  Have looked a tone of examples.  I must be missing something simple.

    In the Head section of my master page I have:

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
            <script src="../Scripts/jquery.tablednd.js" type="text/javascript"></script>
            <script type="text/javascript">
            $(document).ready(function () {
                $("#CatGrid").tableDnD();
            });
            </script>

    I downloaded jquery.tablednd.js and put it in the correct folder.  However, when my master page is loaded Chrome debug shows this:
    Uncaught TypeError: $(...).tableDnD is not a function
    at HTMLDocument.<anonymous> (DS_Admin:65)
    at c (jquery.min.js:4)
    at Object.fireWith [as resolveWith] (jquery.min.js:4)
    at Function.ready (jquery.min.js:4)
    at HTMLDocument.q (jquery.min.js:4)

    Wednesday, February 13, 2019 6:13 PM

Answers

  • User839733648 posted

    Hi mmieher,

    Uncaught TypeError: $(...).tableDnD is not a function

    The error occurs because the jquery.tablednd.js is not  loading successfully.

    And the key point maybe the place you have put it in.

    The script should be injected after the jquery loaded, so you should put it in MasterPage like below.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplicationMaster.SiteMaster" %>
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
    ...
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server">
    ...
            </asp:ScriptManager>
            <div class="navbar navbar-inverse navbar-fixed-top">
    ...
            </div>
            <hr />
            <table id="table-1">
                <tr id="1">
                    <td>1</td>
                    <td>One</td>
                    <td>some text</td>
                </tr>
                <tr id="2">
                    <td>2</td>
                    <td>Two</td>
                    <td>some text</td>
                </tr>
                <tr id="3">
                    <td>3</td>
                    <td>Three</td>
                    <td>some text</td>
                </tr>
                <tr id="4">
                    <td>4</td>
                    <td>Four</td>
                    <td>some text</td>
                </tr>
                <tr id="5">
                    <td>5</td>
                    <td>Five</td>
                    <td>some text</td>
                </tr>
                <tr id="6">
                    <td>6</td>
                    <td>Six</td>
                    <td>some text</td>
                </tr>
            </table>
            <script src="Scripts/jquery.tablednd.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#table-1").tableDnD();
                });
            </script>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 14, 2019 6:43 AM

All replies

  • User-1485433867 posted

    Sorry it is such a mess.  Looked fine before I posted.

    Wednesday, February 13, 2019 6:14 PM
  • User839733648 posted

    Hi mmieher,

    Uncaught TypeError: $(...).tableDnD is not a function

    The error occurs because the jquery.tablednd.js is not  loading successfully.

    And the key point maybe the place you have put it in.

    The script should be injected after the jquery loaded, so you should put it in MasterPage like below.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplicationMaster.SiteMaster" %>
    
    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
    ...
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server">
    ...
            </asp:ScriptManager>
            <div class="navbar navbar-inverse navbar-fixed-top">
    ...
            </div>
            <hr />
            <table id="table-1">
                <tr id="1">
                    <td>1</td>
                    <td>One</td>
                    <td>some text</td>
                </tr>
                <tr id="2">
                    <td>2</td>
                    <td>Two</td>
                    <td>some text</td>
                </tr>
                <tr id="3">
                    <td>3</td>
                    <td>Three</td>
                    <td>some text</td>
                </tr>
                <tr id="4">
                    <td>4</td>
                    <td>Four</td>
                    <td>some text</td>
                </tr>
                <tr id="5">
                    <td>5</td>
                    <td>Five</td>
                    <td>some text</td>
                </tr>
                <tr id="6">
                    <td>6</td>
                    <td>Six</td>
                    <td>some text</td>
                </tr>
            </table>
            <script src="Scripts/jquery.tablednd.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#table-1").tableDnD();
                });
            </script>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 14, 2019 6:43 AM