1

Introduction

I currently use the jQuery .sortable function and it works like a charm. However this is only client side and I would like to store the new sorting position to the backend (mySQL database).

I store the sorting order using numerical field (and retrieved using SQL ORDER BY).

Menu text     Sorting ID
------------   ---------
Menu item #1 => 0
Menu item #2 => 1
Menu item #3 => 2
Menu item #4 => 3

Current HTML code

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #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: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #4</li>
</ul>


</body>
</html>

Tinker.io link: http://tinker.io/b3f27

The question

Now, how would I store the new position into the database? Adding an ID to the sortable and posting it back to a php script which would lookup both sorting positions and switch them over is what I would do but I'm looking forward for your opinions.

1 Answer 1

2

This is basic idea is sending data using AJAX after update:

JS:

$("#sortable").sortable({
  update : function () {
      var items = $('#sortable').sortable('serialize');
    $.get("sort.php?"+items);
  }
});

HTML:

<ul id="sortable">
  <li id="s_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #1</li>
  <li id="s_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #2</li>
  <li id="s_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #3</li>
  <li id="s_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #4</li>
</ul>

Here you need to set id to each LI, please see working demo

PHP:

<?php
var_dump($_GET);
?>

You can find more detailed answers here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.