CODEWITHSUNDEEP
javascriptjqueryjquery-ui
redstang423
redstang423

Reputation: 133

Jquery Sortable only fires after second click

I've integrated the jquery "sortable" feature into my website, and it works perfectly with one minor exception. It only works after I click once anywhere on the page. The section of the page the sortable elements are found is loaded after an ajax query, so I'm using the "on" function. I'd love to figure out how to get this to work without having to click first.

$(document).on("mousedown.sortable", "#container", function() {
  $("#container").sortable({
    update: function(event, ui) {
      var data = $(this).sortable("serialize");
      $.ajax({
        data: data,
        type: 'POST',
        url: 'myurl'
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">
</script>
<div id="mainContainer">
  <ul id="container">
    <li id="item-1">Item 1</li>
    <li id="item-2">Item 2</li>
  </ul>
</div>

For anyone reading this later, the key to the accepted answer is to have the portion of JQuery code loaded every time the portion of HTML is loaded into the document via AJAX, rather than in a "main" piece of code that's loaded the first time the page itself is loaded.

Upvotes: 0

Views: 296

Answers (1)

Lee Taylor
Lee Taylor

Reputation: 7994

You don't need the mousedown event handler (removed here), since this is causing the sortable to only be added after you do your initial click (as described by yourself)

$("#container").sortable({
  update: function(event, ui) {
    var data = $(this).sortable("serialize");
    $.ajax({
      data: data,
      type: 'POST',
      url: 'myurl'
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">
</script>
<div>
  <ul id="container">
    <li id="item-1">Item 1</li>
    <li id="item-2">Item 2</li>
  </ul>
</div>

Upvotes: 1

Related Questions