jquery sortable and serialize in database?

I am close to finishing this but am stuck at how to get the values out of the database and display the <li></li> in the correct order with the correct link.

So far I have this:

HTML

    <ul id="navMenu">
    <li id="navMenu_1"><a href="http://www.example.com/home">Your Home</a></li>
    <li id="navMenu_2"><a href="#">Preferences</a></li>
    <li id="navMenu_3"><a href="#">Your Mailbox</a></li>
    <li id="navMenu_4"><a href="#">Game Updates</a></li>
    <li id="navMenu_5"><a href="#">Message Boards</a></li>
</ul>

JQUERY

$('#navMenu').sortable({

opacity: '0.8',
containment: '#navMenu',
cursor: 'move',
revert: true,
tolerance: 'pointer',
align: 'y',
update: function() {
    $.ajax({data: {navMenuLayout: $('#navMenu').sortable('serialize')}});
}
});

AJAX PHP

if (isset($_REQUEST['navMenuLayout'])) {

session_start();
$q = $dbc -> prepare("UPDATE layout SET navMenu = ? WHERE id = ?");
$q -> execute(array($_REQUEST['navMenuLayout'], $_SESSION['id']));
}

Everything works and I get a string like this saved into my database, when 开发者_C百科a user changes the order of the list.

navMenu[]=3&navMenu[]=1&navMenu[]=5&navMenu[]=2&navMenu[]=4

From having this in the database how can I then get php to echo the html above in the correct order, with the correct text showing for each link?

---

Assuming that you're storing the order of the navigation, you can put them in an array and then loop through the array to show the menu items in the correct order

See the example I've written below:

$nav_order = array("home" => '2',
                   "preferences" => '1',
                   "mailbox" => '4',
                   "game_updates" => '5',
                   "message_boards" => '3');

// Sort the menu items in to the right order
$sorted_order = sort($nav_order, SORT_NUMERIC);

// Start the list
echo '<ul id="navMenu">';

// Go through each item in the array, and show the menu item
foreach ($sorted_order AS $menu_key => $menu_order)
{
    switch($menu_key)
    {
        case "home":
              echo '<li id="navMenu_1"><a href="http://www.example.com/home">Your Home</a></li>';
              break;
        case "preferences":
              echo '<li id="navMenu_2"><a href="#">Preferences</a></li>';
              break;
        case "mailbox":
              echo '<li id="navMenu_3"><a href="#">Mailbox</a></li>';
              break;
        case "game_updates":
              echo '<li id="navMenu_4"><a href="#">Game updates</a></li>';
              break;
        case "message_boards":
              echo '<li id="navMenu_5"><a href="#">Message Boards</a></li>';
              break;
    }
}

// End the list
echo '</ul>';