Ryflex Posted July 16, 2012 Share Posted July 16, 2012 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 Link to comment https://forums.phpfreaks.com/topic/265752-sortable-list-problem/ Share on other sites More sharing options...
Ryflex Posted July 17, 2012 Author Share Posted July 17, 2012 Who's the fool of the day.... ME! In the original script I posted for the menu in the header there are 2 little javascripts. These scripts made the sorting possible. Made a third pointing to the child items and works like a charm. Link to comment https://forums.phpfreaks.com/topic/265752-sortable-list-problem/#findComment-1362114 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.