Develop Reference

Onload bootstrap tab trigger

The active class isn't working and I've tried body On-load click trigger and obviously show tab using id and many other ways, however nothing seems to be working. I have hashed the URL to enable tabs to be linked individually in the search. Any help is much appreciated.
JS: to hash the URL and jump to tab
// jump to tab if it exists
if (location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
// add tab hash to url to persist state
$(document.body).on("shown.bs.tab", function(e){
location.hash = e.target.hash;
});
});
JS: To go to tab home (not working)
$("document").ready(function(){
$("#home").trigger("click");
});
HTML:
<div class="col-xs-5 col-md-2 nopadding">
<nav class="nav-sidebar">
<ul class="nav tabs">
<li class="lead3">Home </li>
<li class="lead3">tab1</li>
<li class="lead3"><a href="#tab3" data-toggle="tab" >tab3</a></li>
<li class="lead3"> Contact </li>
</ul>
</nav>
tab-pane:
<div class="tab-pane active fade text-style" id="home"> . .. </div>

What you expect from this line?
$("home").trigger("click");
I suppose Jquery can't find element here $("home"). You could evaluate it in console for check.
if you are going to find element with class 'home' or id 'home' then you should use $(".home") or $("#home") properly.

It looks like your Document Ready event doesn't work.
Try remove the quotes around the $("document").
A shorter method for this event is as follows:
$(function() {
});

I know that this is very late but I'd like to post my solution since this was something that I was stuck on as well. There's an important subtlety that I think is easy to miss. You want to trigger the click on the <a> tag inside the nav, not the actual panel. Remember you click on the tab not on the panel to trigger it into view. So to get the correct tab to show when the user navigates to /my/path#home you want to bind on the hashchange event and click the correct element. See https://stackoverflow.com/a/680865/5262119 for more info on binding to the hashchange event.
$(window).bind('hashchange', function(event){
var hash = window.location.hash;
// get the actual anchor tag that links to the panel
var $matchingAnchor = $('nav a[href^="' + hash + '"');
if ($matchingAnchor) $matchingAnchor.click();
});
And assuming you want to restrict this to trigger only a certain page then you can add a location check:
$(window).bind('hashchange', function(event){
var path = window.location.pathname;
var hash = window.location.hash;
var $matchingAnchor = $('nav a[href^="' + hash + '"');
var contextRegex = /my\/page/;
var correctPage = contextRegex.test(path);
if (correctPage && $matchingAnchor) $matchingAnchor.click();
});
I imagine you also want to make sure that clicks on the tabs update the hash in the URL window so bind to the tabs event:
$('nav a').on('click',function() {
var $a = $(this);
var hash = $a.attr("href");
window.location.hash = hash;
});
This would go inside your ready function. You will also have to make sure that the function that triggers the click happens when the page first loads.
Complete solution:
$(document).ready(function() {
// Declare clickback function
function triggerTabClick() {
var path = window.location.pathname;
var hash = window.location.hash;
var $matchingAnchor = $('nav a[href^="' + hash + '"');
var contextRegex = /my\/page/; // or whatever you want this to be
var correctPage = contextRegex.test(path);
if (correctPage && $matchingAnchor) $matchingAnchor.click();
}
// Trigger it when the hash changes
$(window).bind('hashchange', triggerTabClick);
// Trigger it when the page loads
triggerTabClick();
// Hook into click for tabs to make sure hash is updated on click
$('nav a').on('click',function(event){
event.preventDefault();
var $a = $(this);
var hash = $a.attr("href");
var window.location.hash = hash;
})
})

DOM/Page not updating but console.log shows updated value

