I have 2 lists and I'm using jQuery sortables to organize them...one is a list of elements in their original order and the other is a container for the newly sorted list of these elements. I'd like to send this new list order to the next page (using the post method ($.post?)), but so far have been unable to get this to work.
Thanks to this post: jQuery UI Sortable, then write order into a database I've been able to see the array (of the new order) on my current page (Query String: item[]=3&item[]=1&item[]=2&item[]=4), but when I attempt to post it to the next page, my array is empty..."array(0) { }".
I'm very new to jQuery and PHP, and am sure I'm missing something obvious...
Example of lists:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<h1>Lists</h1>
<ul id="list2" class="droptrue">
</ul>
<ul id="list1" class="droptrue">
<li class="ui-state-default" id="item-1"><button>Element 1</button></li>
<li class="ui-state-default" id="item-2"><button>Element 2</button></li>
<li class="ui-state-default" id="item-3"><button>Element 3</button></li>
<li class="ui-state-default" id="item-4"><button>Element 4</button></li>
<li class="ui-state-default" id="item-5"><button>Element 5</button></li>
</ul>
<br style="clear: both;" />
Query String <div></div><br>
<button id="goto">continue</button>
</body>
Example script:
$(function() {
$( "ul.droptrue" ).sortable({
connectWith: "ul"
});
$( "ul" ).sortable({
handle: 'button',
cancel: ''
})
$( "#list1, #list2" ).disableSelection();
});
$(function() {
$( "button" )
.button()
.click(function( event ) {
event.preventDefault();
});
$('#goto').button().click(function(event){
document.location.href='three.php';
})
});
$(document).ready(function () {
$('#list2').sortable({
stop: function (event, ui) {
var listdata = $(this).sortable('serialize');
$('div').text(listdata);
$.post( "three.php", listdata );
}
});
});
CSS:
#list1, #list2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 100px; background: #eee; padding: 5px; width: 250px; height: 500px;}
#list2 li button, #list1 li button{ margin: 0px; padding: 0px; font-size: 10px; width: 250px; height: 25px;}
PHP (on next page - "three.php"):
var_dump($_POST) //produces an empty array "array(0) { }"
//once I can get the array to the next page, I would like to iterate through it
//and insert it into a database table
$i = 0;
foreach ($_POST['item'] as $value) {
//insert into table column where [id] = $value
$i++;
}
