Fire sortable event at button click

Viewed 94

I have 3 divs in which I drag and drop the value, but at the same time the div sortable event fires. How I can trigger the sortable event after I finish drag and procedure.

Using below code first i drag and drop.

var pushSectionIdvalueLayer1 = [];
var pushSectionIdvalueLayer2 = [];
var pushSectionIdvalueLayer3 = [];
var sectionDataLayer1 = [];
var sectionDataLayer2 = [];
var sectionDataLayer3 = [];
$(function() {
  var bSortable1Show = false;
  var bSortable2Show = false;
  var bSortable3Show = false;
  var iTotalItems = $("ul#sectionlist").children().length;
  var iCntSortable1 = $("ul#sortable1").children().length;
  var iCntSortable2 = $("ul#sortable2").children().length;
  var iCntSortable3 = $("ul#sortable3").children().length;

  function triggerSortable() {
    var iCntSortable1 = $("ul#sortable1").children().length;
    var iCntSortable2 = $("ul#sortable2").children().length;
    var iCntSortable3 = $("ul#sortable3").children().length;
    $(".ul-container").removeClass('connected ui-sortable');
    $(".ul-container").addClass('not-connected');
    if (iCntSortable1 == 0) {
      $("ul#sortable1").addClass('connected ui-sortable');
    } else if (iCntSortable1 > 0 && iCntSortable1 === (iCntSortable2 + 1)) {
      $("ul#sortable2").addClass('connected ui-sortable');
    } else if (iCntSortable1 > 0 && iCntSortable1 === iCntSortable2 && iCntSortable2 === (iCntSortable3 + 1)) {
      $("ul#sortable3").addClass('connected ui-sortable');
    } else if (iCntSortable1 > 0 && iCntSortable1 === iCntSortable2 && iCntSortable2 === iCntSortable3) {
      $("ul#sortable1").addClass('connected ui-sortable');
    }
  }
  $(".connected").sortable({
    connectWith: ".connected",
    start: function(event, ui) {
      triggerSortable();
    },
    update: function(event, ui) {
      triggerSortable();
    }
  }).disableSelection();
  triggerSortable();
});

Parallel the 3 div sortable event fires. I want to fire this event after my operation finishes.

$(function() {
  $("#sectionlist").sortable({
    update: function(e, ui) {
      items = $("#sectionlist li");
      preference = 0;
      for (var x = 0; x < items.length; x++) {
        preference += 1;
      }
    }

  }).disableSelection();
});
$(function() {
  $("#sortable1").sortable({
    update: function(e, ui) {
      items = $("#sortable1 li");
      preferenceLayer1 = 0;
      sectionDataLayer1 = [];
      check = [];
      pushSectionIdvalueLayer1 = [];
      for (var x = 0; x < items.length; x++) {
        pushSectionIdvalueLayer1.push(preferenceLayer1);
        sectionDataLayer1.push(items[x].id);

        preferenceLayer1 += 1;
      }
    }

  }).disableSelection();
});
$(function() {
  $("#sortable2").sortable({
    update: function(e, ui) {
      items = $("#sortable2 li");
      preferenceLayer2 = 0;
      sectionDataLayer2 = [];
      pushSectionIdvalueLayer2 = [];
      for (var x = 0; x < items.length; x++) {
        pushSectionIdvalueLayer2.push(preferenceLayer2);
        sectionDataLayer2.push(items[x].id);
        preferenceLayer2 += 1;
      }
    }

  }).disableSelection();
});
$(function() {
  $("#sortable3").sortable({
    update: function(e, ui) {
      items = $("#sortable3 li");
      //console.log(items.length);
      preferenceLayer3 = 0;
      sectionDataLayer3 = [];
      pushSectionIdvalueLayer3 = [];
      for (var x = 0; x < items.length; x++) {
        pushSectionIdvalueLayer3.push(preferenceLayer3);
        sectionDataLayer3.push(items[x].id);
        preferenceLayer3 += 1;
      }
    }
  }).disableSelection();
});

Here is my HTML code

<table id="classTable" class="table table-bordered">
  <thead>
  </thead>
  <tbody>


    <tr>
      <td>Level 1</td>
      <td>Level 2</td>
      <td>Level 3</td>
      <td>All Section</td>
      <td>
        <asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-primary" OnClick="btnSave_Click" />
      </td>
    </tr>
    <tr>
      <td>
        <ul id="sortable1" class="ul-container connected" title="Level1">
          <li></li>
        </ul>
      </td>
      <td>
        <ul id="sortable2" class="ul-container connected" title="Level2">
          <li></li>
        </ul>
      </td>
      <td>
        <ul id="sortable3" class="ul-container connected" title="Level3">
          <li></li>
        </ul>
      </td>
      <td>
        <ul id="sectionlist" class="connected" title="SectionName" style="overflow:scroll;height:400px;">
        </ul>
      </td>
    </tr>

  </tbody>
</table>

I want to fire this SORTABLE CODE at the time when an admin clicks on the button.

I tried this but it is not working:

$("#<%= btnSave.ClientID %>").on('click', function() {
  $('#sortable1').sortable('option', 'update');
  $('#sortable2').sortable('option', 'update');
  $('#sortable3').sortable('option', 'update');
});

Here is the solution of my QUESTION :- Please have a look

  $("#<%= btnSave.ClientID %>").on('click', function () {

            if (qString == "1") {
                //debugger;
                updateDivInEditMode();               
            }
});
function updateDivInEditMode() {
            //For Level1 
            var items1 = $("#sortable1 li");
            var preferenceLayer1 = 0;
            sectionDataLayer1 = [];
            check = [];
            pushSectionIdvalueLayer1 = [];
            for (var x = 0; x < items1.length; x++) {
                pushSectionIdvalueLayer1.push(preferenceLayer1);
                sectionDataLayer1.push(items1[x].id);

                preferenceLayer1 += 1;
            }
            //For Level2
            var items2 = $("#sortable2 li");
            var preferenceLayer2 = 0;
            sectionDataLayer2 = [];
            pushSectionIdvalueLayer2 = [];
            for (var x = 0; x < items2.length; x++) {
                pushSectionIdvalueLayer2.push(preferenceLayer2);
                sectionDataLayer2.push(items2[x].id);
                preferenceLayer2 += 1;
            }
            //For Level3
            var items3 = $("#sortable3 li");
            var preferenceLayer3 = 0;
            sectionDataLayer3 = [];
            pushSectionIdvalueLayer3 = [];
            for (var x = 0; x < items3.length; x++) {
                pushSectionIdvalueLayer3.push(preferenceLayer3);
                sectionDataLayer3.push(items3[x].id);
                preferenceLayer3 += 1;
            }
        }

I have use the same code again in individual function

0 Answers
Related