StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In particular you need to look at attaching an event to the sortable</p> <p><a href="http://jqueryui.com/demos/sortable/#event-update" rel="nofollow">http://jqueryui.com/demos/sortable/#event-update</a></p> <p>and serialize for getting the relevant content <a href="http://jqueryui.com/demos/sortable/#method-serialize" rel="nofollow">http://jqueryui.com/demos/sortable/#method-serialize</a></p> <p><strong>EDIT</strong></p> <p>This is a primitive version of what you need to do.</p> <pre><code><script> $(function() { var arrayOfIds = []; $( "#sortable" ).sortable({ update: function(event, ui) { $.each($(this).sortable('toArray'), function(key, value) { arrayOfIds.push(value.replace('el-','')) }); var jqxhr = $.ajax({ url: "order.php?order="+encodeURIComponent(arrayOfIds), }) .success(function(response) { console.log("success" + response ); }) .error(function() { console.log("error"); }) .complete(function() { console.log("complete "); }); } }); $( "#sortable" ).disableSelection(); }); </script> </code></pre> <p>Each li element than needs an id that your DB can understand</p> <pre><code><li class="ui-state-default" id="el-1">1</li> </code></pre> <p>the "1" in id="el-1" should relate to an id in your DB table. When you reorder, the update event fires, goes through the new order, grabs all the ids and passes that to an ajax request which a php file then can pick up. the order.php script then go split the numbers by the "," and update your table one by one.</p> <p>e.g.</p> <pre><code>$itemOrders = explode(',',$_POST['order']); $sizeOfList = sizeof($itemOrders);for($i=0; $i<$sizeOfList; $i++) { $itemId = intval($itemOrders[$i]); $query = "UPDATE your_table_name SET order_no = '".$i."' WHERE id = '".$itemId."' "; if ($result = $msHandle->query($query)) { $message = 'success'; } else { $message = 'fail '; } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload