jQuery UI saving sortable list to PHP array
Solution 1
You are going to want to use usort with a closure (available in php 5.3+) to get the keys in the order that you need them in.
$newOrder = $_POST["neworder"];
$config_keys = array_keys($config);
usort($config_keys, function($a, $b) use($newOrder) {
return array_search($a, $newOrder) - array_search($b, $newOrder);
});
Then you can change rewrite $config into the new order
$newConfig = array();
foreach($config_keys as $key){
$newConfig[$key] = $config[$key];
}
$config = $newConfig;
unset($newConfig);
From here you can persist $config in whatever method makes the most sense for your use case. I would advise against using it to create a php file though, a better approach may be to use
file_put_contents($cacheFile, serialize($config));
then to retrieve
$config = unserialize(file_get_contents($cacheFile));
Solution 2
There are so many threads that covers your problem
- jQuery UI Sortable, then write order into a database
- save jquery ui-sortable positions to DB
- Optimal way to save order of jQueryUI sortable list with Meteor
- http://dev.nirmalya.net/articles/javascript/saving-ordering-of-a-sortable-list-using-jquery-ui
I am sure you will find your answer there. All is about getting the order via
$('#mylist').sortable('toArray');
save it to database
and then get the order from database and show it properly with loop. Take a look at tutorials.
user1480019
Updated on July 20, 2022Comments
-
user1480019 almost 2 years
I'm trying to save the order of a table with jQuery UI (sortable) to a PHP array.
I have simplified it very considerably but this is the basic idea of it. I have a table with a sortable list embedded in it. The table is generated through a PHP
foreach
involving the multi-dimensional array that is included in another file (config.php
).config.php
:<?php $config = array( "mno" => array('item 5'), "abc" => array('item 1'), "ghi" => array('item 3'), "pqr" => array('item 6'), "jkl" => array('item 4'), "vwx" => array('item 8'), "def" => array('item 2'), "stu" => array('item 7'), ); ?>
table (
index.html
):<table cellpadding="2" cellspacing="0" align="center" id="mytable"> <tbody>
<?php $i = 0; include 'config.php'; foreach($config AS $name => $value){ $item = $value[0]; echo ' <tr id="'.$name.'-'.$i++.'"> <td>'.$item.'</td> </tr>'; } ?>
</tbody> </table>
scripts (
index.html
):<!-- Add jQuery library --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Add jQuery UI library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; }; $("#mytable tbody").sortable({ helper: fixHelper, opacity: 0.5, scroll: false, update: function () { var data = $('#mytable tbody').sortable('serialize'); $.post("edit.php", {'neworder': data}); } }).disableSelection(); }); </script>
The sorting works fine but I don't know how to save the neworder value (
$_POST['neworder']
) into the array what is inconfig.php
.I think I must use the PHP functions
uasort()
(oruksort()
,uksort()
) with the combination offile_put_contents
to save the new order inconfig.php
.So something like this:
<?php if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['neworder'])) { /* Here file_put_contents in config.php the new order. So: $config = array( "mno" => array('item 5'), "abc" => array('item 1'), "ghi" => array('item 3'), "pqr" => array('item 6'), "jkl" => array('item 4'), "vwx" => array('item 8'), "def" => array('item 2'), "stu" => array('item 7'), ); Becomes: $config = array( "abc" => array('item 1'), "def" => array('item 2'), "ghi" => array('item 3'), "jkl" => array('item 4'), "mno" => array('item 5'), "pqr" => array('item 6'), "stu" => array('item 7'), "vwx" => array('item 8'), ); After this is send by Jquery UI: neworder:abc[]=1&def[]=6&ghi[]=2&jkl[]=4&mno[]=0&pqr[]=3&stu[]=7&vwx[]=5 I've tried this: $filename = 'config.php'; $lines = file( $filename , FILE_IGNORE_NEW_LINES ); $linenumber = 2; foreach( $_POST['neworder'] AS $name => $val){ $phost = $val[0]; $lines[$linenumber] = ' "'.$name.'" => array(\'' . $phost . '\'),'; $linenumber++; } file_put_contents( $filename , implode( "\n", $lines ) ); But the '$val' is not send with Jquery only the order. */ } ?>
-
Admin almost 11 yearsThanks, I will use this. It works with this modification in jQuery UI:
update: function () { var a = $('#mytable tbody').sortable('toArray'); var newOrdering = []; for (var i=0; i<a.length; i++) newOrdering[i] = a[i].substring(0, a[i].indexOf('-')); $.post("edit.php", {'neworder': newOrdering}); }
-
waheed about 7 years(function($) { $.fn.serial = function() { var array = []; var $elem = $(this); $elem.each(function(i) { var menu = this.id; $('li', this).each(function(e) { array.push( menu + '['+e+']=' + this.id ); }); }); return array.join('&'); } })(jQuery);