Updated this question, because my previous code made a conflict with bootstrap
Hi I'm trying to make a hover in each checkbox. What I now have is that the hover occurs in each checkbox. When I click around the checkbox then you see a dropdownlist. But when I click away from the dropdownlist. Then the caret arrow should go away, but unfortunately it doesn't. I have also recorded myself to show you more clearly what I actually want:
Updated the video also, because my updated code displays the checkbox differently in the browser
link: https://www.youtube.com/watch?v=i6-T9wjNZY8&feature=youtu.be
Here is the code that I currently have, which lives in index.blade.php :
#extends('user._layouts.user')
#section('content')
<style>
.dropdown .caret{
display:none;
}
.dropdown:hover .caret, .dropdown.opened .caret{
display:inline-block;
}
</style>
<script>
var resetSel = function(){
};
$(document).ready(function () {
$('dropdown').on('click', function (e) {
e.preventDefault();
$('.dropdown.opened').removeClass('opened');
});
$('.dropdown').click(function(e){
var $this = $(this);
$('.dropdown.opened').removeClass('opened');
if(!$this.hasClass('opened'))
$this.addClass('opened');
//alert($check.attr('checked'));
});
$('.check').click(function(e){
e.stopPropagation();
});
});
</script>
<script>
function toggle(source) {
checkboxes = document.getElementsByClassName('check');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
#include('user._layouts.template_search')
<h1>Offerte overzicht</h1>
{{--link_to_route('user.orders.create', 'Create new Order')--}}
#if (count($orders))
<ul>
<div class="row">
<div class="col-md-1">STATUS</div>
<div class="col-md-3">offerte naam</div>
<div class="col-md-3">klant</div>
<div class="col-md-1">bedrag</div>
<div class="col-md-1">old delete</div>
<div class="col-md-1">Check all
<br>
<div class="btn-group">
<div class="dropdown">
<button id="selDelete" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<input id="check1" type="checkbox" onClick="toggle(this)" class="check">
<span class="caret-hover"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li>Delete</li>
</ul>
</div>
</div>
</div>
</div>
#foreach($orders as $order)
<div class="row">
<div class="col-md-1">
<li>
#if ($order->status=='not submitted')
<div class="statusRed"></div>
#elseif ($order->status=='pending')
<div class="statusOrange"></div>
#else
<div class="statusGreen"></div>
#endif
</li>
</div>
<div class="col-md-3">
<li>
{{--as a third parameter we need to pass in the orderId, because it needs to be fed to
our actual user.orders.edit route. --}}
{{link_to_route('user.orders.edit', $order->order_name, array($order->id))}}
</li>
</div>
<div class="col-md-3">
<li>
{{$order->client['companyName']}}
</li>
</div>
<div class="col-md-1">
<li>
€{{$order->price}}
</li>
</div>
<div class="col-md-1">
<li>
{{Form::open(array('route'=>array('user.orders.destroy',$order->id),
'method'=>'delete','class'=>'destroy'))}}
{{Form::submit('Delete', array('class' => 'btn btn-default'))}}
{{Form::close()}}
</li>
</div>
<div class="col-md-1">
<li>
<!--ik kan blade niet gebruiken, want hij laat me mijn checkbox altijd op checked staan.-->
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
<input id="check1" name="checkbox[]" type="checkbox" class="check" >
<span class="caret-hover caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li><a href= "{{ route('user.orders.destroy',array( $order->id )) }}" data-method="delete" >Deletey</a></li>
</ul>
</div>
</li>
</div>
</div>
#endforeach
</ul>
#endif
#stop
Gladly I'm waiting for your response. Anyway thanks for your answer.
You have used an id 'selDelete' around multiple items. Consider using a class:
class = selDelete
in place of any tags where you have put:
id = selDelete
And similarly, be sure to switch any references to:
#selDelete
into:
.selDelete
I believe that may solve your problem, check that before anything else, hope that helps :)
Related
I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
I am trying to create a search function with tabbed feature. It is showing currently fine. No error at all.
Problem is when i want to click on any tab it need to show/hide some of the content of other tab.
Whenever i click on any div it is showing the div content but not hiding or showing anything.
<div id="newsearchs" class="row">
<div class="row">
<div class="col-xs-12">
<ul id="myTab" class="nav# nav-tabs test">
<li class="active">People
</li>
<li>Jobs
</li>
<li>Location
</li>
</ul>
</div>
</div>
<div class="col-xs-12">
<div class="input-group input-group-md">
<input type="text" id= "search_value" class="form-control " placeholder="Search for ...">
<input name="search_location" id="search_location" placeholder="Location" class="form-control txt-auto"/>
<div id="people" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Looking For <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Student
</li>
<li>Teacher
</li>
<li>Institue
</li>
</ul>
</div>
<div id="jobs" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Brief format
</li>
<li>Detailed format
</li>
<li>Citesummary
</li>
<li>LaTeX (EU)
</li>
</ul>
</div>
<div id="locations" class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span>
</button>
<ul class="navbar-custom-menu dropdown-menu pull-right">
<li>Brief format
</li>
<li>Detailed format
</li>
<li>Citesummary
</li>
<li>LaTeX (EU)
</li>
</ul>
</div>
<!-- /btn-group --> <span class="input-group-btn">
<button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Here are the jquery code which not working at the moment.
<script type="text/javascript">
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();
$('#myTab a').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'pep')) {
$('#search_location').hide();
$('#search_value').show();
$('#people').show();
$('#jobs').hide();
$('#locations').hide();
}
$(this).tab('show');
})
</script>
<script type="text/javascript">
$('#myTab b').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'job')) {
$('#search_location').hide();
$('#search_value').show();
$('#jobs').show();
$('#people').hide();
$('#locations').hide();
}
$(this).tab('show');
})
</script>
<script type="text/javascript">
$('#myTab c').click(function (e) {
e.preventDefault();
if (!($(this).attr('id') == 'loca')) {
alert('Hi');
$('#search_location').show();
$('#search_value').hide();
$('#locations').show();
$('#jobs').hide();
$('#people').hide();
// }
$(this).tab('show');
})
</script>
According to me $('#myTab c').click(function (e) { is not firing.
Please advise what am i doing wrong.
You have a number of HTML and JS formatting issues.
you have commented out a closing { before the third tab show call, ie. // }, you will need to uncomment this out
you are referring to html elements that dont exist. #myTab b and #myTab c are trying to look for html elements of tags <b> and <c>, but you're trying to attach handlers to the <a> tags, in which case, you can combine a lot of your code
your if statements appear to be looking for when the id is not equal to something, which would mean 2 lots of show/hide's would be getting triggered per tab change, these should be simplified to (ideally a switch statement) handle each tab's click event individually
you have a number of unclosed <div> tags, and a stray # in your class definition of your myTab element.
JSFIDDLE
JS
$(function() {
$('#jobs').hide();
$('#locations').hide();
$('#search_location').hide();
$('#myTab a').click(function(e) {
e.preventDefault();
if (($(this).attr('id') == 'pep')) {
$('#search_location').hide();
$('#search_value').show();
$('#people').show();
$('#jobs').hide();
$('#locations').hide();
}
if (($(this).attr('id') == 'job')) {
$('#search_location').hide();
$('#search_value').show();
$('#jobs').show();
$('#people').hide();
$('#locations').hide();
}
if (($(this).attr('id') == 'loca')) {
$('#search_location').show();
$('#search_value').hide();
$('#locations').show();
$('#jobs').hide();
$('#people').hide();
}
$(this).tab('show');
})
})
I can display the data from one table using ng-repeat tag. but the problem is when I am trying to display data from another table according to previous ng-repeat.
in detail I have 2 table one for sections
section_id section_name
1 php
2 java
another table is lecture
id section_id lecture_name
1 2 basics
2 1 loops
i could display sections using ng-repeat. but i cant display lecture below corresponding sections
<div class="course_curriculum " ng-repeat="section in sections">
<ul class="sections" >
<h4>Section {{$index+1}}: {{section.section_name}}</h4>
<!--<h4>Section 1: Introduction to Mobile Application Development</h4>-->
<li>
<div class="section-head" ng-click="view_lecture(section.id)" data-toggle="collapse" data-target="#section{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Course Lectures
</div>
<ul id="section{{$index+1}}" class="collapse" >
<li>
<ul ng-repeat="lecture in lectures">
<li >
<div class="section-sub-head" data-toggle="collapse" data-target="#sub1">
<i class="fa fa-bars" aria-hidden="true"></i> {{lecture.lecture_name}}
</div>
<ul id="sub1" class="collapse lecture">
<li>
<div class="col-md-5 article-show" >
<img src="html/img/file.png" style="width: 100px; background-color: black ;margin-right: 10px" />
Article<br>
<a data-toggle="modal" data-target="#text"><i class="fa fa-pencil" aria-hidden="true"></i> Edit Content</a> <br>
</i> Replace With Video <br>
</div>
<div class="col-md-5 right text-right" >
<div class="btn-group" role="group">
<button type="button" class="publish">Publish</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="Preview dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>As Instructor</li>
<li>As Student</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<button type="button" data-toggle="collapse" data-target="#Resources1" class="publish">Add Resources</button>
<button type="button" class="publish">Add Captions</button>
</div>
<div id="Resources1" class="collapse lecture">
<ul class="resouse">
<li class="active"><a data-toggle="tab" href="#Downloadable-File">Downloadable File</a></li>
<li><a data-toggle="tab" href="#from-Library">Add from Library</a></li>
<li><a data-toggle="tab" href="#External-Resource">External Resource</a></li>
<li><a data-toggle="tab" href="#Source-Code">Source Code</a></li>
</ul>
<div class="tab-content">
<div id="Downloadable-File" class="tab-pane fade in active">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload file<input type="file" style="display: none;">
</label>
</div>
<p>Tip: A resource is for any type of document that can be used to help students in the lecture.
This file is going to be seen as a lecture extra. Make sure everything is legible! </p>
</div>
<div id="from-Library" class="tab-pane fade">
<br/>
<p>Library is empty. Tip: You can use Accounts.academy File Uploader to upload several files at the same time. </p>
</div>
<div id="External-Resource" class="tab-pane fade">
<br/>
<div class="col-md-12">
<div class="form-group">
<label for="usr">Title:</label>
<input type="text" class="form-control" placeholder="A descriptive title" id="usr">
</div>
<div class="form-group">
<label for="pwd">URL:</label>
<input type="password" class="form-control" placeholder="https://example.com" id="pwd">
</div>
<button type="submit" value="Submit" class="publish">Submit</button>
</div>
</div>
<div id="Source-Code" class="tab-pane fade">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload File<input type="file" style="display: none;">
</label>
</div>
<p><B>Tip</B>: Only available for Python and Ruby for now. You can upload .py and .rb files</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<button type="button" data-toggle="modal" data-target="#saudio" class="sub-sub-section-add">Add Audio</button>
<button type="button" data-toggle="modal" data-target="#svideo" class="sub-sub-section-add">Add Video</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add Text/Article</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add File</button>
</li>
</ul>
</li>
</ul>
</li>
<li >
<div class="section-sub-head">
<form ng-submit="lecture_insert($index+1,section.id)">
<input type="text" class="form-control" id=lecture_name{{$index+1}} ng-model="section.lecture_name" placeholder="Enter a Title" required>
<!--<input type="text" ng-hide class="form-control" id=section_id{{$index+1}} ng-model="section.id" >-->
<div class="btn-group sub-section-add">
<button type="submit" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>
</div>
</form>
</div>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#faq{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> FAQ
</div>
<ul id="faq{{$index+1}}" class="collapse">
<li>
<button type="button" data-toggle="modal" data-target="#mainfaq" class="section-add">Add More Faq</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#Exam{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Exam
</div>
<ul id="Exam{{$index+1}}" class="collapse">+
<li >
<div class="section-sub-head">
fgfgh
</div>
<ul >
<li>
df
</li>
<li>
df
</li>
</ul>
</li>
</ul>
</li>
<li>
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#lecture" type="button" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#exam" type="button" style="background: rgba(0,0,0,0); border: none;">Add Exam</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#mainfaq" type="button" style="background: rgba(0,0,0,0); border: none;">Add FAQ</button>-->
<!--</div>-->
</li>
</ul>
</div>
A couple possible issues in the code provided:
Your inner ng-repeat is on the wrong element. It should be on the <li> element right above it. When nesting lists in bootstrap, you never repeat <ul> without wrapping each in atleast an <li> (usually an <a> too, which holds the dropdown text).
To achieve nested tables (a list of lectures within each section), you want the lectures variable to be on each section. This would make your inner ng-repeat something like ="lecture in section.lectures".
Here is a working JSBin where I made the changes I listed above. I omitted a lot of your HTML, because it was broken without the rest of your controller, but I left in enough to show how to get the nested repeats working.
Since you want to show the lecture conditionally, based on the above section_id, you can use ng-if for the desired result.
E.g.
<div class="section" ng-repeat="sec in sections">
<span>Section Id: <i>{{sec.section_id}}</i></span>
<span>Section Name: <i>{{sec.section_name}}</i></span>
<div class="lecture" ng-repeat="lec in lectures" ng-if="lec.section_id==sec.section_id"> <!--nested ng-repeat for lectures-->
<span>Lecture Id: <i>{{lec.lecture_id}}</i></span>
<span>Lecture Name: {{lec.lecture_name}}</span>
</div>
</div>
In JS my data is in the following format:
$scope.sections=[
{section_id:1,section_name:"php"},
{section_id:2,section_name:"java"}
];
$scope.lectures = [
{section_id:1,lecture_id:2,lecture_name:"basics"},
{section_id:2,lecture_id:1,lecture_name:"loops"}
];
I've prepared a JSBIN so you can see what's going on.
Please I am assigning user permission based on user type read from session data in Node.js and the hide html li elements based on the type of user. It seems to work but the behaviour it awful in the sense that. Whenever I load a page, all the menu items refresh/ loads again before they are hidden. How do I prevent this behaviour. It there something I have doing wrong or the approach is just not good. I have reference the client-side code on each page within the application
This is my code for the client side
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
if (data == 'Student') {
$("#Offer").find("#shareitem").show();
$("#Offer").find("#offeritem").hide();
$("#Offer").find("#returnitem").hide();
$("#Offer").find("#recallitem").hide();
$("#Offer").find("#renewitem").hide();
$("#Offer").find("#guestoffer").hide();
$("#Offer").find("#manageoffers").hide();
$("#Overview").hide();
$("#WithHolding").hide();
} else if (data == 'Admin') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else if (data == 'Teacher') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else {
$("#Offer").hide();
$("#Discover").hide();
$("#Overview").hide();
$("#WithHolding").hide();
$("#myAccount").hide();
$("#Message").hide();
}
})
});
This is my code on the server side
outer.get('/permission',function(req,res) {
if (req.user)
{
var UserType = req.user.UserType;
switch (UserType) {
case "Admin":
if ((req.isAuthenticated()) && (req.user.UserType == 'Admin')) {
res.send(UserType)
}
break;
case "Student":
if ((req.isAuthenticated()) && (req.user.UserType == 'Student')) {
res.send(UserType)
}
break;
case "Teacher":
if ((req.isAuthenticated()) && ((req.user.UserType == 'Admin') || (req.user.UserType == 'Professor'))) {
res.send(UserType)
}
break;
default :
if (req.isAuthenticated()) {
res.send(UserType)
}
}
}else{
res.send('undefined')
}
});
// This is my Navbar which contains the menus and it is called or references on each page through out the application
<script src="/javascript/ClientJs/HideMenus.js"></script>
//This my Javascript file which contains the permission instructions(client side)
<nav id="nav"class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><%=__('Borrowing Sys')%></a>
<div class="nav-collapse collapse" aria-expanded="true">
<ul id="menu"class="nav">
<li id="home"><%=__('Home')%></li>
<li id="Offer" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Offer')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li id="offeritem"><%=__('Offer Item')%></li>
<li id="recallitem"><%=__('Recall Item')%></li>
<li id="renewitem"><%=__('Renew Item')%></li>
<li id="returnitem"><%=__('Return Item')%></li>
<li id="odivider"class="divider"></li>
<li id="guestoffer"><%=__('Guest Offer')%></li>
<li id="shareitem"><%=__('Share Item')%></li>
<li id="manageoffers"><%=__('Manage Offers')%></li>
</ul>
</li>
<li id="Discover"class="dropdown">
<%=__('Discover Items')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><%=__('Discovery Map')%></li>
<li><%=__('Send a Request')%></li>
<li><%=__('Available Items')%>
</li>
</ul>
</li>
<li id="Message" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Messages')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Private Messages')%></li>
</ul>
</li>
<li id="Overview"class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('System Overview')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Data Analysis')%></li>
<li><%=__('User Activity Logs')%></li>
<li class="divider"></li>
<li><%=__('Remove Offers')%></li>
<li><%=__('Students Request')%></li>
</ul>
</li>
<li id="myAccount" class="dropdown">
<%=__('My Account')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li id="youroffers"><%=__('Your Offers')%></li>
<li id="reservations"><%=__('Reservations')%></li>
<li id="divider"class="divider"></li>
<li id="profile"><%=__('My Profile')%></li>
<li id="invite"><%=__('Invite Friend')%></li>
<li ><%=__('Log out')%></li>
</ul>
</li>
</ul>
<!-- add search form -->
<div id="WithHolding" class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=__('Student ID')%>" Id="SearchStudent" name="SearchStudent">
<button id="Search" name="Search" class="btn btn-primary" type="button"><%=__('Check Clearance')%>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
This is a typical example of how i have referenced the NavBar on all pages. This is the overall structure of the design
<!DOCTYPE html>
<html lang="en">
<% include ./MyLayout/header %>
<body>
<% include ./MyLayout/navbar %>
<script src="/javascript/ClientJs/RenewItem.js"></script>
<div class="container">
<div class="row-fluid">
<div id="content" class="span12">
<div class="row-fluid">
<form class="form-horizontal span12" method="post" action="RenewItems">
<fieldset>
<legend><%=__('Renew Item')%>
<h6 style="color: #006dcc"><%=__('Extend/Renew item given to student')%></h6>
</legend>
<br>
<% if(SuccessMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-success alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Success !')%></strong><%= SuccessMessage %>
</div>
</div>
</div>
<% } %>
<% if(ErrorMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-danger alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Error!')%></strong> <%= ErrorMessage %>
</div>
</div>
</div>
<% } %>
<div class="row-fluid">
<div class="span8">
<div class="control-group">
<label for="BookingNo" class="control-label"><%=__('Booking Number:')%></label>
<div class="controls">
<input id="BookingNumber" name="BookingNumber" type="text" value="" required=""
title="<%=__('Please enter Booking number for the transaction')%>"
placeholder="<%=__('Booking Number')%>">
</div>
</div>
<div class="control-group">
<label for="ItemName" class="control-label"><%=__('Item Name:')%></label>
<div class="controls">
<input type="text" id="ItemName" name="ItemName" value="" required=""
title="<%=__('Please enter Item Name')%>" placeholder="<%=__('Item Name')%>">
</div>
</div>
<div class="control-group">
<label for="StudentID" class="control-label"><%=__('Student/Guest ID:')%></label>
<div class="controls">
<input id="StudentID" name="StudentID" type="text" value="" readonly required=""
title="<%=__('Please enter student matriculation ID')%>" placeholder="<%=__('Matriculation Number/Guest ID')%>">
</div>
</div>
<div class="control-group">
<label for="ItemNumber" class="control-label"><%=__('Item Number:')%></label>
<div class="controls">
<input id="ItemNumber" name="ItemNumber" type="text" value="" readonly
required="" title="<%=__('Please enter Item Number')%>" placeholder="<%=__('Item Number')%>">
</div>
</div>
<div class="control-group">
<label for="EmailID" class="control-label"><%=__('Student/Guest Email ID:')%></label>
<div class="controls">
<input type="text" id="StudentEmail" name="StudentEmail" value=""
placeholder="<%=__('Student/Guest Email')%>" readonly required=""
title="<%=__('Student/Guest Email ID cannot be empty')%>">
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('Old Return Date:')%></label>
<div class="controls">
<input id="OldReturnDate" name="OldReturnDate" type="text" value="" readonly
placeholder="<%=__('DD-MM-YYYY')%>" required="" title="<%=__('Please search for item')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Duration:')%></label>
<div class="controls">
<select Id="Duration" name="Duration" class="form-control">
<option value="1 week"><%=__('1 week')%></option>
<option value="2 weeks"><%=__('2 weeks')%></option>
<option value="3 weeks"><%=__('3 weeks')%></option>
<option value="4 weeks"><%=__('4 weeks')%></option>
</select>
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('New Return Date:')%></label>
<div class="controls">
<input id="ReturnDate" name="ReturnDate" type="text" value="" placeholder="<%=__('DD-MM-YYYY')%>"
readonly required="" title="<%=__('Please specify duration of extension')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Remarks:')%></label>
<div class="controls">
<textarea id="Remarks" name="Remarks" style="width: 70%;" rows="4" required=""
title="<%=__('Any remarks regarding the renewal of an item')%>"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="reset" class="btn btn-default"><%=__('Cancel')%></button>
<button type="submit" class="btn btn-primary"><%=__('Renew')%></button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<% include ./MyLayout/footer_bottom%>
</html>
What about hiding everything first. Suppose your menu items are wrapped in a div or if menu items are in a OL/UL, you can set it up to hide on loading of page:
.menu-wrapper{
display:none;
}
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
//your stuff
}).always(function(){
$(".menu-wrapper").show();//this will toggle display:none
});
});
You are noticing this because of the delay in getting the response from the server.
All Menus Loaded First > Wait Few Seconds > Server Responds > Hide Menus
To avoid this, hiding menus during initial loading and showing them once you get the response will be the correct approach.
BTW, I will not prefer to show and hide menu items in the client side. The best option will be to get the list of allowed menu items from the server and rendering in the client side.
Please remember, an user can change the CSS styles to see the hidden menu and he could do operations that are not allowed, unless your server validates each request.
Change your html to render the menus in hidden mode, by adding the css class.
.menu-wrapper {
display:none;
}
<ul id="menu" class="nav">
<li id="home"class="hidden-menu"><%=__('Home')%></li>
<li id="Offer" class="dropdown menu-wrapper">
</li>
<li id="Discover" class="dropdown menu-wrapper">
</li>
<li id="Message" class="dropdown menu-wrapper">
</li>
<li id="Overview" class="dropdown menu-wrapper">
</li>
<li id="myAccount" class="dropdown menu-wrapper">
</li>
</ul>
Then after you get the permissions from the server, enable the nodes.
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
// If the menu should be shown then remove the css class
if(data === 'Admin') {
$("#Discover").removeClass('hidden-menu');
}
})
});
In my main view, I have an add button. Clicking the add button brings in a partial view.
Main.cshtml
<div id="NameCats">
#Html.Partial("_Temp")
</div>
<div class="row">
<button id="addInfo" class="btn"><img src="~/Content/Images/Add.PNG" /></button>
Add Info
</div>
In my Temp partial view, I have multiple bootstrap input drop down groups.
_Temp.cshtml
<div id="info">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input id="name" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="nameList" class="dropdown-menu pull-right">
<li> <a tabindex="-1" href="#"> Test1 </a> </li>
<li> <a tabindex="-1" href="#"> Test2 </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input id="cat" type="text" class="form-control dropdown-text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="catList" class="dropdown-menu pull-right"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
Selecting an item from first drop down should fill in the input for that drop down with the selected value. Here is my javascript to make it work. The problem is when I select item from the drop down that is rendered initially, the click (li a) function works but when I click Add button and then try to repeat the selection for the drop down in this new info section, the click (li a) function is not hit. What am I doing wrong?
$(function () {
$('.dropdown-menu').each(function () {
$(this).on('click', 'li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
});
$(function () {
$('#addInfo').click(function (e) {
e.preventDefault();
$('#NameCats').append($("#info").html());
});
});
The issue is your that your newly added elements do not have a click handler associated with them, since the function to add the handler is only run on page load. You have the concepts of event bubbling in place, but on the wrong parent elements and that essentially only keeps an eye on new li a elements and not entire dropdown-menu being added.
Change your first function to the following, which will keep a "watch" on any dropdown-menu added in the #NameCats element.
$(function () {
$('#NameCats').on('click', '.dropdown-menu li a', function () {
$(this).parents(".input-group").find('.dropdown-text').val($(this).text());
});
});
Here is a jsFiddle working example.