+ Start a Discussion
umair ayazumair ayaz 

How to get the Id of the record sorted using jquery

Hello Everyone I am new to Jquery and I have got a requirement to crate a list which could be sorted by drag and drop. Initially my plan was to get the order number using the positions but this method was not helpful becuase in differant related lists it has differant order number. So my only option is to get the Id of the updated record. I have tried many things but i am not able to get the Id as i should try some dynamic method. Would be great if anyone could guide me on how to get the Id. I have added my Visualforce and jquery code below.
<apex:page controller="DragController" >
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>jQuery UI Sortable - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <link rel="stylesheet" href="/resources/demos/style.css"/>
            #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
            #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 35px; }
            #sortable li span { position: absolute; margin-left: -1.3em; }
        <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>
        $( function() {
            $( "#sortable" ).sortable({
                start: function(event, ui) {

                    var start_pos = ui.item.index();
                    ui.item.data('start_pos', start_pos);
                change: function(event, ui) {
                    var start_pos = ui.item.data('start_pos');

                    if (start_pos < index) {
                        $('#sortable li:nth-child(' + index + ')').addClass('highlights');
                    } else {
                        $('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
                update: function(event, ui) {
                    var start_pos = ui.item.data('start_pos');
                    var end_pos = ui.item.index();
                    var order_number = end_pos+1;
                    var fnumber = start_pos+1;
                    var test = $('#test').attr('name'); 

                    alert ("starting order "+fnumber);
                    alert ("Ending order "+order_number);
                    alert (test);
                    $('#sortable li').removeClass('highlights');
            $( "#sortable" ).disableSelection();
        } );        
        <apex:form id="form">
            <ul id="sortable">
                <apex:repeat value="{!Accounts}" var="acc">
                    <li class="ui-state-default" id="{!acc.id}"   >
                        <span id="test" name="{!acc.id}">{!acc.id}</span></li>
                <apex:actionFunction action="{!updateOrder}" name="startingOrder" reRender="form" > 
                    <apex:param name="param1" value="{!starting_order}"/> 

Mustafa JhabuawalaMustafa Jhabuawala

Can you provide me some more details on this, what do you mean by -- to create a list which could be sorted by drag and drop.

Can you trouble shoot your issue by checking browser console (press F12 to open the console in browser) and share the results which you observe in the console logs.

Looking into your code it seems that your jQuery code is triggered before the li element is generated which can be the reason why your sorting is not working. 

Let me know your findings on the above mentioned points, so that I can further investigate on your issue.