I'm doing an SPA from scratch and so far I've gotten everything working except the active state off the navigation links will not update according to where user is navigating to.
The funny thing is that when I open up the Developer Tools in Chrome, under "Elements" the DOM is still showing the active class on the original nav element, but under "Console", when I console.log the element, it shows that the class has been removed.
I've tried event.stopPropagation() in a few places and the jQuery.off() function but nothing seems to fix this problem.
Problem: The class list of the active and the former active link doesn't update when clicking on a navigation link, but the console.log function does show an updated classlist off the former active link
Desired Behaviour: That the former active link losses its active class and that the currently active link gets an active class after its navigation link has been clicked and the page renders the new content(the supposedly new page).
UPDATE 1: Updated the code according to suggestions and it got the first part of my problem working. Removing active class from all li elements now works, but making the page render the updated links with active class on currently active link after navigation does not work. See in app.js under generateView() function.
UPDATE 2: Got it working. See on the bottom of this Question. Thank you!
My app.js
(function ($, hbs){
'use strict';
// declare some usefull variables to use throughout the app
var
doc = document,
oldPath = '',
newPath = '',
navParentEl = '';
// 1: Manually trigger a hashchange to start the app.
window.onload = function (e) {
$(window).trigger('hashchange');
};
// 2: Catch clicks on the root-level element for anchor tag clicks.
doc.body.addEventListener('click', function (e) {
//e.stopPropagation();
var tag = e.target;
// check element clicket
if (tag.tagName === 'A' && tag.href && e.button === 0) {
// it's a left-click on an anchor. Lets navigate!
if (tag.origin === window.location.origin) {
// prevent the page from navigating
e.preventDefault();
// it's a link within the site, HURRAY!
oldPath = window.location;
newPath = tag.href,
navParentEl = tag.parentElement;
console.log(navParentEl);
// Update the URL bar! IMPORTANT!
// #TODO: MOVE INTO A FUNCTION OR OBJECT
window.history.pushState(null, '', newPath);
render(window.location.hash, data, e);
}
}
});
// register Handlebars partials
hbs.registerPartial({
'header': hbs.templates.header,
'footer': hbs.templates.footer
});
$(window).on('hashchange', function (e) {
// On every hash change the render function is called with the new hash.
render(window.location.hash, data, e);
});
function render(url, data, evt) {
var temp = url.split('/')[0];
// Hide current page
$('.pages').addClass('hidden');
// remove anchors .active class
//$('.nav-parent').removeClass('active');
var map = {
'': function (data) {
renderPage('home', data);
},
'#home': function (data) {
renderPage('home', data);
},
'#gallery': function (data) {
renderPage('gallery', data);
},
'#about': function (data) {
renderPage('about', data);
}
};
if (map[temp]) {
map[temp](data);
} else {
renderErrorPage(data);
}
}
function renderPage(page, data) {
var tpl = hbs.templates[page](data);
generateView(tpl, page);
}
function renderErrorPage(data) {
renderPage('error', data);
}
function generateView(tpl, page) {
var pageId = '#' + page;
$(pageId).removeClass('hidden');
$('.container').html(tpl);
// this works for removing the active class from all li elements
$('.nav-parent').removeClass('active');
// add .active class to the new active anchor element
// does not work
$(navParentEl).addClass('active');
}
})(jQuery, Handlebars);
My navigation HTML:
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="nav-parent active">Home</li>
<li role="presentation" class="nav-parent">Gallery</li>
<li role="presentation" class="nav-parent">About</li>
<li role="presentation" class="nav-parent">Contact</li>
</ul>
</nav>
<h3 class="text-muted">{{ projectName }}</h3>
</div>
UPDATE 2: Got it working after some tips. I needed to re-think my generateView() function. Here's the final code for that function:
function generateView(tpl, page) {
var pageId = '#' + page;
// remove hidden class from content to be shown
$(pageId).removeClass('hidden');
// add the template to the html
$('.container').html(tpl);
// move the active class from the former active link
$('.nav-parent').removeClass('active');
// get the current hash of the location
var newHash = window.location.hash,
// get all links
_links = document.querySelectorAll('.links'),
currentActiveLink = '';
// iterate over the _links object and find the link with href === newHash
for ( var i = 0; i < _links.length; i++ ) {
if ( _links[i].getAttribute('href') === newHash ) {
// store the link with href == newHash
// inside the currentActiveLink variable
currentActiveLink = _links[i];
}
}
// add active class to current active link
currentActiveLink.parentElement.classList.add('active');
}
Thank you!

