including jquery menu and jqGrid on the page
I have a navigation menu which I need to include on all my pages....through jsp I just include the that menu
<div id="header"><jsp:include page="../menu_v1.jsp"/></div>
but problem is that my menu contains <html><head></head><body></body></html> Now when I want to use my jqGrid which is define on my new page inside <script></script>it doesn't show up....because its conflicting with my header jquery script...My tried solutions:
- Using
iframebut this will not let me control my other pages. - Instead of including
<jsp:include page=""/>i can just include all components with jquery navigation on each page under same scrip...Which is probably not at all a good solution since whenever I need to include more components in my menu than I have to make changes on each pages...
If anyone have better solution ...please let me know ....thanks!
Update: My main menu code
<script type="text/javascript">
//<![CDATA[
var navMenu = function(){
jQuery("ul.subnav").parent().append("<span></span>");
jQuery("ul.topnav li span").hover(function() {
jQuery(this).parent().find("ul.subnav").slideDown('fast').show();
jQuery(this).parent().hover(function() {
}, function(){
jQuery(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
jQuery(this).addClass("subhover");
}, function(){
jQuery(this).removeClass("subhover");
});
}
//]]>
</script>
<div id="topbar">
<div class="disclaimer"></div>
<ul class="topnav">
开发者_如何转开发 <li>
<a href="#">Order Management</a>
<ul class="subnav">
<li><a href="<%=request.getContextPath()%>/jsp/1.jsp">1</a></li>
<li><a href="<%=request.getContextPath() %>/jsp/2.jsp">2</a></li>
</ul>
</li>
<li>
<a href="#">3</a>
<ul class="subnav">
<li><a href="<%=request.getContextPath()%>/3.jsp">3</a></li>
</ul>
</li>
<li>
<a href="#">4</a>
<ul class="subnav">
<li><a href="<%=request.getContextPath()%>/4.1.do">4.1</a></li>
<li><a href="<%=request.getContextPath()%>/jsp/4.2.jsp">Add Spog</a></li>
<li><a href="<%=request.getContextPath()%>/jsp/4.3.jsp">4.3</a></li>
</ul>
</li>
</ul>
</div>
another page using menu:
script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
navMenu();
jQuery("#test").jqGrid({
sortable:true,
url: '',
datatype:'json',
colNames:['col1','col2', 'col3'],
colModel:[ {name:'col1',index:'col1', width:85, sorttype:"int", align:"center", key:true},
{name:'col2',index:'col2', width:40, sorttype:"int", align:"center"},
{name:'col3',index:'col3', width:100, align:"center"},
],
rowNum:10,
rowList:[10,20,30],
jsonReader : {repeatitems: false,
root: function(obj) {
return obj;
},
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
pager: '#pager',
sortname: 'col1',
sortorder: "desc",
loadonce:true,
viewrecords: true,
multiselect: true,
caption: "Test",
height:230
});
jQuery("#test").jqGrid('navGrid','#pager10',{view:true,add:false,edit:false,del:false, searchtext:'Filter'},{},{},{},{multipleSearch:true});
jQuery("#test").jqGrid('hideCol', 'cb');
}) ;
//]]>
</script>
</head>
<body>
<div id="header"><jsp:include page="../menu_v1.jsp"/></div>
But now problem is that my menu and main jqGrid is not at at all working...
- your menu should not have
<html><head>etc. - you can define the scripts it needs in the page that includes it
- if that page is also constructed with includes, above the
<jsp:includeof the header, define a variable (with<c:set) to hold all scripts that are needed, and then parse this in the header.
Instead of the above steps, you you can use some templating engine like tiles, sitemesh, velocity, freemaker. The structuring of pages there is different and you'd have to adapt your pages.
Well I have solved the problem :
1) Whenever creating any navigation menu :(Bozho's suggestion)
Link CSS files attached to that nav menu .
Don't use any <html>,<head>,<title> and <body> tags.
just use , (for CSS) and (which will contain the nav menu).
2) Use <jsp:include page="../navMenu.jsp"/> inside the <div id="header"><jsp:include page="../navMenu.jsp"/></div>
and make necessary adjustment in your CSS .
3) All js files keep it inside one file using different function , like:
var navBar = function(){}
var otherScript = function(){}
so when you want to use those files just use : in case of jQuery :
jQuery(document).ready(function(){
navMenu();
otherScript();
});
So that you don't have multiple js files floating around your server.
Please let me know if anyone have any doubts or questions.
Thanks!
加载中,请稍侯......
精彩评论