jQuery UI sortable not working with ajax html data

Question

i am new to jquery, and for some reason my sortable list is not working with sortable

i am just practising

my code

$( ".sortable" ).sortable();

$.ajax({
      url: baseUrl+'/loadFields/,
      dataType: "html",
      success: function(data)
      {
        $('#fields').html(data);
      }
    });

the div where the data is loaded

<div id="fields"></div>

and the html file, where the list is contained

<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

And when i try to drag nothing happens, if i dont load the html with ajax and do it like this

<div id="fields">
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>

it works fine

Could please someone tell me how to use it with the ajax data?

Dynamic element creation doesn't matter when it comes to sortable lists as long as you identify the lists properly and handle all the event's properties with care. See my answer below — DevlshOne
– DevlshOne, Commented Nov 27, 2013 at 12:29

animuson · Accepted Answer · 2014-01-27 01:23:48Z

1

HTML

<div id="fields">
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</div>

CSS

.ui-icon {float:left;margin-right:8px;}

jQuery

$(".sortable").sortable("refresh"); // add this line to "re-load" the sortable list after populating
$(".sortable").ready(function() {
  $( ".sortable" ).sortable(
      {
          handle: '.ui-icon-arrowthick-2-n-s',
          items: 'li',
          containment: '#fields',
          forceHelperSize: true,
          forcePlaceHolderSize: true,
          start: function(e, ui) {
              ui.item.addClass('ui-state-highlight');
          },
          stop: function(e, ui) {
              ui.item.removeClass('ui-state-highlight').effect('highlight',{},2000);;
          },
          update: function() {
              $('.sortable').sortable('refreshPositions');
          }
      }
  );
});

Working jsFiddle

edited Jan 27, 2014 at 1:23

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Nov 27, 2013 at 12:25

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Levi Over a year ago

you totally got me wrong, it does not work with your code either, because im loading my data with AJAX, if i dont load it with ajax it works but iwth AJAX load it does not

DevlshOne Over a year ago

@user1512390 Are you sure? I dynamically populate all of my sortable lists and they all seem to work fine. Maybe you should check to see if the list is DOMReady before you try using the .sortable() method.

Levi Over a year ago

tried that too, does not work, that is why i am totally cluless

Levi Over a year ago

thanks for you patienc still the same thing, checked something, when i view my source the ajax data content is visible in the dom, only shows in firebug, could that be the problem?

DevlshOne Over a year ago

Are you primarily using FF or Chrome? Do Firebug / DevTools both give you a 200 OK that the data is being returned properly? Does my fiddle work in your browser? Could you kindly post the AJAX call that populates .sortable()?

|

Collectives™ on Stack Overflow

jQuery UI sortable not working with ajax html data

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related