Making A List Using PHP And NestedSortable

Question

I'm attempting to make my own CMS and one thing I wanted to do was make it so I could reorder and change the navigation elements in the CMS. I found a plugin called NestedSortable that let me do this. I used it and had a lot of trouble with it, so I got my expert PHP friend to help me do it. She sat down, struggled for a bit and then got it to work.

Well, the idiot I was, when I got home later that day I sat down, took my local copy, added a something to it and uploaded it to the server... not realizing I had forgotten to download the newer version! So poof, all my friend's work is gone and I'm stuck with a navigation adjustment that doesn't work.

I lost the index.php (that displays it on the page) file but I saved the nav_adjust.php (that inputs it into the database). All I want is to be able to re-order the navigation and send it to the database to be displayed correctly on refresh. The information is send to nav_adjust.php when the submit button is pressed.

The only limitation is that the navigation can only have 3 levels to it (primary, child and grandchild). My navigation looks like when they're all primary. I have alerted back the echo for all the images so you can see what nav_adust.php is doing:

(Please note the array values.)

This is as if there was one child on a parent:

This is as if there was two grandchildren on a child:

And this is mixed:

My index.php file, which doesn't work anymore, looks like this:

<form method="post" action="nav_adjust.php"> <!--This form posts to nav_adjust.php-->
    <ol id="pageList">
    <?php 
    $nav = mysql_query("SELECT * FROM `".$name['Website']);
    $num = 0;
    while( $col_nav = mysql_fetch_assoc($nav) ){
        if ($col_nav['orderId'] != 0) {
            echo "<li id='list_".$col_nav['id']."'>
            <div>Example Title</div>";  
        } else {
            echo "<ol>
                <li id='list_".$col_nav['id']."'>
                    <div><h1>Example Title</div>";
                </li>
            </ol>\n";
        }
        echo "</li>\n";
        ++$num;
    }
    ?>
    </ol>
    <button type='submit'>Update</button>
    </form>

<script>

$(document).ready(function(){

    $('#pageList').nestedSortable({
            /*option that don't matter*/
            });

    $("button").on('click', function(event){
        serialized = $('ol#pageList').nestedSortable('serialize');
          $.post( "nav_adjust.php", serialized, function( data ) {
            alert( data );
            });
        return false;
    });

});

 </script>

Again, the above code doesn't work. Instead of making a list item look like this:

<ol>
<li>
    <ol>
    <li></li>
    ...
    </ol>
 </li>
 ...
 </ol>

It makes it look like this (note the closed li tag before the ol):

<ol>
<li></li>
<ol>
    <li></li>
</ol>
...
</ol>

And this is the nav_adjust.php that my friend did for me which works beautifully if given the right information from index.php

$list = $_POST['list'];
$num = 1;
foreach ($list as $key => $value ) {
    if ($value == "null") {
        //$value = $num;
        mysql_query("UPDATE `myTable` SET orderId=".$num.", parent='null' WHERE id=".$key."");
        $text .= "UPDATE `myTable` SET orderId=".$num.", parent='null' WHERE id=".$key."\n\n";
    } else {
                $query = "UPDATE `myTable` SET orderId=". $num .", parent=".$value;
                $text .= "UPDATE `myTable` SET orderId=". $num .", parent=".$value."\n\n";
                $var = $list[$value];
                if ( $var != null && $list[$var] != null ) {
                    $query .= ", grandchild = 1";
                }
                $query .= " WHERE id=".$key; 
        mysql_query($query);
    }
    $num++;
}

echo "Content is below\n";
print_r( $_POST['list']);
echo $text;

So, as a recap, I have a navigation that submits serialized data from index.php to nav_adjust.php which then submits it into a database (and echos it back so I know what I did). Then index.php, upon refresh, should keep the list items in place, with all children as children and such. But I overwrite index.php and have no idea how my friend did it.

My table fields are (before I forget):

id, title, orderId (parent), parent (child) and grandchild.

I was meaning to change the names of orderId and parent to make it less confusing but I never did :(

If somebody could help me, I'd be so very thankful.

If there is any other information I can give you, please ask!

Answer 1

After hours of struggling, I had the genius idea of asking GoDaddy if they backed up files and directories, and they did! So I got my file back. For anybody interested, the code missing on index.php looked like this (where $name['website'] is 'myTable'):

$parents = mysql_query("SELECT * FROM `".$name['Website']."` WHERE parent = 0 ORDER BY `orderId` ASC");

    while($parent = mysql_fetch_array($parents)){            
        echo "<li id='list_".$parent['id']."'>
        <div>
            <span class='disclose'>
                <span></span>
            </span>
            <span class='title'>
                <a href='mod.php?id=".$parent['id']."'>".stripslashes($parent['page'])."</a>
            </span>
        </div>";    

        // Get chil elements

        $children = mysql_query("SELECT * FROM `".$name['Website']."` WHERE parent = " . $parent['id'] . " ORDER BY `orderId` ASC") or die(mysql_error());
        while($child = mysql_fetch_array($children)){
            echo "<ol>
            <li id='list_".$child['id']."'>
                <div>
                    <span class='disclose'>
                        <span></span>
                    </span>
                    <span class='title'>
                        <a href='mod.php?id=".$child['id']."'>".stripslashes($child['page'])."</a>
                    </span>
                </div>";
            # Get grandchild elements
            # (Please consider making an recursive function or so out of this if you plan to have grand grand children etc.,
            # Because if you create new whiles manually for every instance, this is gonna look pretty darn ugly.
            # Also, it makes it impossible to have an unknown depth.)           
            $grandchildren = mysql_query("SELECT * FROM `".$name['Website']."` WHERE parent = " . $child['id'] . " AND grandchild = 1 ORDER BY `orderId` ASC");             
            while($grandchild = mysql_fetch_array($grandchildren)){
                echo "<ol>
                    <li id='list_".$grandchild['id']."'>
                        <div>
                            <span class='disclose'>
                                <span></span>
                            </span>
                            <span class='title'>
                                <a href='mod.php?id=".$grandchild['id']."'>".stripslashes($grandchild['page'])."</a>
                            </span>
                        </div>
                    </li>
                </ol>\n";               
            }

            // Close child
            echo "</li>
            </ol>\n";
        }
        // Close parent
        echo "</li>\n";
    }
    ?>