Geek Answers Handbook

Including jquery and jqGrid menus on page

I have a navigation menu that I need to enable on all my pages .... via jsp I just include in this menu

<div id="header"><jsp:include page="../menu_v1.jsp"/></div>

but the problem is that my menu contains <html><head></head><body></body></html> Now that I want to use my jqGrid, which is defined on my new page inside <script></script> , it does not appear .... because it contradicts my jquery script header ... My tested solutions:

  • Using an iframe , but that will not allow me to control my other pages.
  • Instead of including <jsp:include page=""/> I can simply include all components with jquery navigation on each page under the same script ... Which is probably not a good solution, since whenever I need include more components in my menu than I have to make changes on every page ...

If anyone has a better solution ... please let me know .... thanks!

Update: Code of my main menu

 <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 the 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 the problem is that my menu and main jqGrid do not work at all ...

+3
source share
2 answers

Well, I solved the problem:

1) When creating any navigation menu: (Bojo's suggestion) Link the CSS files attached to this navigation menu. Do not use the <html>,<head>,<title> and <body> tags. just use (for CSS) and (which will contain the navigation menu).

2) Use <jsp:include page="../navMenu.jsp"/> inside <div id="header"><jsp:include page="../navMenu.jsp"/></div> and do necessary setting in your CSS.

3) All js files store it inside one file using another function, for example:

 var navBar = function(){} var otherScript = function(){}

so when you want to use these files just use: in case of jQuery:

 jQuery(document).ready(function(){ navMenu(); otherScript(); });

So you do not have several js files floating around your server.

Please let me know if anyone has doubts or questions.

Thanks!

0
source
  • your menu should not have <html><head> , etc.
  • you can determine the scripts he needs on a page that includes
  • if this page is also built with inclusion, above the <jsp:include header of the header, define a variable (with <c:set ) to hold all the necessary scripts and then analyze this in the header.

Instead of the above steps, you can use some kind of engine for templates, for example tiles , sitemesh , velocity , freemaker . The page layout is different there, and you have to adapt your pages.

+1
source

More articles:


All Articles