Jump to content

Sortable list problem

Ryflex

By Ryflex
in Javascript Help

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
https://forums.phpfreaks.com/topic/265752-sortable-list-problem/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

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.