Hi all,
I'm building a menu CMS. In this CMS the menu items are sortable by using a jquery piece I found.
The sorting works great but when I try to implement child items it kind of screws up. the child items can't be selected seperatly for example.
Below is all my code. I hope someone can help me.
Menu.php
<?php
include("../include/session.php");
include("include/menu_constants.php");
//check if user is logged on
if(!$session->logged_in){
header("Location:../main.php");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
<html>
<head>
<title>Menu Factory-Nation
</title>
<link rel="stylesheet" href="include/1080px_18column_grid.css" type="text/css" />
<link rel="stylesheet/less" href="include/menu.less" type="text/less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
<?php/*java for sortable list*/?>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="include/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="include/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#level3").sortable({
handle : '.handle',
update : function () {
var order = $('#level3').sortable('serialize');
$("#info").load("include/process-sortable.php?"+order);
}
});
});
</script>
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#level9").sortable({
handle : '.handle',
update : function () {
var order = $('#level9').sortable('serialize');
$("#info2").load("include/process-sortable.php?"+order);
}
});
});
</script>
</head>
<body>
<div class="container_18 background">
<div class="grid_3">
<nav class="menu">
<?php
//query database for all level 3 parent items
$sql = $database->connection->prepare("SELECT * FROM ".TBL_MENU." WHERE `userlevel` = '3' AND `parent` = '0' AND `active` = '1' ORDER by `order` ASC");
$sql->execute();
//start of list
echo "<ul class='menulist'>";
//while loop to iterate the menu items
while($row = $sql->fetch()) {
echo "<li><a href=".$row['link'].">".$row['name']."</a>";
//check for child menu
if($row['child'] == 1) {
$parent = $row['id'];
//query database for all level 3 child items
$subsql = $database->connection->prepare("SELECT * FROM ".TBL_MENU." WHERE `userlevel` = '3' AND `child` = '2' AND `parent` = '$parent' AND `active` = '1' ORDER by `order` ASC");
$subsql->execute();
//start of child list
echo "<ul class='childlist'>";
//while loop to iterate the child menu items
while($subrow = $subsql->fetch()) {
echo "<li><a href=".$subrow['link'].">".$subrow['name']."</a></li>";
}
//end of child list
echo "</ul></li>";
}
else {
echo "</li>";
}
}
//check if user is at userlevel 9. If so show all admin menu items.
if($session->isUserlevel(9)) {
echo "<li><br></li>";
//query database for all level 9 parent items
$sql = $database->connection->prepare("SELECT * FROM ".TBL_MENU." WHERE `userlevel` = '9' AND `active` = '1' ORDER by `order` ASC");
$sql->execute();
//while loop to iterate the menu items
while($row = $sql->fetch()) {
echo "<li><a href=".$row['link'].">".$row['name']."</a></li>";
}
}
//end of list
echo"</ul>"
?>
</nav>
</div>
<div class="grid_12">
<div class="grid_12 alpha omega">
<h3>Normal menu-items</h3>
<p>Here you can edit the menu for the normal users. Set userlevel to 3 to make sure all users will be able to
see the items when activated.<br>
Please make sure the link works before you activate the menu-items.</p>
</div>
<div class="grid_1 alpha">
<label class="label"><br>Move</label>
</div>
<div class="grid_3">
<label class="label"><br>Item name</label>
</div>
<div class="grid_3">
<label class="label"><br>Item link</label>
</div>
<div class="grid_2">
<label class="label"><br>Userlevel</label>
</div>
<div class="grid_2">
<label class="label">Active<br>Yes/No</label>
</div>
<div class="grid_1 omega">
<label class="label"><br>Delete</label>
</div>
<div class="clear"></div>
<form name="menu-edit" action="include/process.php" method="POST">
<ul id="level3">
<?php
//set $n at 1
$n = 1;
//query database for all level 3 parent items
$sql = $database->connection->prepare("SELECT * FROM ".TBL_MENU." WHERE `userlevel` < '9' AND `parent` = '0' ORDER by `order` ASC");
$sql->execute();
//while loop to iterate the menu items
while($row = $sql->fetch()) {
//set the active checked and the inactive empty
if($row['active'] == "0"){$active_0 = 'checked';}else{$active_0 = '';}
if($row['active'] == "1"){$active_1 = 'checked';}else{$active_1 = '';}
//check if there are child items available
if($row['child'] == "1") {
//set some starting variables
$c = 1;
$id = $row['id'];
$child_click = "<img src='images/folder_down.png' id='child_click' class='new_image' alt='add_new' style='width: 16px; height: 16px; overflow: hidden; display: block;'/>
<img src='images/folder_up.png' id='child_reset' class='new_image' alt='add_new' style='width: 0px; height: 0px; overflow: hidden; display: block;'/>";
$child_row_1 = "<div id='child_animate' class='demoarea' style='width: 700px; height: 0px; overflow: hidden; display: block;'>
<ul id='level4'>";
$child_row_3 = "</ul></div>";
//query the database for the child items
$child_sql = $database->connection->prepare("SELECT * FROM ".TBL_MENU." WHERE `userlevel` < '8' AND `parent` = '$id' ORDER by `order` ASC");
$child_sql->execute();
//while loop to iterate the child items
while($child_rows = $child_sql->fetch()) {
//set the active checked and the inactive empty
if($child_rows['active'] == "0"){$child_active_0 = 'checked';}else{$child_active_0 = '';}
if($child_rows['active'] == "1"){$child_active_1 = 'checked';}else{$child_active_1 = '';}
//put the form row in $child_row_2 array use $c to iterate
$child_row_2[$c] = "
<li id='listItem_".$child_rows['id']."'>
<div class='grid_1 alpha'>
<img src='images/arrow.png' alt='move' width='16' height='16' class='handle' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu[".$n."][name]' value='".$child_rows['name']."' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu[".$n."][link]' value='".$child_rows['link']."' />
<input type='hidden' name='menu[".$n."][id]' value='".$child_rows['id']."' />
</div>
<div class='grid_2'>
<input type='text' id='levelfield' name='menu[".$n."][userlevel]' value='".$child_rows['userlevel']."' />
</div>
<div class='radio'>
<input type='radio' name='menu[".$n."][active]' value='1' ".$child_active_1." />
<input type='radio' name='menu[".$n."][active]' value='0' ".$child_active_0." />
</div>
<div class='grid_1'> 
</div>
<div class='grid_1 omega'>
<input onclick='setId(".$child_rows['id'].")' class='delete' type='submit' name='delete' id='delete' value='".$row['id']."'></input>
</div>
<div class='clear'></div>
</li>
";
$n++;
$c++;
}
}
//if there are no child items set all child items to nothing
else {
$child_click = "";
$child_row_1 = "";
$child_row_2 = "";
$child_row_3 = "";
}
//echo the form row
echo "<li id='listItem_".$row['id']."'>
<div class='grid_1 alpha'>
<img src='images/arrow.png' alt='move' width='16' height='16' class='handle' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu[".$n."][name]' value='".$row['name']."' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu[".$n."][link]' value='".$row['link']."' />
<input type='hidden' name='menu[".$n."][id]' value='".$row['id']."' />
</div>
<div class='grid_2'>
<input type='text' id='levelfield' name='menu[".$n."][userlevel]' value='".$row['userlevel']."' />
</div>
<div class='radio'>
<input type='radio' name='menu[".$n."][active]' value='1' ".$active_1." />
<input type='radio' name='menu[".$n."][active]' value='0' ".$active_0." />
</div>
<div class='grid_1' style='height:16px'>
".$child_click." 
</div>
<div class='grid_1 omega'>
<input onclick='setId(".$row['id'].")' class='delete' type='submit' name='delete' id='delete' value='".$row['id']."'></input>
</div>
<div class='clear'></div>
</li>
".$child_row_1."
";
if($child_row_2 > ""){
foreach ($child_row_2 as $value) {
echo $value;
}
}
echo $child_row_3;
$n++;
}
?>
<input type="hidden" name="n" value="<?php echo $n; ?>" />
</ul>
</div>
<div class="grid_12 push_3">
<div class="grid_12 alpha omega">
<h3>Admin menu-items</h3>
<p>Here you can edit the menu for the normal users. Set userlevel to 9 to make sure all users will be able to
see the items when activated.<br>
Please make sure the link works before you activate the menu-items.</p>
</div>
<div class="grid_1 alpha">
<label class="label"><br>Move</label>
</div>
<div class="grid_3">
<label class="label"><br>Item name</label>
</div>
<div class="grid_3">
<label class="label"><br>Item link</label>
</div>
<div class="grid_2">
<label class="label"><br>Userlevel</label>
</div>
<div class="grid_2">
<label class="label">Active<br>Yes/No</label>
</div>
<div class="grid_1 omega">
<label class="label"><br>Delete</label>
</div>
<div class="grid_11 alpha">
<ul id="level9">
<?php
//query database for all level 9 parent items
$sql = $database->connection->prepare("SELECT * FROM ".TBL_MENU." WHERE `userlevel` = '9' AND `parent` = '0' ORDER by `order` ASC");
$sql->execute();
//while loop to iterate the menu items
while($row = $sql->fetch()) {
//set the active checked and the inactive empty
if($row['active'] == "0"){$active_0 = 'checked';}else{$active_0 = '';}
if($row['active'] == "1"){$active_1 = 'checked';}else{$active_1 = '';}
//echo the form row
echo "<li id='listItem_".$row['id']."'>
<div class='grid_1 alpha'>
<img src='images/arrow.png' alt='move' width='16' height='16' class='handle' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu[".$n."][name]' value='".$row['name']."' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu[".$n."][link]' value='".$row['link']."' />
<input type='hidden' name='menu[".$n."][id]' value='".$row['id']."' />
</div>
<div class='grid_2'>
<input type='text' id='levelfield' name='menu[".$n."][userlevel]' value='".$row['userlevel']."' />
</div>
<div class='radio'>
<input type='radio' name='menu[".$n."][active]' value='1' ".$active_1." />
<input type='radio' name='menu[".$n."][active]' value='0' ".$active_0." />
</div>
<div class='grid_1'>
 
</div>
<div class='grid_1 omega'>
<input onclick='setId(".$row['id'].")' class='delete' type='submit' name='delete' id='delete' value='".$row['id']."'></input>
</div>
<div class='clear'></div>
</li>";
$n++;
}
?>
<input type="hidden" name="n" value="<?php echo $n; ?>" />
</ul>
<div class="grid_3 push_9 save_cancel alpha">
<input type="submit" name="submit" alt="submit" class="save" value="submit"/>
<input type="submit" name="cancel" alt="cancel" class="cancel" value="submit"/>
</div>
</form>
</div>
<div class="clear"></div>
<br>
<div class="grid_11 alpha">
<div id="animate" class="demoarea" style="width: 40px; height: 38px; overflow: hidden; display: block;">
<form name="add_menu_item" action="include/process.php" method="POST">
<ul id="level3">
<li>
<div class='grid_1 alpha'>
<img src='images/new.png' id="click" class="new_image" alt='add_new' width='16' height='16'/>
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu_ad_name' value='' />
</div>
<div class='grid_3'>
<input type='text' id='field' name='menu_ad_link' value='' />
<input type='hidden' name='menu_ad_id' value='".$row['id']."' />
</div>
<div class='grid_2'>
<input type='text' id='levelfield' name='menu_ad_level' value='' />
</div>
<div class='grid_2 omega'>
<input type='radio' name='menu_add[active]' value='1' />
<input type='radio' name='menu_add[active]' value='0' />
</div>
<div class='clear'></div>
</li>
</ul>
<div class="grid_3 push_9 save_cancel alpha">
<input type="submit" name="save" alt="save" class="save" value="save"/>
<input type="submit" id="reset" name="hide" alt="hide" class="cancel" value="submit"/>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#click').click(function() {
$("#animate").animate({
width: 700,
height: 52
}, 1000);
});
$('#reset').click(function() {
$("#animate").animate({
width: 40,
height: 38
}, 1000);
});
$('#child_click').click(function() {
$("#child_animate").animate({
width: 700,
height: 67
}, 1000);
$("#child_click").animate({
width: 0,
height: 0
}, 1);
$("#child_reset").animate({
width: 16,
height: 16
}, 1);
});
$('#child_reset').click(function() {
$("#child_animate").animate({
width: 700,
height: 0
}, 1000);
$("#child_reset").animate({
width: 0,
height: 0
}, 1);
$("#child_click").animate({
width: 16,
height: 16
}, 1);
});
function setId(id) {
document.getElementById('id').value = id;
}
</script>
</body>
</html>
Process-sortable.php
<?php
include("../../include/session.php");
include("../include/menu_constants.php");
foreach ($_GET['listItem'] as $position => $item) :
//$sql[] = "UPDATE ".TBL_MENU." SET `order` = $position WHERE `id` = $item";
//query database for all level 3 child items
$sql = $database->connection->prepare("UPDATE ".TBL_MENU." SET `order` = $position WHERE `id` = $item");
$sql->execute();
endforeach;
print_r ($sql);
?>
CSS (LESS actually)
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*/
body {
font-family: verdana;
font-size: 0.8em;
h3 {
font-family: inherit;
margin: 10px 0px 0px 0px;
}
p {
font-family: inherit;
font-size: 10px;
margin: 0px 0px 10px 0px;
}
input {
font-family: inherit;
font-size: 10px;
}
label {
font-family: inherit;
font-size: 9px;
}
}
.background {
background-image: url('images/1080px_18column_background.gif');
}
.submit {
text-decoration: none;
border: none;
background-color: #efefef;
width: 100px;
}
.save {
background: url("images/save.png") no-repeat center center;
width: 48px;
height:15px;
border: none;
color: transparent;
font-size: 0;
padding: 0px;
}
.cancel {
background: url("images/cancel.png") no-repeat center center;
width: 58px;
height:15px;
border: none;
color: transparent;
font-size: 0;
padding: 0px;
}
.delete {
background: url("images/delete.png") no-repeat center center;
width: 16px;
height:16px;
border: none;
color: transparent;
font-size: 0;
padding: 0px;
}
.menu {
font-size: 0.8em;
}
#field {
width: 154px;
}
#levelfield {
width: 94px;
}
#level3 {
list-style: none;
margin: 0px 0px 0px -40px;
li {
display: block;
padding: 5px 0px 5px 0px;
margin-bottom: 3px;
background-color: #efefef;
width: 700px;
img.handle {
cursor: move;
}
.radio{
width: 50px;
margin-left: 10px;
display: inline;
float: left;
}
}
}
#level4 {
list-style: none;
margin: 0px 0px 0px -40px;
li {
display: block;
padding: 5px 0px 5px 0px;
margin-bottom: 3px;
background-color: #cfcfcf;
width: 700px;
img.handle {
cursor: move;
}
.radio{
width: 50px;
margin-left: 10px;
display: inline;
float: left;
}
}
}
#level9 {
list-style: none;
margin: 0px 0px 0px -40px;
li {
display: block;
padding: 5px 0px 5px 0px;
margin-bottom: 3px;
background-color: #efefef;
width: 700px;
img.handle {
cursor: move;
}
.radio{
width: 50px;
margin-left: 10px;
display: inline;
float: left;
}
}
}
.handle {
margin-left: 12px;
margin-top: 3px;
}
.new_image {
margin-left: 12px;
margin-top: 3px;
cursor: pointer;
}
.save_cancel {
text-align: right;
}
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
.border-radius (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.box-shadow (@x: 0, @y: 5px, @blur: 5px, @spread: -5px, @color: #000) {
-moz-box-shadow: @x @y @blur @spread @color;
-webkit-box-shadow: @x @y @blur @spread @color;
box-shadow: @x @y @blur @spread @color;
}
.linear-gradient (@start: #fff, @end: #ddd, @percent: 100%) {
background: @start; /* Old */
background: -moz-linear-gradient(top, @start 0%, @end @percent); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@percent,@end)); /* Chrome, Safari 4+ */
background: -webkit-linear-gradient(top, @start 0%,@end @percent); /* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, @start 0%,@end @percent); /* Opera 11.10+ */
background: -ms-linear-gradient(top, @start 0%,@end @percent); /* IE 10+ */
background: linear-gradient(top, @start 0%,@end @percent); /* W3C */
}
I can't post the java code it is too much
