If the #action dropdown element is clicked, a confirm dialog is presented, and if cancelled, the dropdown is closed using .dropdown('toggle').
Not as desired, however, the dropdown cannot be reopened without reloading the page.
What is the proper way to close an opened twitter-bootstrap-3 dropdown?
EDIT. I found I can replace $("#action").dropdown('toggle'); with $("#action").removeClass('open');, however, this does not seem like the "right" way to do it.
$("#netstart").click(function(){
if(confirm('Are you sure?')) {
$.ajax({
type:'post',
url:'netstart',
success: function (rsp){
location.reload();
},
error: function (xhr) {
alert.log(xhr.error);
}
});
location.reload();
}
else {
$("#action").dropdown('toggle');
}
});
<div class="masthead">
<nav class="navbar navbar-default">
<ul class="nav nav-justified">
<li class='first active'><a href='/settings'>Configuration Settings</a></li>
<li id='default'><a href='javascript:void(0)'>Default Settings</a></li>
<li id='testRemote'><a href='javascript:void(0)'>Test Server</a></li>
<li><a href='/logs'>System Logs</a></li>
<li><a href='/backup'>Backup Database</a></li>
<li id='action' class='dropdown'>
<a href='javascript:void(0)' data-toggle='dropdown' class='dropdown-toggle'>Action <b class='caret'></b></a>
<ul class='dropdown-menu'>
<li id='reboot'><a href='javascript:void(0)'>Reboot</a></li>
<li id='halt'><a href='javascript:void(0)'>Shutdown</a></li>
<li id='netstart'><a href='javascript:void(0)'>Restart Network</a></li>
</ul>
</li><li id='logoff' class='last'><a href='javascript:void(0)'>Logoff</a></li>
</ul>
</nav>
</div>
Related
I need to set the just previous state inside the anchor tag while navigating the menu. Here is my code:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref=".profile">College Profile</a></li>
<li ui-sref-active="active"><a ui-sref=".stream">College stream</a></li>
<li ui-sref-active="active"><a ui-sref=".dept">College Department</a></li>
<li class="dropdown " ui-sref-active="active">
<a ui-sref="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="#">Add User Role</a></li>
<li><a ui-sref="#">Add Course</a></li>
<li><a ui-sref="#">Add Section</a></li>
<li><a ui-sref="#">Add Session</a></li>
<li><a ui-sref="#">Add Semester</a></li>
<li><a ui-sref="#">Add Unit</a></li>
</ul>
</li>
<li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li>
<li ui-sref-active="active"><a ui-sref=".role">User Role</a></li>
</ul>
</div>
In this code I need when user will click on "Resource Management" menu. This menu will active and other menus will not active (here I am using active class for highlight the menu) and will show the just previous state page.
As it has some sub menus these sub menus will display in dropdown list. In this case all is coming properly but it's throwing the below error and cursor:pointer property also not coming on this menu.
Error:
Error: Could not resolve '#' from state 'dashboard'
at Object.t.transitionTo (angularuirouter.js:7)
at Object.t.go (angularuirouter.js:7)
at angularuirouter.js:7
at angularjs.js:146
at e (angularjs.js:43)
at angularjs.js:45
ui-router doesn't track the previous state once it transitions, but the event $stateChangeSuccess is broadcast on the $rootScope when the state changes.
You should be able to catch the prior state from that event ("from" is the state you're leaving):
app.run(['$rootScope',function($rootScope)
{
$rootScope.previousState;
$rootScope.currentState;
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
$rootScope.previousState = from.name;
$rootScope.currentState = to.name;
console.log('Previous state:'+$rootScope.previousState)
console.log('Current state:'+$rootScope.currentState)
});
}]);
Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle
I would like to open another tab after certain action is true.
Here you see my bootstrap navbar and the jQuery script.
<ul class="nav navbar-default nav-justified" role="tablist" id="navbar">
<li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" ><a id="tab2" href="#msg" aria-controls="msg" role="tab" data-toggle="tab">Messages</a></li>
</ul>
And here is the script.
$("#password-button").on("click", function () {
if($("#password-name").val() === password) {
$("#tab1").attr("aria-expanded", "false");
$("#tab2").attr("aria-expanded", "true");
}
}
Firebug shows me that it changes those attributes but nothing happens?
Use .tab() property to show or hide tab from Jquery. Try this:
$('.nav-tabs a[href="#tab1"]').tab('show');
Working DEMO
Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
So,
Here is a source
<ul>
<li id="1">
<a href="#">
Product root
</a>
<ul>
<li id="2">
<a href="#">
Electronicis
</a>
<ul>
<li id="445">
<a href="#">
Computers
</a>
<ul>
<li id="446">
<a href="#">
SSD
</a>
</li>
</ul>
<ul>
<li id="447">
<a href="#">
GPU
</a>
</li>
</ul>
<ul>
<li id="448">
<a href="#">
MoBo
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="449">
<a href="#">
Navigation
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="3">
<a href="#">
Whatever
</a>
</li>
</ul>
</li>
</ul>
Nothing fancy just couple of nested lists...
And here is my load script for jsTree
$("#jsTreeContainer")
.jstree({
"plugins": ["themes", "html_data", "ui" , "search"]
})
.bind("select_node.jstree", function(event, data) {
var selectedObj = data.selected;
alert(selectedObj.attr("id"));
})
.delegate("a", "click", function (event, data) { event.preventDefault(); });
});
What I would like to accomplish now is, to open node "Navigation" (id: 449) on page load. I've tried initally_open, initally_select parameters with no luck, I've even tried fiddling with search plugin, again no luck.
Has anyone managed to accomplish this, and how?
This must be a very common request but I can't find a solution for it.
I'm using master branch from gitHub, here... https://github.com/vakata/jstree
Cheers,
T.
You can try using $(treeid).jstree('open_node',id);
$("#tree").bind("open_node.jstree", function (event, data) {
if((data.inst._get_parent(data.rslt.obj)).length) {
data.inst._get_parent(data.rslt.obj).open_node(this, false);
}
});
see this for more details
jsTree Open a branch
Dont know if it helps. But here's what I do:
function openNode(tree, nodeId) {
$(tree).jstree("select_node", "#" + nodeId);
$(tree).jstree("toggle_expand", "#" + nodeId);
}
Just pass the jsTree DOM-element and the ID (449) to the function.