isnt it possible that you redraw your navigation? didnt really go through your code but it took me a looong time to discover that in my SPI. I changed some params, but I also ajax-loaded those elements wit default serverside properties...
EDIT: yea I can see that happening in your app

How to know which anchor is clicked in jquery?

I have this code:
HTML:
<ul class="dropdown-menu" role="menu" id="document_dropdown">
<li><a class="notify" href="toSomewhere" id="1">Item1</a></li>
<li><a class="notify" href="toSomewhere" id="2">Item1</a></li>
<li><a class="notify" href="toSomewhere" id="3">Item1</a></li>
<li><a class="notify" href="toSomewhere" id="4">Item1</a></li>
</ul>
JQuery:
$(document).ready(function () {
$('#document_dropdown .notify').click(function(){
var id = $(this).attr("id");
alert(id);
});
});
What I want to achieve is to see which anchor is clicked and return the id of that anchor so that I can use it in another script. So far it doesn't do anything. What might be wrong with my code? Can anyone help me with this? Thank you very much.

The code you have will work fine, although this.id is a more succinct method of retrieving a native property from an element. If you wish to stop the clicking of the link causing the browser to make an HTTP request, you would need to add preventDefault() to your logic.
You cannot return anything from an event handler, so instead if you need to pass information around you would need to either store it in a global variable, or call another function with that value as a parameter.
$('#document_dropdown .notify').click(function(e){
e.preventDefault();
var id = this.id;
alert(id);
doSomething(id);
});
function doSomething(id) {
alert('You clicked #' + id);
}
Example fiddle

you just need to do this :
$(document).ready(function () {
$('#document_dropdown .notify').click(function(){
var id = this.id;
alert(id);
});
});
Thats it.

The event handler cannot return anything. You need to call another script function and pass the ID as as argument.
$(document).ready(function () {
$('#document_dropdown .notify').click(function(evt){
var id = this.id;
alert(id);
anotherScriptFunction(id);
evt.preventDefault();
});
});

You can pass in the event handler like this:
$(document).ready(function () {
$('#document_dropdown .notify').click(function(e){
var id = e.target.id;
alert(id);
});
});
In this way, e.target is the element you have clicked on. You can wrapper it into a jQuery element through $(e.target).

Link to a specific tab for jquery tabs

http://jsfiddle.net/78QPs/
This is the Javascript
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
I have used the above to make my tabs but I want to link to tabs2 & tab3 in my above example from another webpage using a href. Any other way other than using Jquery UI like javascript?
In short, How do I create a link to a tab directly from another page and within the page from the above example?

I guess that is 1) Listen for the Hash, and 2) trigger the click of the relevant 'tab'.
Now Im not 100% on the support for this event listener from jquery - but I'll add it it.
/* listen for the anchor hashtag change */
$(window).on('hashchange', function() {
/* trigger the click of the tab with the matching rel */
var _rel = document.location.hash.
$("li[rel="+_rel.substring(1)+"]").click();
});
Or use this listener of sorts which is native, ( I use it but I might need to update to the above if it works out ).
var _currhash;
function anchorWatch() {
if(document.location.hash.length>0) {
/* only run if 'hash' has changed */
if(_currhash!==document.location.hash) {
_currhash = document.location.hash;
$("li[rel="+ _currhash.substring(1)+"]").click();
}
}
}
setInterval(anchorWatch,300);
Here is a demo and code of something I added on another q that could be relevant : - http://jsbin.com/soqopepe/1/edit
*( not using jquery tabs), but works in the same way *
Here is a demo of your code with this added :
http://jsfiddle.net/sa2Lj/
To try, http://jsfiddle.net/sa2Lj/show/#tab3

