CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Joe
Joe

Reputation: 817

Sortable broken jQuery UI Sortable (ajax loaded)

I am trying to get jQuery UI's Sortable, as Portlet's, work. The data is fetched from via jQuery's ajax method and passed into a function displayAllStrenghts(allStrengths) where the proper div's are placed around the data to display. For some reason, the sort functionality is lost when I made the switch over to an ajax populated list. Maybe someone can pinpoint my error?

My HTML consists only of a div (nested inside an HTML table within another table):

        <tr>
           <td class="DGBody">
              <table class="Data">
                 <tr>
                    <td>
                       <div class="empStrengths"></div>
                    </td>
                 </tr>
                 <tr>
                    <td>
                       <div class="allStrengths"></div>
                    </td>
                 </tr>                     
              </table>
           </td>
        </tr>

Note: I'm only focusing on <div class="allStrengths"></div> here.

Here is the JavaScript

 displayAllStrengths: function (allStrengths) {

    var self = this;
    var idx, strength, description;

    for (idx = 0; idx < 34; idx++) {
       strength = allStrengths[idx].Key;
       description = allStrengths[idx].Value;

       $("div.allStrengths").append('<div class="portlet"><div class="head">' + strength +
          '</div><div class="tail" style="display: none;">' + description + '</div></div>');

    }

    self.setupPortlet();
 },

 setupPortlet: function () {

    $("div.allStrengths").sortable({
       containment: "table.Data td div.allStrengths",
       connectWith: "table.Data td div.allStrengths",
       handle: "table.Data td div.allStrengths",
       cancel: ".portlet-toggle",
       placeholder: ".placeholder"
    });
    $(".portlet")
    .addClass("ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".head")
      .addClass("ui-widget-header")
      .prepend("<span class='ui-icon ui-icon-plus portlet-toggle' style='float:right;'></span>");

    $(".portlet-toggle").click(function () {
       var icon = $(this);
       icon.toggleClass("ui-icon-minus ui-icon-plus");
       icon.closest(".portlet").find(".tail").toggle();
    });
 }

I followed (and modified) the example given here under View Source to initialize.

Upvotes: 0

Views: 413

Answers (1)

Runcorn
Runcorn

Reputation: 5224

I am not sure whether i understand your problem. But switching over to the AJAX doesn't seem to affect the functionality of your implementation.

So i tried to replicate your problem using dynamically populated data. And i found a issue in the handle of jquery-ui-sortable . The handle you provided is not working.

So i changed it to a more direct approach, and directly used the .head class of portlet header instead and it worked just fine.

$(".allStrengths").sortable({
       containment: "table.Data td div.allStrengths",
       connectWith: "table.Data td div.allStrengths",
       handle: ".head",
       cancel: ".portlet-toggle",
       placeholder: ".placeholder"
});

And here is the Working Demo

Hope this helps your cause.

Upvotes: 1

Related Questions