Dynamic Html Using Looping Over Result Set

zohab · October 23, 2012

Hi,

I am creating menu using jquery-mega-drop-down-menu-plugin.

I am stroing menu items in database and want to create html sturcture dynamically by looping over resultset

I have attached working example.

Following html need to create dynamically.

<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
 <ul>
     <li><a href="#">Menu Item 1</a></li>
     <li><a href="#">Menu Item 2</a></li>
 </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>

Database Table for menu items as follow

CREATE TABLE `headermenu` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `text` varchar(300) DEFAULT NULL,
 `parentid` int(11) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Any solution?

Thanks for time and efforts in advance.

- Thanks

Zohaib.

menu.zip

Edited October 23, 2012 by zohab

zohab · October 24, 2012

Hi,

I got it working but I want to use 1 SQL statement instead of 2.

<?php

error_reporting(0);
mysql_connect("localhost", "username", "password");
mysql_select_db("headermenu");

$sql="SELECT ID,PARENTID,TITLE,HAS_CHILD FROM headermenu ORDER BY ID";
$result = mysql_query($sql);
$str = "";

while ($row = mysql_fetch_assoc($result)) 
{
$id =  $row["ID"];
$parentid =  $row["PARENTID"];
$title =  $row["TITLE"];
$has_child =  $row["HAS_CHILD"];
$parentid;

if($parentid == -1)
{
if($has_child==0)
{
$str .= "<li><a href='#'>$title</a></li>";
}
if($has_child==1)
{
$str .= "<li><a href='#'>$title</a>";
$str .= "<ul>";
$sql2="SELECT TITLE FROM headermenu WHERE PARENTID=$id ORDER BY ID ";
$result2 = mysql_query($sql2);
while ($row2 = mysql_fetch_assoc($result2)) 
{
$title2 =  $row2["TITLE"];
$str .= "<li><a href='#'>$title2</a></li>";
}
$str .= "</ul>";
$str .= "</li>";
}
}
}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>jQuery Mega Drop Down Menu Plugin Sample Styling</title>
<link href="custom_mega_menu_styles/css/dcmegamenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='custom_mega_menu_styles/js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='custom_mega_menu_styles/js/jquery.dcmegamenu.1.2.js'></script>
<script type="text/javascript">
$(document).ready(function($){
$('#mega-menu-tut').dcMegaMenu({
rowItems: '3',
speed: 'fast'
});
});
</script>
<link href="custom_mega_menu_styles/menu.css" rel="stylesheet" type="text/css" />
<style>
/* Demo Styles */
.wrap {width: 960px; margin: 0 auto;}
</style>
</head>
<body>
<div class="wrap">

<div class="dcjq-mega-menu">

<ul id="mega-menu-tut" class="menu">
<!--
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
 <ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
 </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
-->
<?php echo $str; ?>
</ul>

</div>
<div style="height: 350px;"></div>
</body>
</html>

/*Table structure for table `headermenu` */

DROP TABLE IF EXISTS `headermenu`;

CREATE TABLE `headermenu` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `PARENTID` int(11) DEFAULT NULL,
 `title` varchar(255) DEFAULT NULL,
 `HAS_CHILD` int(11) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

/*Data for the table `headermenu` */

insert  into `headermenu`(`id`,`PARENTID`,`title`,`HAS_CHILD`) values (1,-1,'Home',0),(2,-1,'Menu2',1),(3,2,'Menu2 Child1',0),(4,2,'Menu2 Child2',0),(5,2,'Menu2 Child3',0),(6,2,'Menu2 Child4',0);

Any way to get same result using 1 sql statement.

- Thanks

Zohaib.

headermenu.zip

Sign In

Dynamic Html Using Looping Over Result Set

Recommended Posts

zohab

Link to comment

Share on other sites

zohab

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information