jQuery tabs reloading - javascript

As i am newbie to jQuery so i am doing the simple exercises.
I have done the simple tabs.
I am trying with the location.reload() function.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tabs Testing</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
<li><a data-toggle="tab" href="#menu2">Tab2</a></li>
<li><a data-toggle="tab" href="#menu3">Tab3</a></li>
<li><a data-toggle="tab" href="#menu4">Tab4</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Menu 1</h3>
<p> This is tab one</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>This is tab two</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>This is tab three</p>
<button type="submit" class="btn btn-primary" onclick="myFunction()">Reload Page</button>
</div>
<div id="menu4" class="tab-pane fade">
<h3>Menu 4</h3>
<p>This is tab four</p>
</div>
</div>
</div>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
So in the Tab3 i inserted a button, with the you can see i wrote the simple js function, by invoking that function it will reload the page.
So here is where i stuck, when the page reloads I am trying to keep selected tab active i.e. Tab3. But after the reload it will be the Tab1 active.
So i have checked the other questions and answers but i found it complex to understand.
Any help that will be helpful. Thanks in advance.


The reason it doesn't work is because the browser doesn't know it's supposed to show you that particular tab after it reloads. One way to show a particular section of the site is to use the location hash.
$(function() {
// get the current hash
var hash = document.location.hash;
// open the appropriate tab if a hash exists
if (hash) {
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Update the hash each time the tab is shown
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
If you'd prefer to keep things simple, this solution uses this plugin.
Download this file and add it to your scripts: https://raw.githubusercontent.com/aidanlister/jquery-stickytabs/master/jquery.stickytabs.js
GitHub doesn't like hotlinking, so don't hotlink.
Add this below myFunction():
$(function() {
$('.nav-tabs').stickyTabs();
});


Give different Id for all four tags.Then write same onclick function with there id's : onClick ="myFunction(id)"And your jquery is:
function myFunction (id) {
$("id").addClass('active');
}


Update: add id="loadIt" attribute to the button like this:
<button id="loadIt" type="submit" class="btn btn-primary">Reload Page</button>
Then try this snippet:
<script>
var url, id;
$('#loadIt').on('click', function(event) {
event.preventDefault();
url = window.location.href;
id = ((/#menu/).test(url)) ? "" : '#' + $(this).closest('div').attr('id');
// console.log(url + id);
window.location.replace(url + id);
});
</script>
JSFiddle Hopefully it'll work.

Related

How to open a popup textarea box asking user to submit comments?

I have the following dropdown list as a part of my project:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="rem">CS 520</li>
<li class="rem">CS 530</li>
<li class="rem">CS 571</li>
<li class="rem">CS 575</li>
</ul>
</div>
When i click on any of the li, i want to popup (not alert) a box containing textarea (to submit comments) and SUBMIT, CANCEL and RESET buttons.
I am unable to figure this out using JavaScript (or jQuery). Is there any way this can be achieved? I can find people giving examples where they do the similar problem with an alert, but I need to do it with a simple popup box.
There is somewhat similar problem's solution on this link ; But the JS code is too complex I guess. Thanks

https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Check this and modify the code for list

Check this code and correct accordingly, If will click on any li popup dialog will open.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<!-- content -->
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
</div>
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li><a id="details" href="#">View details</a></li>
<li><a id="share" href="#">Share</a></li>
</ul>
</div><!-- /popup-menu -->
</div>
<script>
var currentId = 0;
var baseURL = "person.php?id=";
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
</script>
</body>
</html>
For more support and help , go through by giving this link in jsFidle Click Here 1 or check here Link 2
Check these links to open your popup and how it workd

Bootstrap 3 nav-tabs won't change on click

So I just started a new site in bootstrap and I'm working on a nav-tabs design. I've followed the directions to the tee and have almost copied and pasted at this point just to get it to function but alas I have several problems:
(1) The nav-tabs do not change on click i.e. the url changes to my element id but the actual tab does not become "active" (Home remains depressed while the others stay unpressed)
(2) The tab-content div only displays the content marked by class="active".
I have included the necessary jquery and bootstrap js scripts and I believe they are in the correct order but no matter what I do these tabs never switch their active state to the one that is clicked.
Here is my html:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.2.min" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I have attempted the various solutions I could find including the addition of
<script>
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Underneath the bootstrap.min.js script but like I said just about anything I've done has produced NO change whatsoever. Everything else looks fine on the page but a little guidance here would truly get me started on the right foot. I haven't been working with bootstrap for more than a few hours so forgive my ignorance. The docs say that bootstrap does not even require javascript to toggle the tabs when data-toggle is used so I'm quite confused on what the right answer is.
:EDIT: The first answer was correct. Placing the tags right before the closing body tag did not improve functionality but replacing my scripts with
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
Did indeed work. I my initial jquery and bootstrap files were in the correct place but it seems they are not completely functional/broken in some way or something. Thanks again!
By the way: Am I able to link to these repositories constantly or will I have to update my pages when new updates of bootstrap/jquery come out? What I'm asking is will these repositories will be deleted?

The only thing I can think of (but what usually causes this issue) is your <link> and <script> tags are in the wrong spot. Copying your code to an editor of mine and adding jquery.min.js and bootstrap.min.js right before the closing </body> tag caused it to work just fine for me. Here is the HTML file:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=".../bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>New Homepage w/ Bootstrap</title>
</head>
<body>
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
<script src=".../jquery.min.js" type="text/javascript"></script>
<script src=".../bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Note: Replace .../ with the correct URL to bootstrap.min.css, jquery.min.js and bootstrap.min.js. Hope that helps!

The tabs are working fine as can be seen here: https://jsfiddle.net/AndrewL32/nh6ma48r/
<script type="text/javascript">
$(document).ready(function () {
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous tab
});
});
</script>
You need to keep bootstrap.js as well as the above script that calls the function above on your <head></head> section but below your jQuery.
Also, please replace your:
<script src="bootstrap.js"></script> with this <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
and your
<script src="jQuery"></script> with this <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
(issue could be because your js files are edited, moved or missing)

How to link section tabs

Hi everyone I need help with sections I'm using section-container auto with deep_linking;true
i also have data-slug to each tabs,
I have 3 tabs with images on them so basically i want to have a direct link access to each individual tabs to have a link on the homepage. I tried adding location.hash script, also tried the .on click and .trigger, and none of them works.
thanks a lot.
<body>
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><span>tab1</span></p>
<div class="content" data-slug="loans" data-section-content="">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><span>tab2</span></p>
<div class="content" data-slug="tab2" data-section-content="">
<h1>tab2</h1>
</div>
</body>

this is the The simplest way >>>>>> try this :
HTML
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><a id="tab1" href="#tab1"><span>tab1</span></a> </p>
<div class="content" data-slug="loans" data-section-content="" id="panel1">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><a id="tab2" href="#tab2"><span>tab2</span></a></p>
<div class="content" data-slug="tab2" data-section-content="" id="panel2">
<h1>tab2</h1>
</div>
jquery
$(document).ready(function (){
$('#panel1').hide();
$('#panel2').hide();
$('#tab1').click(function(){
$('#panel1').show();
$('#panel2').hide();
});
$('#tab2').click(function(){
$('#panel2').show();
$('#panel1').hide();
});
});
Demo : here

you can use jquery UI library to make tabs and panels
try this code to figure out what is jquery ui tabs :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</body>
</html>
to watch how it's look like see this fiddle
for complete reference see here

In simplest terms your markup would be a <ul> with your tabs, followed by a stack of containers for the content of those tabs. You current markup has them inside the same container, which is going to make the effect hard to pull off.
<ul class="tabs">
<li class="tab1">Tab Title</li>
<li class="tab2">Tab Title2</li>
</ul>
<div class="tab-content">
<p class="tab1">Content for tab 1</p>
<p class="tab2">Content for tab 2</p>
</div>
Here's a fiddle -- tweak the CSS as you see fit, but you really don't need JQuery UI just to build tabs.

Ive done it guys, i just added a script:
<script>
$(document).ready(function(){
$('section').removeClass('active');
var hash = window.location.hash;
if (hash !== '')
{
$('section'+hash).addClass('active');
}
});
it checks the hash in the url then sets the section class="Active".
thanks guys for all the replies.

JQuery | Takes Two Clicks to Hide Div Tag via Menu Bar

On my Contact page I have a link to show an email form, which right now is just a header. I want the email form to hide whenever a different "page" is clicked on; however, right now it takes two clicks to get rid of the form. The form should only be visible on the Contact Page. I made a small testcase to illustrate the problem.
My code works, but only after you click a menu twice. I need help making it so I click a link once and it disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
</div>
<div class="contact_form">
<h1>Contact Form</h1>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>

you have to change a little thing in your html
just move the contact_form div inside contact div
let code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
<div class="contact_form">
<h1>Contact Form</h1>
</div>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
then remove the if statement form your jquery
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
$(".contact_form").slideUp().hide();
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>

is(':visible') checks the display property of an element, you can use css method.
//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
$(".contact_form").slideUp().hide();
}

javascript for create tabs

I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.

This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource

Categories

Resources