CODEWITHSUNDEEP
jquerydrag-and-drop
jdarling
jdarling

Reputation: 13

jQuery open modal on drop

I'm trying to open a modal window after dropping an element. I've searched the boards and can't find anything. Here's what I have so far, but it's not working. The item drags and drops as it should, but the modal doesn't open:

    $( "#table #food li.corn" ).draggable({
            revert: "invalid",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( "#cornDialog" ).dialog( "open" );
                        return false;       
            }
    });
    $( "#plate ul" ).droppable({
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $(this).addClass( "ui-state-highlight" );   
        }
    });
    $( "#cornDialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "slow"
    });

Upvotes: 0

Views: 2540

Answers (2)

fehays
fehays

Reputation: 3167

Try moving $( "#cornDialog" ).dialog( "open" ); into the drop: function of the droppable.

Like so:

$( "#plate ul" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $(this).addClass( "ui-state-highlight" );  
        $( "#cornDialog" ).dialog( "open" ); 
    }
});

EDIT: alternatively, you could implement stop() on the draggable:

$( "#table #food li.corn" ).draggable({
        revert: "invalid",
        hoverClass: "ui-state-active",
        stop: function( event, ui ) {
            $( "#cornDialog" ).dialog( "open" );
                    return false;       
        }
});

Upvotes: 0

Kyle Williams
Kyle Williams

Reputation: 19

You want to put your dialog code in the droppable drop callback so like this

   $( "#table #food li.corn" ).draggable({
        revert: "invalid",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $( "#cornDialog" ).dialog( "open" );
                    return false;       
        }
});
$( "#plate ul" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $(this).addClass( "ui-state-highlight" );  
        $( "#cornDialog" ).dialog({
           autoOpen: false,
            show: "blind",
           hide: "slow"
        }); 
    }
});

Upvotes: 0

Related Questions