CODEWITHSUNDEEP
jqueryhtmljquery-ui
TheWandererr
TheWandererr

Reputation: 514

Get the first Id from a list after it has been sorted via Jquery UI Sortable

Szenario:
I am creating a mobile website where a user can sort a list of Names useing the Jquery UI sortable Option.
And based on the order of the List the user will get more information about it in the next page...
The List looks something like this:

<div id="NameContainer" class="ui-widget">
      <div id="sortable_0">John</div>
      <div id="sortable_1">Markus</div>
      <div id="sortable_2">Alex</div>
      <div id="sortable_3">Gabriel</div>    
      <div id="sortable_4">Thomas</div>
      <div id="sortable_5">Jack</div>
      <div id="sortable_6">Jessica</div>
      <div id="sortable_7">Anna</div>
</div>


The divs get added Dynamically to the website with an ongoing ID.
If the user clicks a button(that will direct him to a new page) i want to get the current(after the user has sorted the list) first Elements id from that list.
At the moment i am using this to get the Id:

$("#NameContainer div:first-child").attr("id"));

But i always get the the id from the the first Div that has been added to the List "sortable_0". How can i manage to get the top position after the list has been sorted?

Upvotes: 2

Views: 236

Answers (3)

Haresh Vidja
Haresh Vidja

Reputation: 8496

Check this.. I hope it would be help to you

$( function() {
    $( "#NameContainer" ).sortable({
       stop : function(event,ui){ 
         console.log($( "#NameContainer > div:first" ).attr('id')); 
       }
    }
  );
    $( "#NameContainer" ).disableSelection();
  } );
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<div id="NameContainer" class="ui-widget">
      <div id="sortable_0">John</div>
      <div id="sortable_1">Markus</div>
      <div id="sortable_2">Alex</div>
      <div id="sortable_3">Gabriel</div>    
      <div id="sortable_4">Thomas</div>
      <div id="sortable_5">Jack</div>
      <div id="sortable_6">Jessica</div>
      <div id="sortable_7">Anna</div>
</div>

Upvotes: 2

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8178

Try using serialize to format a string, check this jsfiddle hope this will help too http://jsfiddle.net/keshann/yr273kx2/1/

Upvotes: 2

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

You Select Main Div And Then Select Its First Or Last Or Children Now Its Working Properly 

$(document).ready(function(){
alert($('#NameContainer').find('div:first').attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="NameContainer" class="ui-widget">
      <div id="sortable_0">John</div>
      <div id="sortable_1">Markus</div>
      <div id="sortable_2">Alex</div>
      <div id="sortable_3">Gabriel</div>    
      <div id="sortable_4">Thomas</div>
      <div id="sortable_5">Jack</div>
      <div id="sortable_6">Jessica</div>
      <div id="sortable_7">Anna</div>
</div>

Upvotes: 3

Related Questions