Making A List Using PHP And NestedSortable
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!
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";
}
?>