I have been working on creating a jQueryUI menubar using JSON data. The JSON data is successfully being converted into valid HTML, but the menubar does not display with the desired styling. It appears as an unstyled unordered list rather than a styled menubar like the one shown on . Currently, the routine I am using only goes one level deep for menus, so sub-menu options are intentionally left out.
Interestingly, when I manually input the same HTML code that is generated by the jQuery method in menuBar.jsp, the menubar styles appear correctly.
Below is the main page (appFrameNew.jsp):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menu.css" />
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menu.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js" type="text/javascript"></script>
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.position.js" type="text/javascript"></script>
</head>
<body>
<div id="layout" class="layout">
<jsp:include page="menuBar.jsp" flush="true" />
</div>
</body>
</html>
Next is the content of menuBar.jsp:
<div class="demo"></div>
<script type="text/javascript">
function select(event, ui) {
if (ui.item.text() == 'Quit') {
$(this).menubar('destroy');
}
}
$(function() {
$("#bar1").menubar({
position: {
within: $(".demo").add(window).first()
},
select: select
});
});
$.getJSON('menuBarTestJSON.json', function(data) {
var output='<ul id="bar1" class="menubar">';
for (var i in data.menuOptions) {
output+='<li><a href="#">' + data.menuOptions[i].menubarItem + '</a></li>';
}
output+="</ul>";
$(".demo").html(output);
});
</script>
<ul id="bar1" class="menubar">
<li>
<a href="#File">File</a>
<ul>
<li><a href="#Open">Open</a>
<li><a href="#Save">Save</a></li>
</ul>
</li>
</ul>
Lastly, here is the content of menuBarTestJSON.json:
{"menuOptions":[
{
"menubarItem":"File",
"menuElement": {
"option":"Open",
"option":"Save",
"option":"Close",
"option":"Quit"
}
}
]}
I have been struggling to find a solution online for a few days now and would greatly appreciate any assistance. Thank you for your help.