Expanding my Sort function (Need foreach help badly)

I feel like a total novice and should for not properly understanding how this works but here is what I’m working with.

I have a simple way of sorting a list of divs to save/maintain their state upon each change thats made via ‘dragging’ one element above or below another.

I handle it like so:

[code=php]<?php

$toSort = $_POST[‘drag’];

// Connect to the DB
include(“config.php”);

// Re-organize the order of the elements
for ($i = 0; $i < count($toSort); $i++) {
mysql_query(“UPDATE `Items` SET `Order` = “.$i.” WHERE `itemid` = “.$toSort[$i].””);
}
echo “<pre>”;
print_r($toSort);
echo “</pre>”;

mysql_close($cfg[‘connexion’]);

?>[/code]

To give some understanding to the framework itself, one list for example is generated like so to produce the content for #myList1(each list is generated by its boxid matching the list number, so #myList2 takes all instances where boxid = 2 etc):

[code=php]<?php

// Connect to the DB
include(“config.php”);

$result = mysql_query(‘SELECT itemid,content,rating,boxid FROM `Items` WHERE boxid = 1 ORDER BY `Order`’); //How to generate contents for box 1

while($row = mysql_fetch_array($result))
{

$content .= ‘<div id=”drag_’ . $row{‘itemid’} . ‘” class=”fudge list_element”>
<span id=”‘ . $row{‘itemid’} . ‘” rating=’.$row{‘rating’}.’><span class=”names” id=”‘ . $row{‘itemid’} . ‘”>’.$row{‘content’}.'</span> (<span id=”‘ . $row{‘itemid’} . ‘” class=”lol”>’ . $row{‘rating’} . ‘</span>)</span>
</div>’.”n”;

}

// return list of elements
echo $content;
?>
[/code]

So you can see where the element is assigned an ID of drag_itemid and now we get to the problem. Each individual list will save its order just fine but I wanted to connect them. I have…Each myList# has a class of ‘biglist’. The problem is devising a way to save the order based on WHICH list there are now in as well since content is being dragged between them (About 10 lists).

Inside my page where I’ve pre-built these boxes I call a javascript file to handle the edit-in-place functionality as well as sorting based on the ‘event’ it detects when somethings order is changed.

It looks like so:

[CODE]$(function()
{
// I know this is all my fault and looks really silly
// connectWith doesnt work properly when certain boxes are init after others but this seems to work

firstbox();
firstboxList();

});

function firstboxList() // List of Employees off or vacation
{

$.ajax({
url: “list.php”, //where the order and content of the items themself are iterated
success: function(feedback)
{
if(feedback != “”) //Verifies if the list contains at least one element
{
// Which div the particular list prints to – each mylist number is in its own iteration page
$(‘#myList1’).html(feedback); // Displays new elements in a list
$(“.lol”).editable // lawl
(“editinplace.php”,
{ // all lol elements use edit in place
event: “dblclick”,
style: ‘inherit’,
tooltip: ‘Double-Click to edit …’,
indicator : “<img src=’images/loading.gif’ /> Submitting …”, // Does a neat little animation here with a 16×16 gif
callback : function(value, settings)
{
// settings involing plugin parameters
$(‘#data’).html(‘Element Changed : ‘+value);
//alert(settings.cssclass);
}
}
);
$(“.names”).editable
(“editinplacenames.php”, //file to handle where to save the boxes title when edited
{ // all lol elements use edit in place
method: “PUT”,
event: “dblclick”,
style: ‘inherit’,
tooltip: ‘Double-Click to edit …’,
indicator : “<img src=’images/loading.gif’ /> Submitting …”, // Does a neat little animation here with a 16×16 gif
callback : function(value, settings)
{
// settings involing plugin parameters
$(‘#data’).html(‘Element Changed : ‘+value);

//alert(settings.cssclass);
}
}
);

/*
$(“.boxtitles”).editable(‘save.php’,
{
indicator : “<img src=’images/loading.gif’ /> Submitting …”, // Does a neat little animation here with a 16×16 gif
event: “dblclick”,
style: ‘inherit’,
submitdata : function(value, settings)
{
return {name: $(this).attri(‘id’), id: <?php echo $id; ?>};
}

});
*/

$(‘#myList1’).sortable({ // Renders items as “sortable”
connectWith: $(‘.biglist’), //each list has this class
placeholder: ‘help’, // css class for the final position of the element if I wanted to re-add .help to the style page
revert: true, // seems to work well
axis: ‘vertically’,
opacity: 0.4,
update : function (sorted)
{
// Callback Function, modifies the list
serial = $(‘#myList1’).sortable(‘serialize’); // Time to serialize that mofo
$.ajax({
url: “sort.php”,
type: “POST”,
data: serial,
success: function(feedback)
{
$(‘#data’).html(feedback);
}
});
}
});

$(‘#myList1’).sortable(“refresh”);
}
}

});
}[/CODE]

I saw a solution on stackoverflow that I think will handle my conundrum but I’m too thick to explain it to myself.

Something along the lines of

[code=php]$(function() {
$(“.biglist”).sortable(
{
connectWith: ‘.biglist’, Not sure if this part works or if it needs to be ul or ol
stop : function ()
{
$.ajax(
{
type: “POST”,
url: “sort.php”, // Might need a new one for this
data:
{
sort1:$(“#myList1”).sortable(‘serialize’),
sort2:$(“#myList2”).sortable(‘serialize’),
sort3:$(“#myList3”).sortable(‘serialize’),
sort4:$(“#myList4”).sortable(‘serialize’),
sort5:$(“#myList5”).sortable(‘serialize’),
etc,etc,etc,etc since I have like 12 lists.

},
success: function(html)
{

alert(html);

}
});
}
}).disableSelection();
});[/code]

[B]Could I just get some explanation as to how to iterate the results? Because I had a function for each list I’m wondering how to combine them with this method using the sort function I posted first.[/B]

Also in #PHP _↴