You have various options: use a hash inside your url to reference the id of your tab, and retrieve it with window.location.hash.
So let's say you have a tab with id='tab' and window.location.hash = 'tab', you can do $(window.location.hash).hide().
Another good option would be using the HTML5 history function to change the URL accordingly to the tab selected. This would also be more much nicer, I guess.

for the most cross-browser compatible solution ty something like this:
var queryString = {};
window.location.href.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);
if (queryString[base.options.param]) {
var tab = $("a[href='#" + queryString[base.options.param] + "']");
tab
.closest(".tab_content")
.find("a")
.removeClass("active")
.end()
.next(".list-wrap")
.find("ul")
.hide();
tab.addClass("current");
$("#" + queryString[base.options.param]).show();
};
this assigns each tab a query string parameter value.

Cannot find where I have a popstate loop creating multiple history entries

I'm trying to create a single webpage that replaces the content of the main div when navigation links are clicked. I've been able to implement the pushstate function to replace the div content and change the url address pretty easily. I also am able to get the content to refresh when the back/forward buttons are clicked with the popstate function. However, now I click the first link and it works fine, I click the next link and it seems to apply 2 pushstates, the 3rd click, applies 3 pushstates, etc. It seems there is a push loop occurring somewhere but not sure where it is. I am in search of some advice on how to eliminate the multiple pushstates from occurring so they aren't duplicated in my history.
HTML code:
<nav id="headerNav">
<ul>
<li><button class="navButton" id="signIn" href="./content/signIn.php" name="reply" title="SignIn">Sign In</button></li>
<li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
<li><button class="navButton" id="about" href="./content/about.php" name="settings" title="About">About</button></li>
</ul>
</nav>
<section id="mainContent">
<!-- CONTENT PAGES REPLACE HERE -->
<?php
include ('./content/start.php');
?>
</section>
Javascript
$(document).ready(function() {
if (window.history && history.pushState) {
$(".navButton").click(function(e) {
e.preventDefault();
$("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
history.pushState(null, $(this).attr("title"), $(this).attr("name"));
});
}
});
window.addEventListener('popstate', function() {
//WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
if (location.pathname == "/index.php") {
$("#mainContent").load("./content/start.php");
} else {
$("#mainContent").load("./content" + location.pathname + ".php");
}
});

SOLVED! It was my "if" condition to test for the history API. When I removed that it eliminated the repeated history pushes. I also have my htaccess file redirecting all typed in urls to the index page that allows the pathname comparison to fire for the content. Works great but I know I'll have to address the bookmarking IF later as the site grows. For now, it functions the way I need it to so I can move forward!
window.onload = function() {
// PUSHES CORRECT CONTENT DEPENDING ON URL PATH - ENSURES BACK/FORWARD AND BOOKMARKS WORK
if (location.pathname == "/index2.php") {
$("#mainContent").load("./content/start.php");
} else {
$("#mainContent").load("./content" + location.pathname + ".php");
}
// EVEN HANDLER TO DETECT CLICK OF NAVBUTTON CLASS
$(".navButton").click(function(e) {
$(this).addClass("active");
$(".navButton").not(this).removeClass("active");
var $mainContent = $("#mainContent");
var $href = $(this).attr("href");
var $title = $(this).attr("title");
var $name = $(this).attr("name");
// REPLACES CONTENT WITH DYNAMIC TRANSITION
$mainContent.fadeOut(100, function() {
$mainContent.load($href, function() {
$mainContent.fadeIn(100);
});
});
//CHANGES DOCUMENT TITLE SINCE PUSHSTATE CAN'T DO THIS YET
document.title = $title;
// PUSHES URL CHANGE AND HISTORY STATE TO BROWSER
history.pushState('', $title, $name);
//PREVENTS DEFAULT ACTION OF NAVBUTTON
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
if (location.pathname == "/index2.php") {
$("#mainContent").load("./content/start.php");
} else {
$("#mainContent").load("./content" + location.pathname + ".php");
}
};
};