Question

I’ve got this javascript, trying to open a bootstrap modal after the class is appended to the droppable element. But the draggable item just freezes on the droppable instead of launching the modal.

$( ".draggable" ).draggable({revert: true, opacity: 0.75}); // DRag and drop function
        $( ".droppable" ).droppable({
            drop: function( event, ui ) {

                $( this )
                    .addClass( "ui-state-highlight" )
                    .append("<div class='node well'><a href='#'>linka</a></div>");
        $('#myModal').modal({keyboard: false});
            }
        });

html for modal:

    <div class="modal hide fade" id="myModal">
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
          </div>
    </div>

When I launch the modal via a button, as the example on the bootstrap demo shows, it works fine. Any ideas?

Answer 1

The problem was that I was not including the JQuery UI libraries via my gemfile, some of the files were being included from within other Javascript but I had not included the GEM in my app.