Looking for a little help with this please:
I have implemented a drag & drop re-ordering feature in a survey i'm building, however i am unsure of how to submit the order of the list to my server once the user has re-ordered it.
Here is the JS for re-ordering:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
and the html:
<ol id="sortable">
<li><label for=""><input type="checkbox" name="resortable-option1" value="1">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option2" value="2">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option3" value="3">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option4" value="4">Option 1</label></li></ol>
Here is an example using a form and submitting to PHP:
action page:
<?php
if(isset($_POST["resortable-option"])){
foreach($_POST["resortable-option"] as $item){
echo $item."<br>";
}
}
?>
HTML Form:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
<form action="ActionPage" method="post">
<ol id="sortable">
<li><label for=""><input type="checkbox" name="resortable-option[]" value="1">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option[]" value="2">Option 2</label></li>
<li><label for=""><input type="checkbox" name="resortable-option[]" value="3">Option 3</label></li>
<li><label for=""><input type="checkbox" name="resortable-option[]" value="4">Option 4</label></li></ol>
<input type="submit" value="send">
</form>
Try something like this:
$("#sortable").sortable({
stop: function (event, ui) {
//Serializes the sortable's item id's into an array of string
var senderStrIndexArray = $(this).sortable("toArray");
$.ajax({
type: "POST",
url: '...',
data: { senderOrderedServicesIds: senderStrIndexArray },
});
}
});
$( "#sortable" ).disableSelection();
You will send an array with sort-indexes of your items and then you can write them in your database.