Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI saving sortable list to PHP array
    primarykey
    data
    text
    <p>I'm trying to save the order of a table with jQuery UI (sortable) to a PHP array.</p> <p>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 <code>foreach</code> involving the multi-dimensional array that is included in another file (<code>config.php</code>).</p> <p><code>config.php</code>: </p> <pre><code>&lt;?php $config = array( "mno" =&gt; array('item 5'), "abc" =&gt; array('item 1'), "ghi" =&gt; array('item 3'), "pqr" =&gt; array('item 6'), "jkl" =&gt; array('item 4'), "vwx" =&gt; array('item 8'), "def" =&gt; array('item 2'), "stu" =&gt; array('item 7'), ); ?&gt; </code></pre> <p>table (<code>index.html</code>): </p> <pre><code>&lt;table cellpadding="2" cellspacing="0" align="center" id="mytable"&gt; &lt;tbody&gt; </code></pre> <pre><code>&lt;?php $i = 0; include 'config.php'; foreach($config AS $name =&gt; $value){ $item = $value[0]; echo ' &lt;tr id="'.$name.'-'.$i++.'"&gt; &lt;td&gt;'.$item.'&lt;/td&gt; &lt;/tr&gt;'; } ?&gt; </code></pre> <pre><code> &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>scripts (<code>index.html</code>): </p> <pre><code>&lt;!-- Add jQuery library --&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;!-- Add jQuery UI library --&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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(); }); &lt;/script&gt; </code></pre> <p>The sorting works fine but I don't know how to save the neworder value (<code>$_POST['neworder']</code>) into the array what is in <code>config.php</code>. </p> <p>I think I must use the PHP functions <code>uasort()</code> (or <code>uksort()</code>, <code>uksort()</code>) with the combination of <code>file_put_contents</code> to save the new order in <code>config.php</code>.</p> <p>So something like this: </p> <pre><code>&lt;?php if($_SERVER['REQUEST_METHOD'] == 'POST' &amp;&amp; isset($_POST['neworder'])) { /* Here file_put_contents in config.php the new order. So: $config = array( "mno" =&gt; array('item 5'), "abc" =&gt; array('item 1'), "ghi" =&gt; array('item 3'), "pqr" =&gt; array('item 6'), "jkl" =&gt; array('item 4'), "vwx" =&gt; array('item 8'), "def" =&gt; array('item 2'), "stu" =&gt; array('item 7'), ); Becomes: $config = array( "abc" =&gt; array('item 1'), "def" =&gt; array('item 2'), "ghi" =&gt; array('item 3'), "jkl" =&gt; array('item 4'), "mno" =&gt; array('item 5'), "pqr" =&gt; array('item 6'), "stu" =&gt; array('item 7'), "vwx" =&gt; array('item 8'), ); After this is send by Jquery UI: neworder:abc[]=1&amp;def[]=6&amp;ghi[]=2&amp;jkl[]=4&amp;mno[]=0&amp;pqr[]=3&amp;stu[]=7&amp;vwx[]=5 I've tried this: $filename = 'config.php'; $lines = file( $filename , FILE_IGNORE_NEW_LINES ); $linenumber = 2; foreach( $_POST['neworder'] AS $name =&gt; $val){ $phost = $val[0]; $lines[$linenumber] = ' "'.$name.'" =&gt; array(\'' . $phost . '\'),'; $linenumber++; } file_put_contents( $filename , implode( "\n", $lines ) ); But the '$val' is not send with Jquery only the order. */ } ?&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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