Skip to content

Instantly share code, notes, and snippets.

@RakibSiddiquee

RakibSiddiquee/jquery-sortable-serialize.html

Last active April 21, 2017 13:14
Show Gist options
  • Save RakibSiddiquee/658062993e907626b39446cb216ac44e to your computer and use it in GitHub Desktop.
Save RakibSiddiquee/658062993e907626b39446cb216ac44e to your computer and use it in GitHub Desktop.
Download ZIP
Jquery sortable and serialze and save it database using php
Raw
jquery-sortable-serialize.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Jquery sortable serialize</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="content-wrapper">
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body table-responsive no-padding">
<ul id="sortable">
<li class="item" id="item-10">Item 1</li>
<li class="item" id="item-20">Item 2</li>
<li class="item" id="item-30">Item 3</li>
<li class="item" id="item-40">Item 4</li>
<li class="item" id="item-50">Item 5</li>
</ul>
<button type="button" id="saveData">Save</button><br/>
<span id="result"></span>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
$(document).ready(function () {
$("#sortable").sortable();
$('#saveData').click(function () {
var data = $("#sortable").sortable('serialize');
/*$.post('{{ url("test-position") }}', {"data": data}, function(d){ //pass data to destination php file or url
alert(d);
});*/
$("#result").text(data);
});
});
</script>
<!--
then pass the data to destination php file or route
take an empty array and use parse_str function to convert it to simple array
$data = [];
parse_str($request->data, $data);
print_r($data);
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment