Foreach loop not generating Ajax posted data
<p>I am using jquery sortable to sort an images grid. The script works (I am getting the grid of images, I can sort it (drag-drop), my success results yield the data array expected (see below) and the firebug network tab lists the sorted success data posted. My problem after hours of searching is to find out why the foreach loop does not echo the posted values of the success results. Suspect I'm missing the obvious here. Any assistance would be really appreciated.</p>

<p>filename: draggable.php</p>

<pre><code>                &lt;!doctype html&gt;
                &lt;html lang="en"&gt;
                &lt;head&gt;
                  &lt;meta charset="utf-8"&gt;
                  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
                  &lt;title&gt;jQuery UI Sortable - Display as grid&lt;/title&gt;
                  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
                  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
                  &lt;style&gt;
                  #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
                  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
                  &lt;/style&gt;
                  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
                  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
                  &lt;script&gt;
                  $( function() {
                    $( "#sortable" ).sortable();
                    $( "#sortable" ).disableSelection();
                  } );
                  &lt;/script&gt;
                &lt;/head&gt;
                &lt;body&gt;

                &lt;?php
                &lt;!-----------get media_urls from database-----------------&gt;

                 &lt;div id="element"&gt;
                &lt;ul id="sortable"&gt;


                &lt;li id="item-1" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url1 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-2" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url1 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-3" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url2 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-4" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url3 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-5" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url4 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-6" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url5 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-7" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url6 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-8" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url7 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-9" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url8 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;
                &lt;li id="item-10" class="ui-state-default"&gt;     &lt;img class="image" src="&lt;?php echo $media_url9 ?&gt;" width="100px" height="100px"&gt;       &lt;/li&gt;


                &lt;/ul&gt;
                                    //test results-see two outputs below
                Query string: &lt;span&gt;&lt;/span&gt;
                &lt;p class ="result"&gt;&lt;/p&gt;

                &lt;/div&gt;


                &lt;script&gt;

                $('ul').sortable({

                    update: function (event, ui) {
                        var data = $(this).sortable('serialize');

                         $('span').text(data);      

                        $.ajax({
                            data: data,
                            type: 'POST',
                            url: 'draggable.php',
                            success:function(result){
                            $(".result").html(data);}
                        });  

                    }
                });

                //$(window).resize(resize);

                &lt;/script&gt;

                &lt;?php
                $i = 0;

                foreach ($_POST['item'] as $value) {
                    echo "each".$value;
                    $i++;
                }
                ?&gt;

                &lt;/body&gt;
                &lt;/html&gt;
</code></pre>

<p>and here are the two sucessful results </p>

<pre><code>            Query string: item[]=2&amp;item[]=1&amp;item[]=3&amp;item[]=4&amp;item[]=5&amp;item[]=6&amp;item[]=7&amp;item[]=8&amp;item[]=9&amp;item[]=10

            item[]=2&amp;item[]=1&amp;item[]=3&amp;item[]=4&amp;item[]=5&amp;item[]=6&amp;item[]=7&amp;item[]=8&amp;item[]=9&amp;item[]=10
</code></pre>