JS sortable POST start and update function together? - html

Question

I would like to know how can I the current list and the sorted list sending together with POST?
I got the results well, put the posting sending only one list. The problem is the currentlist VAR is outside of UPDATE. How can I find it?
<script type="text/javascript">
$(".wrapper").sortable({
handle: ".draghandler",
connectWith: $('.wrapper'),
distance: 100,
opacity: 0.4,
cursor: 'move',
start: function (event, ui) {
var currentlist = new Array(); //Aktuális sorrend lista
$('.draghandler').each(function() {
currentlist.push($(this).attr("id"));
$('#currentlist').html(currentlist);
});
},
update: function (event, ui) {
var newsortedlist = new Array(); //Átrendezett lista
$('.draghandler').each(function() {
newsortedlist.push($(this).attr("id"));
});
$('#newsortedoutput').html(newsortedlist);
//$('#responsefromserver').html('Rendezés mentése folyamatban');
**//'currentid': currentlist is outside of update:function, it is in start:function, therefore it dosen't send.**
$.post('/megrendelesek/sortmouse.php',{'currentid': currentlist, 'sortid': newsortedlist}, function(theResponse){
$('#responsefromserver').html(theResponse);
});
}
});
$(".wrapper").disableSelection();
$(".draghandler").disableSelection();
</script>
<div id="currentlist"></div>
<div id="newsortedoutput"></div>
<div id="responsefromserver"> </div>

Answer 1

To do what you require you need to store currentlist within scope of both function handlers. A global variable would do this, but is bad practice.
A better approach would be to store the array in a data attribute on the relevant .wrapper container. Then you can access this wherever necessary.
Also note that you can use the map() function to simplify creating the array from the drag handle id attributes.
$(".wrapper").sortable({
handle: ".draghandler",
connectWith: $('.wrapper'),
distance: 10, // reduced to 10 to make this demo easier to use
opacity: 0.4,
cursor: 'move',
start: function(e, ui) {
var currentlist = $('.draghandler').map((i, el) => el.id).get();
$(e.target).closest('.wrapper').data('currentlist', currentlist);
$('#currentlist').html(currentlist);
},
update: function(e, ui) {
var currentlist = $(e.target).closest('.wrapper').data('currentlist');
var newsortedlist = $('.draghandler').map((i, el) => el.id).get();
$('#newsortedoutput').html(newsortedlist);
// Commented as the AJAX call will cause an error in an SO snippet...
/*
$.post('/megrendelesek/sortmouse.php', {
'currentid': currentlist,
'sortid': newsortedlist
}, function(theResponse) {
$('#responsefromserver').html(theResponse);
});
*/
}
});
$(".wrapper").disableSelection();
$(".draghandler").disableSelection();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/jquery-ui-git.css" />
<div class="wrapper">
<div class="item">
Foo
<div class="draghandler" id="item-1">DRAG</div>
</div>
<div class="item">
Foo
<div class="draghandler" id="item-2">DRAG</div>
</div>
<div class="item">
Foo
<div class="draghandler" id="item-3">DRAG</div>
</div>
</div>
<br />
<div id="currentlist"></div>
<div id="newsortedoutput"></div>
<div id="responsefromserver"> </div>