We Keep Coding

Have to click two times to do a method in React

Hey I'm currently working on a project in Meteor and React and I'm currently styling the front end with Materialize. For the dropdown and side-nav to work I need to add some jquery lines in some methods.
The problem here is that I need to click at the buttons two times for the dropdown and sidebar to activate or show themselves, but after i've clicked two times for the first time it works with just one click.
These are the methods:
showDropdown(){
$(".dropdown-button").dropdown();
}
collapse(){
$('.button-collapse').sideNav({ menuWidth: 300, closeOnClick: true });
}
constructor:
export default class Navigation extends TrackerReact(React.Component) {
constructor() {
super();
this.showDropdown= this.showDropdown.bind(this);
this.collapse = this.collapse.bind(this);
}
And this is where I am using these methods in the rendering:
render(){
var navOptions;
if (Roles.userIsInRole(Meteor.user(), 'user')){
navOptions = (
<div>
<nav>
<div className="nav-wrapper">
SeniorSmart
<i className="material-icons">menu</i>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li>Hjem</li>
<li><a className='dropdown-button' href='' onClick={this.showDropdown} data-activates='dropdown1'>Drop Me!</a></li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<ul id="dropdown1" className="dropdown-content">
<li>Finn aktiviteter</li>
<li>Mine venners aktiviteter</li>
<li>Mine påmeldinger</li>
<li>Opprett aktivitet</li>
</ul>
<ul className="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
)

You have to click twice because those jQuery plugins need to be initialized. Your first click init them, then they just work normally with all other clicks come after.
To avoid this, you should initialize these plugins inside componentDidMount, but you have to make sure that the DOM elements to be used are put on the screen.
As I see in your code, the nav is only rendered if the logged-in user has user role. Therefore if user do not have that role, the nav element will not be rendered so as the plugins can not be initialized.

Hiding a Div without duplicating code

I have a pop out menu in a div.
I'm controlling the opening and closing of the div using: ng-click="showNavMenu = !showNavMenu".
However for each, link where I use this, i need to duplicate that code so that the menu actually closes, once the new view is loaded.
I'd like to avoid this code duplication - any ideas on what I can do:
<div class="navMenu" ng-show="showNavMenu">
<ul>
<li>About</li>
<li>Privacy</li>
<li>Contact Us</li>
</ul>
</div>

Use function instead
<li>About</li>
And define this function in controller
$scope.toggleMenu = function() {
$scope.showNavMenu = !$scope.showNavMenu;
}

What about putting the ng-click on the parent ul? I'm not super well-versed in angular's event bubbling/propagation rules - there might be some tweaks you need to make to your function or to the ng-click attribute. Or it might just work.
function toggleMenu() {
$scope.showNavMenu = !$scope.showNavMenu
}
-----
<ul ng-click="toggleMenu()">

I would go with moving the navigation logic to the controller code, seems the cleanest solution to me. So your markup would look like:
<div class="navMenu" ng-show="showNavMenu">
<ul>
<li><a href ng-click="navigate('about')">About</a></li>
<li><a href ng-click="navigate('privacy')">Privacy</a></li>
<li><a href ng-click="navigate('contact')">Contact Us</a></li>
</ul>
</div>
And inside your controller:
$scope.navigate = function(path) {
$scope.showNavMenu = false;
window.location.href = '/' + path; //better navigate via router
}

jquery active menu lost after clicking on link

So I have a simple menu and I'm trying to remove/add an active class to the clicked menu item.
$(function(){
$('ul.navbar-nav li').click(function(){
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
});
});
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
<li>methods</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
The issue I'm having is this works but since going to a new page refreshes the site once I'm in the new page the active class always goes back to the initial active class in my HTML. I feel like I've done this a number of times and never had this issue. Maybe I'm missing something.

As you redirecting new page on each link click, so dynamically added active class is removed on page load. You can do it like following.
Remove the active class from home menu and add specific href to this like below.
<li class="active">Home</li>
jQuery
$(function () {
$('ul.navbar-nav > li > a').each(function () {
if (window.location.pathname.indexOf($(this).attr('href')) > -1) {
$(this).closest('li').addClass('active');
return false;
}
});
});

There is more than just one file in your project, right?
I would copy the whole ul navbar and paste it into every single page. All you have to do after that, is to put the active class on the respective li element.

Update: None of your li's should have an active class and then add the active class on page load.
/menu.html
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="work">work</li>
<li class="methods">methods</li>
<li class="blog">blog</li>
<li class="team">team</li>
<li class="contact">contact</li>
</ul>
js could be something like this
var page = window.location.pathname.split('/')[1];
$('li.' + page).addClass('active');

You can try following things
$(function()
{
$('ul.navbar-nav li').click(function(event)
{
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
Prevent default would avoid anchor tag tag default action to reload the page. So this should work.
Or if you do not need to go to another page then you can use div instead anchor tag.You can simulate anchor tag behaviour using :hover css selector.
div:hover
{
color:blue;
cursor:pointer;
font-style:underline;
}

This seems to be working:
HTML:
<ul class="nav navbar-nav">
<li id="liHome">home</li>
<li id="liWork">work</li>
<li id="liMethods">methods</li>
<li id="liBlog">blog</li>
<li id="liTeam">team</li>
<li id="liContact">contact</li>
</ul>
The event handler:
$('ul.navbar-nav li').click(function(){
window.sessionStorage.activeMenuItem = this.id;
});
When the page has loaded:
if (window.sessionStorage.activeMenuItem) {
$("#"+sessionStorage.activeMenuItem).addClass('active');
}
From https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage:
A page session lasts for as long as the browser is open and survives over page reloads and restores.
One problem with this solution is that you cannot open links in a new window, since:
Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

You're likely in one of three scenarios:
A) You have a collection of static HTML pages with unique content.
B) You're using a server-side language and doing some basic includes
C) You're using a framework with routing logic.
A If you have two pages both containing the menu code, then it's as simple as moving the default active class.
<!-- Home -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
…
</ul>
<!-- Work -->
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">work</li>
…
</ul>
B Assuming you're using PHP then something like the following is an easy way to pass this info around:
// menu.php
<ul class="nav navbar-nav">
<li <?php if($page = 'home'){ echo 'class="active"' } ?>>Home</li>
…
</ul>
// home.php
<?php
$page = 'home';
include(menu.php);
…
C This will largely depend on the framework you're using, but most will have template helpers that can access the current route, something like:
<ul class="nav navbar-nav">
<li <% is_route('home') class="active" %>>Home</li>
But adding classes after DOM load with javascript or using session or cookie states is likely over the top.

Click event on jQuery "fly out" menu

I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit

If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.

$('.listTab a').click(function(e){...});

One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output

How do you toggle the active nav link in Bootstrap a navbar without writing additional javascript?

Is there a simple way to toggle the active link in a basic bootstrap navbar without writing any javascript?
Here's my navbar
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<div>
<ul class="nav" ng-show="isAuthenticated">
<li class="active">Create Activity</li>
<li>Manage Activities</li>
<li>Super User</li>
</ul>
</div>
</div>
</div>
</div>

Well, im not 100% sure (im not that good with javascript), but you could do a few if statements.
if($url=="/activity/create") {echo "class='active'";}
This is the php syntax. Try something out with JS.
BTW you are using node.js which is JS, so you wouldnt be able to do it without JS.

You can set the class attribute to "active" via JS. I do this with an external script, here's a snippet:
setActive();
function setActive() {
activePath = document.location.pathname; //get the url of current page
switch(activePath) {
//evaluate activePath (more efficient than nested IFs)
case "/uptime/":
//if current page path is /uptime/
document.getElementById('navuptime').className = "active";
//set class of element with ID='navuptime' to "active"
break;
//break out of switch statement, we're all done
case "/uptime/domain/":
//if current page path is /uptime/domain/
document.getElementById('navuptime').className = "active";
//just like above, set class of element with ID='navuptime' to "active"
document.getElementById('navdomain').className = "active";
//also set the nested navbar element class attribute to "active"
break;
//break out of switch statement, we're all done
default:
//used if no match was found
break;
//i don't do anything if no match was found
}
When adding a page to the site you have to update the script as well, but it's just one more case inside the switch statement.
Here is a snippet of my navbar HTML:
<div class="collapse navbar-collapse navbar-ex1-collapse nudge-left">
<ul class="nav navbar-nav navbar-right">
<li><a id="navwifi" href="/wifi">Guest WiFi</a></li>
<li class="dropdown"><a id="navuptime" class="dropdown-toggle" data-toggle="dropdown" href="#">Uptime Monitoring<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="navwan1" href="/uptime/wan1">WAN 1 Connection</a></li>
<li><a id="navwan2" href="/uptime/wan2">WAN 2 Connection</a></li>
<li><a id="navdomain" href="/uptime/domain">Domain</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
You can see each navbar element has a unique ID for the JS to update. This method is manageable for my small site (less than 50 pages).
If page urls such as domain.com/uptime/page.html are used the switch statement won't find a match as it's written above... document.location.pathname would return /uptime/page.html.
I always use an index.html file in each directory to keep the URL clean and my visitors only have to type domain.com/uptime.