JQueryUI sortable only works once

Question

I calling JQueryUI.js in a page header then loading the content with AJAX.

Jquery drag and drop works one time then quits working. If I JqueryUI.js with every AJAX content load it works, but that is extremely slow. This is in YII framework

So the whole thing looks like :

Page.php:

$cs->registerScriptFile($baseUrl . '/js/jquery.ui.js');
$cs->registerScriptFile($baseUrl . '/js/product.js');

product.js:

// need to namespace this to get access to jquery.ui.js sortable function
(function($) {
    SORTABLE = {
      mySortable: function(inputId) {
        $('#sortable-list-left').sortable();
        $('#sortable-list-right').sortable();
      }
     };
}(jQuery));

$(document)
  .ready(function() {
      function loadRecord(id, sku) {
      $.ajax({
        data: "id=" + id + "&sku=" + sku + "&project_id=" + urlParam("project"),
        url: "/product/ajaxGetRecord",
        type: "POST",
        success: function(response) {
          // process JSON response
          var obj = jQuery.parseJSON(response);
          // update the html with the new info
          $("#productForm")
            .html(obj.form);
          (function() {
            SORTABLE.mySortable(urlParam("project"));
          })();
        }
      });
   });

_pagePartial.php :

 <div id="productForm">  
    // dynamic content filled in here
 </div>

This namespacing strategy works for all my other JS, but doesn't work for Jquery.ui.js ... it applies the sortable method and I am able to drag and drop one time, but then it no longer works.

The working option, which is not ideal, is:

_pagePartial.php :

   // called every single ajax update ... ugh! 
   $cs->registerScriptFile($baseUrl . '/js/jquery.ui.js');
   $('#sortable-list-left').sortable();
   $('#sortable-list-right').sortable();

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

If you don't remove the list holder (such as ul), and you have dynamical li content inside it, you won't have to rebind sortable() after ajax call. Otherwise, you replace your list with new HTML content, you have to do it. Here is example of David Hoerster

Example sortable with ajax

edited May 23 '17 at 12:31

Community

1
1

answered Oct 22 '13 at 03:05

Telvin Nguyen

3,569
4
25
39

#sortable-list-left , #sortable-list-right are generated by ajax call, so I do need to rebind. Not sure whats going on. – bonez Oct 22 '13 at 14:46
"#sortable-list-left , #sortable-list-right are generated by ajax call" - It means that they are new DOM which are added, if you are looking for actually answer behind it, refer to http://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-ajax-loads?answertab=active#tab-top – Telvin Nguyen Oct 22 '13 at 15:26

JQueryUI sortable only works once

1 Answers1