CODEWITHSUNDEEP
jquery-uijquery
Łukasz Baran
Łukasz Baran

Reputation: 1239

JQuery: calling ajax on drop element

$("div.square").droppable({
        accept: '.white',
        drop: function (event, ui)
        {
            $to = "#" + $(this).attr('id');
            alert(to);
            $.post(
        "/Game/AddMove",
        {
            from: $from,
            to: $to,
            GameID: $("#gameID").val()
        });
        }
    });

Well it's nor working. So I must ask, is it possible to call AJAX on droping some UI element ?

The problem is, it's not even calling an controller,

Upvotes: 0

Views: 1352

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074148

Yes, you can trigger ajax calls on drop. (live example)

I see a couple of issues (details below):

$("div.square").droppable({
    accept: '.white',
    drop: function (event, ui)
    {
        $to = "#" + $(this).attr('id');// <== 1. Implicit Global?
        alert(to);                     // <== 2. Syntax error
        $.post(
            "/Game/AddMove",
            {
                from: $from,           // <== 3. Where does this come from?
                to: $to,
                GameID: $("#gameID").val()
        });
    }
});
  1. You seem to be using $to without declaring it. (If it's declared in a containing scope you haven't shown, that's fine; otherwise, though, you're falling prey to the Horror of Implicit Globals. (That's probably not what's keeping it from working, though.)
  2. The code should blow up here, unless to is defined somewhere. You don't have any variable called to.
  3. You're using a variable $from that isn't defined in your quoted code. Fair 'nuff if it's defined in an enclosing scope, but if so, probably worth mentioning in the question.

If none of the above is it, just walk through the code. There are plenty of browser-based debuggers these days. If you use Firefox, install and use Firebug. If you use Chrome or Safari, they have Dev Tools built in (you may have to enable them in preferences). If you use IE, IE8 and up have a built-in debugger; for IE7 and earlier you can use the free version of VS.Net. For Opera, it has a built-in debugger called Dragonfly... In all of these, you can set a breakpoint on the first line of your drop handler and step through to see what's going wrong.

Upvotes: 0

btx
btx

Reputation: 266

I'm going to guess that you want your to variable to be the id attr of the dropped element. I have no idea where you intended the value of $from to come from.

Just a side note - I would suggest not using variables starting with a $, especially not with jQuery.

Anyway, to access the object that dropped, do this:

drop: function(event, ui) {
   toStr = '#' + $(ui.helper).attr('id');
}
  • in other words, ui.helper is the HTML object that was dropped onto your droppable.

Good luck.

Upvotes: 1

Related Questions