CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-ui
NewUser
NewUser

Reputation: 13333

jQuery UI Sortable not working with bootstrap modal box?

I want to use jQuery Sortable with bootstrap modal box. I have included all the files but its not working at all. Without modal box its working fine. Here is my sample code

<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="sortable-wrap">
          <ul id="sortable">
              <li class="ui-state-default">Item 1</li>
              <li class="ui-state-default">Item 2</li>
              <li class="ui-state-default">Item 3</li>
              <li class="ui-state-default">Item 4</li>
              <li class="ui-state-default">Item 5</li>
              <li class="ui-state-default">Item 6</li>
              <li class="ui-state-default">Item 7</li>
          </ul>
      </div> 
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

JS code looks like this

jQuery( "#sortable" ).sortable();

Here is the fiddle link if someone wants to check.

So can someone tell me why the sortable is not working here? How to make it workable here? Any suggestion or advise will be really appreciable. Thanks

Upvotes: 0

Views: 2969

Answers (2)

John
John

Reputation: 4981

Your code works fine. Just check JQuery UI 1.9.2 to import the library.

Demo

Upvotes: 1

Harry Bomrah
Harry Bomrah

Reputation: 1668

Well I think your code doesnt have any issue. But I would recommend if you do something like this.

$("#myModal").on("shown",function(){
  $( "#myModal #sortable" ).sortable();
})

And plus import jQuery Ui in your fiddle.

Upvotes: 0

Related Questions