jQuery Sortable Getting New Parent ID?

Question

I'm working with sortable today and a little stuck.

I'm trying to get the new parent's ID to use in an ajax request.

EDIT: I have it logging the parent now but it's just adding the same parent ID in the array for all of them.

$('.portlet-row').sortable({
    connectWith: ".portlet-row",
    update: function(e, ui) {
  
    var imageids_arr = [];
    var listids_arr = [];

    $('.portlet').each(function(){
       var id = $(this).attr('id');
       var split_id = id.split("_");
       imageids_arr.push(split_id[1]);   

       var ids = $(e.target).attr('id');
       var split_ids = ids.split("_");
       listids_arr.push(split_ids[1]);   
    });

    $.ajax({
      url: 'sorts.php',
      type: 'post',
      data: {imageids:imageids_arr, listids: listids_arr},
      success: function(response){ }
    });

    }   

});

$('.portlet-row').disableSelection();

what does `portlet-row` look like ? can you add html code ? – Swati Jun 30 '20 at 03:59 — Swati, Jun 30 '20 at 03:59

Swati · Accepted Answer · 2020-06-30T08:24:23.080

I don't know if i understood correctly but as you are iterating through .portlet div you need to use this to get .portlet-row value inside that .You can use $(this).find('.portlet-row').attr('id') to get that value.Also, instead of creating 2 different array you can just create JSON Array with listid and imageid together and pass the same to your php.

Demo Code :

$('.portlet-row').sortable({
  connectWith: ".portlet-row",
  update: function(e, ui) {
    var imageids_arr = [];
    var listids_arr = [];
    var datas = new Array()
    $('.portlet').each(function() {
      item = {}; //new object array
      var id = $(this).attr('id');
      var split_id = id.split("_");
      imageids_arr.push(split_id[1]);
      item["imageid"] = split_id[1]; //add object
      //current portlet div->under that find porlet row-> id
      var ids = $(this).find('.portlet-row').attr('id');
      var split_ids = ids.split("_");
      listids_arr.push(split_ids[1]);
      item["listid"] = split_ids[1]; //add object
      datas.push(item); //add to array object

    });
    console.log(imageids_arr)
    console.log(listids_arr)
    console.log(datas)

  }

});

$('.portlet-row').disableSelection();

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="portlet" id="port_1">
  <div id="chart_7" class="portlet-row ui-sortable">
    <p>Some text</p>
  </div>
</div>
<div class="portlet" id="port_2">
  <div id="chart_8" class="portlet-row ui-sortable">
    <p>Some text1</p>
  </div>
</div>
<div class="portlet" id="port_3">
  <div id="chart_9" class="portlet-row ui-sortable">
    <p>Some text11</p>
  </div>
</div>
<div class="portlet" id="port_4">
  <div id="chart_10" class="portlet-row ui-sortable">
    <p>Some text111</p>
  </div>
</div>

does your `html structure` is same as i have created in demo code ? does `.portlet` have `portlet-row` inside it ? or some other structure is there ? — Swati, Jun 30 '20 at 09:07
Fixed it, just replaced: var ids = $(this).parent().attr("id"); Thank you so much for your help! — Paul, Jun 30 '20 at 09:44

jQuery Sortable Getting New Parent ID?

1 Answers1