Calling twitter bootstrap tab function from within another function - javascript

With bootstrap-tab.js I want to activate a tab, calling it from within another function.
Html:
<a onClick='activate_tab()'>Activate Tab</a>
<ul class='nav nav-tabs hydro' id='nav_tabs'>
<li class='active'><a href='#1' data-toggle='tab'>First</a></li>
<li class=''><a href='#2' data-toggle='tab'>Second</a></li>
<li class=''><a href='#3' data-toggle='tab'>Third</a></li>
</ul>
<div class='tabbable'>
<div class='tab-content'>
<div class='tab-pane active' id='1'>content first</div>
<div class='tab-pane ' id='2'>content second</div>
<div class='tab-pane ' id='3'>content third</div>
</div>
</div>
I am able to activate the tab on page load with the following:
<script>jQuery(function($){$('#nav_tabs li:eq(2) a').tab('show');})</script>
And the tabs activate properly by clicking on the respective anchor elements. The following does not work:
function activate_tab(){
//process other data...then goto tab
alert(1);
$('#nav_tabs li:eq(2) a').tab('show');
alert(2);
}
I am new to javascript/jQuery.
[EDIT] I stripped the original page down to just what's shown above and it works. So, likely a conflict with other functions. Sorry to waste your time.

try this if you dont
<script>
jQuery(function($){
function activate_tab(){
//process other data...then goto tab
alert(1);
$('#nav_tabs li:eq(2) a').tab('show');
alert(2);
}
});
</script>

Related

How to stay on selected tab

i know there are a lot themes about that, but i dont know why, noone of them are working
I am using AdminLTE3, i have tabs, i want to stay on selected tab after refresh
my code (not working, but should work):
#extends('adminlte::page')
#section('title', 'Mans Profils')
#section('content_header')
#stop
#section('content')
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="about">About</div>
<div class="tab-pane" id="contacts">Contacts</div>
</div>
#stop
#section('css')
#stop
#section('js')
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
localStorage.setItem('lastTab', $(this).attr('href'));
});
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('[href="' + lastTab + '"]').tab('show');
}
});
</script>
#stop
No need to use localsStorage for that sake. just put condition over window.location.search
whichever tab has been clicked append window.location.search with that tab variable.
on reload check whether window.location.search string contains your tab variable then call the same code which is inside your tab click.

How to show content from the specific div with javascript/jQuery

I want to show content from the specific div when the page loads. This is my code:
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#buttons').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
$('.pbox:visible').hide(600);
$('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
});
});
.current {
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="buttons">
<li>
<a data-id="div1">One</a>
</li>
<li>
<a data-id="div2">Two</a>
</li>
<li>
<a data-id="div3">Three</a>
</li>
<li class="current">
<a data-id="div4">Four</a>
</li>
</ul>
<div class="pbox" id="div1">
Content 1
</div>
<div class="pbox" id="div2">
Content 2
</div>
<div class="pbox" id="div3">
Content 3
</div>
<div class="pbox" id="div4">
Content 4
</div>
As you can see by default am adding the current class to the element:
<li class="current">
<a data-id="div4">Four</a>
</li>
So what am trying to achieve is when the page loads show Content 4 as you can see right now it shows Content 1 when the page loads.
Can anybody try to help me with this?
If you need show content where link is active you can do it with code below
$.fn.pageLoad = function() {
const currentId = $('li.current>a').data('id');
$('.pbox:visible').hide(600);
$('.pbox[id=' + currentId + ']').show(600);
}
$('document').pageLoad();
Just make any load function which close all pboxes and find current li>a id and open it. Also you can add setTimeout if your content is loading slow.

Bind the listener to dynamic generate content in HTML

There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});

jquery tabs with links remember last active item

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.

Limiting events with e.preventDefault()

Force function toolbarInit() to fire only once.
There are 2 items with the class "nav". When I click on the link "Menu", I would like to see both nav's open.
Right now, the event runs twice (once for each nav) so you see the slidetoggle run multiple times. so rather than it opening, closing, and reopening, i just want it to open a single time.
shouldn't my use of e.preventDefault() prevent the function from running multiple times?
See my Codepen
HTML:
<nav id="people-menu" class="nav people-nav">
<div class="wrap">
<div class="region region-audience-links">
<div class="block">
<div class="content">
<ul class="row in"><div class="split-left"><li class="first leaf menu-level-1">Alumni</li>
<li class="leaf menu-level-1">Current Students</li>
<li class="leaf menu-level-1">Faculty</li>
</div><div class="split-right"><li class="leaf menu-level-1">Parents</li>
<li class="leaf menu-level-1">Prospective Students</li>
<li class="last leaf menu-level-1">School Counselors</li>
</div></ul> </div>
</div>
</div>
</div>
</nav>
<ul class="header-toolbar-triggers row">
<li><span class="icon-menu"></span><span class="nodisplay">Menu</span></li>
</ul>
<nav id="global-menu" class="global-nav nav" role="navigation">
<div class="wrap">
<div class="in">
<div class="region region-header">
<div id="block-menu-menu-primary-menu" class="block block-menu">
<div class="content">
<ul class="menu"><li class="first leaf">About</li>
<li class="leaf">Admissions</li>
<li class="leaf">Financial Aid</li>
<li class="leaf">Academics</li>
<li class="last leaf">Student & Residential Life</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Javascript/JQuery
function toolbarRespond() {
if ($(window).innerWidth() < 795) {
$('.nav').hide();
}
}
function toolbarInit() {
$('.header-toolbar-triggers a').on('click', function(e) {
var toolbarTarget = $(this).attr('data-target');
$('.'+toolbarTarget).slideToggle(500);
e.preventDefault();
});
}
$(document).ready(function() {
toolbarRespond();
toolbarInit();
window.onresize = function(event) {
toolbarRespond();
toolbarInit();
}
});
The preventDefault() method only stops the browser from performing the event's default action. In this case, that action would be to follow the link to its location. Your call to e.preventDefault() is why the browser doesn't navigate to the #global-menu URL.
The reason you're seeing multiple runs of the bound functionality is that you're running toolbarInit() multiple times--thereby binding the click multiple times. You run it at document ready, but then you bound it to run every time the window resizes as well.
In your simple sample code, there is no need to run toolbarInit() on resize of the window. If your real-life code is more complex, you need to separate the click binding out and stop calling it on resize.

Categories

Resources