Home/ Questions/Q 1071069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T20:39:42+00:00

I have a navigation menu which I need to include on all my pages….through

  • 0

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:

  1. Using iframe but this will not let me control my other pages.
  2. 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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0