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...