Jump to content

Sortable list problem

Ryflex

By Ryflex
in Javascript Help

 Share

Recommended Posts

Ryflex Member

Ryflex

Posted
Posted

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'>&nbsp
								</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."&nbsp
					</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'>
					&nbsp
					</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
Share on other sites
Ryflex Member

Ryflex

Posted
  • Author
Posted

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.