Jquery UI, Draggable/Droppable Append Clone after Json

Question

I have been playing around with this line of code trying to get it to function correctly without success decided to post here, hopefully someone can help.

My issue revolves around JQUERY UI with use of DRAGGABLE / DROPPABLE and Json. Here is my Code:

$('.drag').draggable({
        helper: 'clone'
    });
    $(".drop").droppable({
        drop: function(e, ui) {
            var dataString = 'type='+ui.draggable.clone().find('.type').attr('id')+'&update=update';
            $.ajax({
                url: 'phphandler.php',
                type: 'POST',
                data: dataString,
                dataType: 'json',
                success: function(json) {
                    $(this).append(ui.draggable.clone().html(json.Data));
                },
                error: function() {
                    alert(ui.draggable.clone().html);
                }
            });
        }
});

My HTML is essentially:

<div class="drag">Object</div>
<div class="drop"></div>

Pretty much all I'm trying to do is append the clone to drop after the Success or change the html of the clone after the success.

Note: I can append before the Ajax request without a issue but am unable to change the HTML of the clone after success.

what is the response from the server ?? – Kanishka Panamaldeniya Aug 07 '12 at 03:53 — Kanishka Panamaldeniya, Aug 07 '12 at 03:53

score 0 · Accepted Answer · answered Aug 07 '12 at 05:02

Be careful the scope of the function

Try

$.ajax({
                url: 'phphandler.php',
                type: 'POST',
                data: dataString,
                dataType: 'json',
                context: this,
                success: function(json) {
                    $(this).append(ui.draggable.clone().html(json.Data));
                },
                error: function() {
                    alert(ui.draggable.clone().html);
                }
            });

OR

var dataString = 'type='+ui.draggable.clone().find('.type').attr('id')+'&update=update';
           var tmp = $(this);
           $.ajax({
                url: 'phphandler.php',
                type: 'POST',
                data: dataString,
                dataType: 'json',
                success: function(json) {
                    tmp.append(ui.draggable.clone().html(json.Data));
                },
                error: function() {
                    alert(ui.draggable.clone().html);
                }
            });

Jquery UI, Draggable/Droppable Append Clone after Json

Basic Content

1 Answers1