Jquery Sortable drop event
I have created a table, and want it to be drag-and-drop sortable. I'm able to move the rows around successfully. However, when I drop an item, I want it (for now) to show an alert.
My Jquery looks like this:
$('#debt_list').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
});
$("#debt_list").droppable({
drop: function () {
alert('dropped');
}
});
Unfortunately, I can't get the alert to fire. There's no errors in the console. Just, no even fires when I move a row, and drop it on my table.
How can I get the drop event to fire (I'll be doing an ajax call, but for now, the alert is good. Maybe I can't use a table, and need to use a unordered list? Hopefully not.
The table is defined as:
<table class="table table-striped table-hover table-responsive datatable" id="debt_list">
<thead>
<tr>
<th>Debt Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var m in Model.Debts.OrderBy(x => x.Description))
{
<tr class="index">
<td>
@m.Description - (@m.OpeningBalance.ToString("C2"))
</td>
<td class="text-right index">
<i class="fa fa-bars" aria-hidden="true"></i>
</td>
</tr>
}
</tbody>
</table>
javascript jquery
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
|
show 3 more comments
I have created a table, and want it to be drag-and-drop sortable. I'm able to move the rows around successfully. However, when I drop an item, I want it (for now) to show an alert.
My Jquery looks like this:
$('#debt_list').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
});
$("#debt_list").droppable({
drop: function () {
alert('dropped');
}
});
Unfortunately, I can't get the alert to fire. There's no errors in the console. Just, no even fires when I move a row, and drop it on my table.
How can I get the drop event to fire (I'll be doing an ajax call, but for now, the alert is good. Maybe I can't use a table, and need to use a unordered list? Hopefully not.
The table is defined as:
<table class="table table-striped table-hover table-responsive datatable" id="debt_list">
<thead>
<tr>
<th>Debt Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var m in Model.Debts.OrderBy(x => x.Description))
{
<tr class="index">
<td>
@m.Description - (@m.OpeningBalance.ToString("C2"))
</td>
<td class="text-right index">
<i class="fa fa-bars" aria-hidden="true"></i>
</td>
</tr>
}
</tbody>
</table>
javascript jquery
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
What versions of jquery and jquery ui are you using? Im not familar withitemSelectoranditemPathbut it works fine for me in this jsfiddle using theitemsoption.
– DelightedD0D
Oct 15 '16 at 6:07
I'm using jquery 3.1.1 and UI version 1.12.1
– Craig
Oct 15 '16 at 7:08
It's working for me here using those versions. Are you certain that the element exists on the page when you attempt to bind the handler? Do you have that code inside a dom ready function like$(function(){ ....});?
– DelightedD0D
Oct 15 '16 at 7:51
Yes, I have a "$(function () {" surrounding all the code. Should that be there?
– Craig
Oct 15 '16 at 8:13
1
FIXED! By doing what I just said. Thanks!
– Craig
Oct 16 '16 at 20:15
|
show 3 more comments
I have created a table, and want it to be drag-and-drop sortable. I'm able to move the rows around successfully. However, when I drop an item, I want it (for now) to show an alert.
My Jquery looks like this:
$('#debt_list').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
});
$("#debt_list").droppable({
drop: function () {
alert('dropped');
}
});
Unfortunately, I can't get the alert to fire. There's no errors in the console. Just, no even fires when I move a row, and drop it on my table.
How can I get the drop event to fire (I'll be doing an ajax call, but for now, the alert is good. Maybe I can't use a table, and need to use a unordered list? Hopefully not.
The table is defined as:
<table class="table table-striped table-hover table-responsive datatable" id="debt_list">
<thead>
<tr>
<th>Debt Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var m in Model.Debts.OrderBy(x => x.Description))
{
<tr class="index">
<td>
@m.Description - (@m.OpeningBalance.ToString("C2"))
</td>
<td class="text-right index">
<i class="fa fa-bars" aria-hidden="true"></i>
</td>
</tr>
}
</tbody>
</table>
javascript jquery
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
I have created a table, and want it to be drag-and-drop sortable. I'm able to move the rows around successfully. However, when I drop an item, I want it (for now) to show an alert.
My Jquery looks like this:
$('#debt_list').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
});
$("#debt_list").droppable({
drop: function () {
alert('dropped');
}
});
Unfortunately, I can't get the alert to fire. There's no errors in the console. Just, no even fires when I move a row, and drop it on my table.
How can I get the drop event to fire (I'll be doing an ajax call, but for now, the alert is good. Maybe I can't use a table, and need to use a unordered list? Hopefully not.
The table is defined as:
<table class="table table-striped table-hover table-responsive datatable" id="debt_list">
<thead>
<tr>
<th>Debt Name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var m in Model.Debts.OrderBy(x => x.Description))
{
<tr class="index">
<td>
@m.Description - (@m.OpeningBalance.ToString("C2"))
</td>
<td class="text-right index">
<i class="fa fa-bars" aria-hidden="true"></i>
</td>
</tr>
}
</tbody>
</table>
javascript jquery
javascript jquery
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
edited Nov 13 '18 at 13:51
Eugene Mihaylin
9581424
9581424
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
asked Oct 15 '16 at 4:51
CraigCraig
7,0742297175
7,0742297175
What versions of jquery and jquery ui are you using? Im not familar withitemSelectoranditemPathbut it works fine for me in this jsfiddle using theitemsoption.
– DelightedD0D
Oct 15 '16 at 6:07
I'm using jquery 3.1.1 and UI version 1.12.1
– Craig
Oct 15 '16 at 7:08
It's working for me here using those versions. Are you certain that the element exists on the page when you attempt to bind the handler? Do you have that code inside a dom ready function like$(function(){ ....});?
– DelightedD0D
Oct 15 '16 at 7:51
Yes, I have a "$(function () {" surrounding all the code. Should that be there?
– Craig
Oct 15 '16 at 8:13
1
FIXED! By doing what I just said. Thanks!
– Craig
Oct 16 '16 at 20:15
|
show 3 more comments
What versions of jquery and jquery ui are you using? Im not familar withitemSelectoranditemPathbut it works fine for me in this jsfiddle using theitemsoption.
– DelightedD0D
Oct 15 '16 at 6:07
I'm using jquery 3.1.1 and UI version 1.12.1
– Craig
Oct 15 '16 at 7:08
It's working for me here using those versions. Are you certain that the element exists on the page when you attempt to bind the handler? Do you have that code inside a dom ready function like$(function(){ ....});?
– DelightedD0D
Oct 15 '16 at 7:51
Yes, I have a "$(function () {" surrounding all the code. Should that be there?
– Craig
Oct 15 '16 at 8:13
1
FIXED! By doing what I just said. Thanks!
– Craig
Oct 16 '16 at 20:15
What versions of jquery and jquery ui are you using? Im not familar with
itemSelector and itemPath but it works fine for me in this jsfiddle using the items option.– DelightedD0D
Oct 15 '16 at 6:07
What versions of jquery and jquery ui are you using? Im not familar with
itemSelector and itemPath but it works fine for me in this jsfiddle using the items option.– DelightedD0D
Oct 15 '16 at 6:07
I'm using jquery 3.1.1 and UI version 1.12.1
– Craig
Oct 15 '16 at 7:08
I'm using jquery 3.1.1 and UI version 1.12.1
– Craig
Oct 15 '16 at 7:08
It's working for me here using those versions. Are you certain that the element exists on the page when you attempt to bind the handler? Do you have that code inside a dom ready function like
$(function(){ ....});?– DelightedD0D
Oct 15 '16 at 7:51
It's working for me here using those versions. Are you certain that the element exists on the page when you attempt to bind the handler? Do you have that code inside a dom ready function like
$(function(){ ....});?– DelightedD0D
Oct 15 '16 at 7:51
Yes, I have a "$(function () {" surrounding all the code. Should that be there?
– Craig
Oct 15 '16 at 8:13
Yes, I have a "$(function () {" surrounding all the code. Should that be there?
– Craig
Oct 15 '16 at 8:13
1
1
FIXED! By doing what I just said. Thanks!
– Craig
Oct 16 '16 at 20:15
FIXED! By doing what I just said. Thanks!
– Craig
Oct 16 '16 at 20:15
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40055076%2fjquery-sortable-drop-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40055076%2fjquery-sortable-drop-event%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What versions of jquery and jquery ui are you using? Im not familar with
itemSelectoranditemPathbut it works fine for me in this jsfiddle using theitemsoption.– DelightedD0D
Oct 15 '16 at 6:07
I'm using jquery 3.1.1 and UI version 1.12.1
– Craig
Oct 15 '16 at 7:08
It's working for me here using those versions. Are you certain that the element exists on the page when you attempt to bind the handler? Do you have that code inside a dom ready function like
$(function(){ ....});?– DelightedD0D
Oct 15 '16 at 7:51
Yes, I have a "$(function () {" surrounding all the code. Should that be there?
– Craig
Oct 15 '16 at 8:13
1
FIXED! By doing what I just said. Thanks!
– Craig
Oct 16 '16 at 20:15