Bootstrap NavBar: Is there a way to disable a few menu items even the parent for certain pages?

Is there a way to disable certain menu items and or its parent for certain pages, but i'm using a single navbar.jsp for all pages and its being loaded by a javascript on every page.

NavBar.jsp

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a href="home.html" class="navbar-brand">SYSTRIX</a>
            </div>

                <div class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Console<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="home.html">Home</a></li>
                                <li><a href="users.html">User Management</a></li>
                                <li><a href="patients.html">Patient Management</a></li>
                            </ul>
                        </li>   

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">New<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="userProfile.html">User</a></li>
                                <li><a href="patientsProfile.html">Patient</a></li>
                                <li><a href="#">Admission</a></li>
                            </ul>
                        </li>   

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">User Roles</a></li>
                                <li><a href="#">Patient Episode</a></li>
                                <li><a href="#">Patient Staff Assignment</a></li>
                            </ul>
                        </li>

                        <li><a href="#">Help</a></li>

                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                                <button type="submit" class="btn btn-success">Submit</button>
                        </form>                     
                    </ul>
                </div>
        </div>
    </nav>
</body>

Script:

<script> 
$(function(){
  $("#includedContent").load("navbar.jsp"); 
});
</script> 

I need to disable certain menu items for certain .jsp pages Like the edit should not be available if i'm on the add new page. Thank you for your help.

Answers


I think this will work for you:

You should change your part of code to this :

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#" id="userroles">User Roles</a></li>
        <li><a href="#" id="patientepisode">Patient Episode</a></li>
        <li><a href="#" id="patientstaff">Patient Staff Assignment</a></li>
    </ul>
</li>

And use this jquery code :

$(document).ready(function(){
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

if(filename == 'Roles.jsp'){
    $('#patientepisode').addClass('disabled');
    $('#patientstaff').addClass('disabled');
}else if(filename == 'PatientEpisode.jsp'){
    $('#userroles').addClass('disabled');
    $('#patientstaff').addClass('disabled');
}else if(filename == 'StaffAssignment.jsp'){
    $('#userroles').addClass('disabled');
    $('#patientepisode').addClass('disabled');
}
});

I hope this'll help you.


Need Your Help

Contact Form Fields not being sent

php forms contact

The project and phone fields in my contact form script arent working. Any ideas what I'm doing wrong as every other field works great:

What happens when you access a file while it is being creating

http

I have a process that can update existing images on a web server, what happens when a client tries to access them while being editting, 404? Does it waits until editting is done? (it is pretty much