zoit zoit - 3 months ago 22x
Javascript Question

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

Actually I'm trying to develope a drag and drop gridview with c#, I have look for some jquery library like tableDnD and following some examples I see a piece of code. I'm trying to reply it with my code but I have a

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

My code it's simple and I want to explain it:

Firstly this is a Master Page with this code:

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<asp:ContentPlaceHolder ID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<link rel="stylesheet" href="Styles/Coaching.css" type="text/css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"/>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost:2848/js/jquery.tablednd.js" type="js/javascript">

<script type="text/javascript">
var strorder;
$(document).ready(function () {
onDrop: function (table, row) {
type: "POST",
url: "diagnostico-plantilla.aspx/GridViewReorders",
data: '{"Reorder":"' + strorder + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
alert("Successfully Save ReOrder");

function reorder() {
strorder = "";
var totalid = $('#grdResultados tr td input').length;
for (var i = 0; i < totalid; i++) {
strorder = strorder + $('#grdResultados tr td input')[i].getAttribute("value") + "|";

As you can see it's a simple Master Page, then the aspx has this line where I write the gridview

<asp:GridView ID="grdResultados" runat="server" CssClass="table table-hover" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" GridLines="None" DataKeyNames="id" DataSourceID="odsResultados" OnRowDataBound="grdResultados_RowDataBound" OnPageIndexChanged="grdResultados_PageIndexChanged" OnSorting="grdResultados_Sorting" OnRowCommand="grdResultados_RowCommand">

So, why I have this mistake, because when I try to do the drag and drop, it doesn't work and I have used the Chrome inspector and I had this.

Thanks so much


Replace this line:

<script src="http://localhost:2848/js/jquery.tablednd.js" type="js/javascript">

With this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/jquery.tablednd.js"></script>

If that fixes the problem you know that you were not referencing the tablednd.js file correctly.The easiest way to add a reference to a local .js file is to drag if from Visual Studio - Solution Explorer to the page.