I am trying to figure out how to change a bootstrap navbar dropdown via ajax(without page refresh) after the user logs in. Thanks
<ul class="nav navbar-nav" name= "myNavBar" id="myNavbar">
<li>About</li>
<li>Contact Us</li>
<li>Blog</li>
<li>Store</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login | Register<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target="#myOtherModal" href="#log-in">Login</a></li>
<li class="divider"></li>
<li><a data-toggle="modal" data-target="#myModal" href="#log-in">Register</a></li>
</li>
</ul>
I can get it to change but it requires page refresh
from the modal dialog after it appears from clicking the login/reg links, on login button click, you'd just do something like using jquery
$.ajax({ ..... success: { $('.dropdown').hide(); }
then show or append a log out link.
if you've never used jquery ajax, jquery ajax example
Related
I need help setting a link as active upon clicking on my html top nav bar.
The nav bar looks like this
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add New Client</li></i></a></li>
</ul>
</li>
</ul>
</div>
So when i click Home it must highlight Home when i click on Clients it must highlight Clients. I really don't know how to achieve this so any help will be very much appreciated.
// when any a link click
$('a').click(function(){
// if already any element in active status remove it
$('a').removeClass('active');
// add active status to this one only
$(this).addClass('active');
})
.active{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add New Client</li></i></a></li>
</ul>
</li>
</ul>
</div>
Setting via JS is pretty pointless, since as soon as it redirects and loads the new page, that setting will be forgotten. What you want to do is have PHP check your current route, and assign a class based on that. This can be done via the request()->is() check:
If navigating to myapp.com/home, use the following:
<li class="{{ request()->is('home') ? 'active': '' }}">
<a href="{{ route('home') }}">
Home
#if(request()->is('home'))
<span class="sr-only">(current)</span>
#endif
</a>
<li>
This demonstrates how to use via a ternary operator (best used for in-line statements) and the #if()#endif blade syntax. Just ensure your is() check is matching your route, so ->is("") for Route::get("/", ...);, etc. etc. and PHP will automatically assign the active class and (current) SR element.
Note; there is likely a way to handle this for named routes (like route('home')), but I haven't used named routes much, so I'm not positive on that. Also, might be best to assign the result of request()->is('home') to a variable to avoid repeating code.
Bootstrap dropdown code works fine (without angular 2) but same code is integrated with angular 2, it fails to work as expected.
HTML and CSS Code: [Dropdown is working.]
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-user"></i>
<p>You can</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Signup</li>
</ul>
</li>
</ul>
</div>
HTML and CSS with Angular 2 [Dropdown is not working.]
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-user"></i>
<p>You can</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a [routerLink]="['/login']">Login</a></li>
<li><a [routerLink]="['/signup']">Signup</a></li>
</ul>
</li>
</ul>
</div>
<ul class="dropdown-menu">
<li><a routerLink='login'>Login</a></li>
<li><a routerLink='signup'>Signup</a></li>
</ul>
Try this.. with final version, routerLink shouldn't be used as biniding unless you have path params.
Then in router file
RouterModule.forRoot([
{path:"login", component : },
{path: "signup", component: }
])
Certain Bootstrap Elements do not work in Angular2/4. Luckily the Angular UI team has built out Bootstrap 4 Elements in Angular components.
Follow these instructions to install
Documentation for dropdown
Note: this is tested with angular 4.0.3 so you may have to find the version that works with angular 2.
I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I am trying to display a Twitter Bootstrap dropdown menu on right click on a element. This is the code that I wrote:
Javascript
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
toggle.dropdown('toggle');
return false;
});
HTML
<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This code works fine in Chrome and when I right click the menu is displayed properly, but on Firefox when I right click, the menu is displayed for a second and it disappears. Is there any other event that I need to handle too?
JSFiddle: http://jsfiddle.net/Serff/3/
Remove
data-toggle="dropdown"
The final html markup:
<div class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Hello</li>
<li>World</li>
</ul>
</div>
This should work.
Use this script:
var toggle = $('.dropdown-toggle');
toggle.on('contextmenu',function(e){
e.preventDefault();
toggle.dropdown('toggle');
});