jQWidgets Forums

This topic contains 2 replies, has 1 voice, and was last updated by Hop 11 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Load jqxMenu data from MySQL problem Posts

October 14, 2013 at 4:52 am Load jqxMenu data from MySQL problem #30642

Hop

Participant

I am trying to create a menu widget using data from a mysql database table. I know the response returned is what I am expecting, but I cannot seem to get it to work. The menu widget draws but is blank. I looked for examples for what I am attempting and came up empty.
I followed the example from demos/jqxmenu/menubindingtojson.htm.

I would put the code here but I can’t for some reason. I have done it before so I do not know what is wrong. I paste it in ‘code’ tags and only some of it pastes, and even then it doesn’t look the same. Maybe someone could advise me to what I am doing wrong?

Thank you for your time!

October 15, 2013 at 10:06 pm Load jqxMenu data from MySQL problem #30773

Hop

Participant

I figured it out I think. I was just posting in code tags in text view while editing.
menu-fetch.php

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
	print "can't find $database";
}
// get data and store in a json array
$name = $_GET['name']; 
$query = "SELECT menuid,parentid,subMenuWidth,text FROM menus_cfg where name='".$name."' order by menuid asc";
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$menudata[] = array(
        'id' => $row['menuid'],
				'parentid' => $row['parentid'],
				'text' => $row['text'],
 				'subMenuWidth' => $row['subMenuWidth'],
     );
}
echo json_encode($menudata);
?>

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxMenu is built from JSON data.</title>
		<link href="../../styles/hop.budget.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
<div style="position:absolute; top:50px; left:5px" id='jqxWidget'>
<script type="text/javascript">
            $(document).ready(function () {
                var theme = "shinyblack";
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
										id: 'id',
                    url: 'menu_fetch.php',
										data: {
                      name: 'main_menu'
                    },
										cache: false
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
								// perform Data Binding.
                dataAdapter.dataBind();
								
                // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
								$('#jqxWidget').jqxMenu({ source: records, height: '30px', width: '400px', theme:'shinyblack' });
                $("#jqxWidget").on('itemclick', function (event) {
                    $("#eventLog").text("Id: " + event.args.id + ", Text: " + $(event.args).text());
                });
            });
</script>
</div>

MySQL menu_cfg table (result from query using ‘main_menu’ for ‘name’ field

SQL result
Host: localhost
Database: home
Generation Time: Oct 15, 2013 at 02:48 PM
Generated by: phpMyAdmin 4.0.5 / MySQL 5.1.40-community
SQL query: SELECT * FROM `menus_cfg` LIMIT 0, 200 ;
Rows: 9
id	menuid	parentid	subMenuWidth	text	name	
3	1	-1	NULL	HOME	main_menu
4	2	-1	200	File	main_menu
5	3	-1	200	Edit	main_menu
6	4	-1	200	View	main_menu
7	5	-1	200	Tools	main_menu
8	6	-1	200	Windows	main_menu
9	7	-1	200	Help	main_menu
10	10	2	NULL	New	main_menu
11	11	10	NULL	Account	main_menu

October 15, 2013 at 10:18 pm Load jqxMenu data from MySQL problem #30775

Hop

Participant

This is really killing me, and I am so sorry for the self-answered posts. It’s MAGIC I guess, that I finally post for help here and then I do something I see in stackoverflow and then it works.

I got it working by adding “async: false,” in the source declaration. Apparently, it matters WHERE it is placed, because I did this already but I added the line after my data field. This time, I put it right after the datatype field and it works now.

DAYS I labored on this because I didn’t want to post until I exhausted all the options. Thank you Peter for your patience!

So for those ending up here searching for an answer like I was, adding

async: false,

after

datatype: "JSON",

fixed this for me using the code I posted above.

Thank you for your time and patience!!

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.