Dynamic Html Using Looping Over Result Set

by **zohaib82** » Wed Oct 24, 2012 12:38 am

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.

Code: Select all: <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

Code: Select all: 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.

by **zohaib82** » Wed Oct 24, 2012 4:18 am

Hi,

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

Code: Select all: <?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">  <?php echo $str; ?> </ul> </div> <div style="height: 350px;"></div> </body> </html>

Code: Select all: /*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.

Dynamic Html Using Looping Over Result Set

Dynamic Html Using Looping Over Result Set

Re: Dynamic Html Using Looping Over Result Set

Who is online