twitter bootstrap tab set input focus when tab click - javascript

I'm using this http://getbootstrap.com/javascript/#tabs to create tabs in my forms.
What i need is to set focus on first input="text" that is displayed.
I was unable to find it in documentation or elsewhere.
<div class="tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#login1">
<span class="icon-key"></span>Login</a>
</li>
<li class="">
<a data-toggle="tab" href="#register1"><span class="icon-user"></span>Register
</a>
</li>
</ul>
<div class="tab-content">
<div id="login1" class="tab-pane active">
<input type="text"> <!-- focus when tab clicked -->
</div>
<div id="register1" class="tab-pane">
<input type="text"> <!-- focus when tab clicked -->
</div>
</div>

Do it manually if you want..
$(document).ready(function(){
$(".tab-pane").on('click', function(){
$(this).find("input[type=text]").filter(':visible:first').focus();
});
});
Hoe that helps..

The first input field will not be automatically focused you can do the following:
$('input').first().focus();
This will focus the input field.
You might even want to do it on document ready as an initiation script, like so:
$(function() {
$('input').first().focus();
});

Related

Dynamic MVC Razor href based on active nav-tab

I have an MVC Razor project using Bootstrap where:
A main view has nav-tabs
The nav-tabs have a button and search field
The active nav-tab loads a partial view below
The partial view is a List
Picture Of Main Nav-Tabs and partial view list loaded below
I would like to have the "Create New" button and Search field urls change based on which tab is currently active.
So, if inquiries are selected, then the "Create New" button would link to \inquiry\create\id
If Media is selected, then it would link to \media\create\id
The nav-tabs are defined like so:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">
Inquiries
</li>
<li>
Events
</li>
<li>
Media
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group is-empty">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#Url.Action(" Create ", "Inquiry ", new { id = Model.ID })">
<span class="glyphicon glyphicon-plus"></span>
<strong>Create New</strong>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="inquiries" role="tabpanel">
#{Html.RenderAction("List", "Inquiry", new { id = Model.ID });}
</div>
<div class="tab-pane" id="events" role="tabpanel">
#{Html.RenderAction("List", "Event", new { id = Model.ID });}
</div>
<div class="tab-pane" id="media" role="tabpanel">
#{Html.RenderAction("List", "Media", new { id = Model.ID });}
</div>
</div>
I have tried many different methods, but can't figure out how to get this working. I constantly run into issues mixing Razor syntax and Javascript together. I would greatly appreciate any feedback or suggestions that people may have to get me on the right path.
You can basically keep the create url link for each tag in the data attribute of each link listen for the click event. When clicked, read this data attribute value and set the create link's href value
<li class="active">
<a href="#inquiries"
data-create="#Url.Action("Create","Inquiries")"
class="tabLinks" data-toggle="tab">Inquiries</a>
</li>
<li>
<a href="#events" data-create="#Url.Action("Create","Events")"
class="tabLinks" data-toggle="tab">Events</a>
</li>
<li>
<a href="#media" data-create="#Url.Action("Create","Media")"
class="tabLinks" data-toggle="tab">Media</a>
</li>
<a id="createLink"
href="#Url.Action("Create", "Home ", new { id = Model.ID })">
<span class="glyphicon glyphicon-plus"></span>
<strong>Create New</strong>
</a>
Now listen to the click event on these links, read the data attribute value and set it to the href property value of the create link.
$(function() {
$(".tabLinks").click(function (e) {
$("#createLink").attr("href", $(this).data("create"));
});
});
You can do the same for the search form.

Getting two bootstrap tabs to work on a single page and accessing the active tab on submit

I have two bootstrap tab components on my page
The first one has two tabs and the second one has three.
The simplified code is as below..
<div class="col-md-12">
<ul id="tab1" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab A</li>
<li role="presentation">Tab B</li>
</ul>
<div id="tab1content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="taba">
Tab A
</div>
<div role="tabpanel" class="tab-pane" id="tabb">
Tab B
</div>
</div>
</div>
<div class="col-md-12">
<ul id="tab2" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab X</li>
<li role="presentation">Tab Y</li>
<li role="presentation">Tab Z</li>
</ul>
<div id="tab2content" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tabx">
Tab X
</div>
<div role="tabpanel" class="tab-pane" id="taby">
Tab Y
</div>
<div role="tabpanel" class="tab-pane" id="tabz">
Tab Z
</div>
</div>
</div>
<input type="submit" value="Submit" class="btnspl" style="max-width:100%" />
On submit button press I need to find out the active tab in both the components of the page.
I found this code in bootstrap site.. but it is for a single tab..
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
What changes would be needed when there are two bootstrap tab components.
jsfiddle(not working) : http://jsfiddle.net/52VtD/13447/
Any help is sincerely appreciated
Thanks
If I'm understanding it right you need to know which tab is active in both the components when "submit" button is correct. To get it you can use following code in button's click handler:
var x=$("#tab1content div.active").prop("id");
var y=$("#tab2content div.active").prop("id");
$("#log").text("TAB 1: "+ x +"\r\nTAB 2: "+ y);
x and y contains the id of selected/active tab in respective tab components. Here is working fiddle.
For getting the currently active tab you can check within click event of submit button hasClass(".active").attr("id").
The second tab container id is same as the first tab container id.

Next tab shows content but tabs don't follow

I have 2 tables separated with two tabs.
Active and Inactive
Let's say I click a next button from the active tab. The content of the inactive tab shows but the active tab is still the Active tab. Am I missing something?
Lets say their corresponding IDs are #Active and #Inactive. This is the code of the next button:
<a href=#Inactive data-toggle="tab" aria-expanded="false">
<button class="btn next">Next</button>
</a>
From your code i guess that you're using bootstrap tabs so you should add click event in your JS code to detect the click on next button and send you to the second tab.
Hope this helps.
$('.next').click(function () {
$('#myTabs a[href="#inactive"]').tab('show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class='container'>
<!-- Nav tabs --><br>
<ul class="nav nav-tabs" id='myTabs' role="tablist">
<li role="presentation" class="active">Active</li>
<li role="presentation">Inactive</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="acitve">
table 1
</br>
<button class="btn next">Next</button>
</div>
<div role="tabpanel" class="tab-pane" id="inactive">
table 2
</div>
</div>
</div>

Simple Tab switching using custom javascript function

I want to custom function too for switch between tabs when clicked on Next button,
I did something like this,this code add the active class into "li" but not show the data under that tab.
How I can do this?
function goNextTab(currtab,nexttab)
{
var curr = $('li.active');
curr.removeClass('active');
curr.next().addClass('active');
$('#'+currtab).attr('aria-expanded', 'false');
$('#'+nexttab).attr('aria-expanded', 'true');
}
<ul id="myTab" role="tablist" class="nav nav-tabs">
<li role="presentation" class="active">Customer
</li>
<li role="presentation">
<a data-toggle="tab" role="tab" aria-controls="job" href="#job" aria-expanded="true">Job</a>
</li>
<li role="presentation">Schedule
</li>
</ul>
<!-- Tab panes-->
<div class="tab-content">
<div id="customer" role="tabpanel" class="tab-pane active">
<button onclick="goNextTab('customer','job')" type="button"> Next</button>
</div>
<div id="job" role="tabpanel" class="tab-pane">
<button onclick="goNextTab('job','schedule')" type="schedule"> Next
</div>
<div id="schedule" role="tabpanel" class="tab-pane">
</div>
</div>
This is how I did it:
curr.removeClass('active');
if (curr.is("li:last")) {
$("li:first-child").addClass('active');
} else {
curr.next().addClass('active');
}
Have a look at the JSFiddle here
1.Remove onclick functions onclick="goNextTab('customer','job')"
2.Bootstrap will automatically takes from href
3. href id and div id should be same
Hope i works..
I suggest to use this:
$("#tabYouSwitchTo").tab('show');
Here is an example:
http://bl.ocks.org/kiranml1/6956013

bootstrap pill not "tabbing" content

I am setting up bootstrap pills on a page and am using the http://getbootstrap.com/javascript/#tabs-usage standard formula but I'm getting the function is not a valid function error message. I have:
<ul class="nav nav-pills" role="pilllist" id="myPill">
<li role="presentation" class="active">Show all</li>
<li role="presentation">Cars</li>
</ul>
<div class="pill-content">
<div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
<div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>
<script>
$(function () {
$('#myPill a:last').pill('show')
})
</script>
Why am I getting this error message?
You're using .pills('show'); where you should be using .tab('show'); as seen below:
$(function () {
$('#myPill a:last').tab('show')
});
Also, your HTML is incorrect for pills:
<ul class="nav nav-pills" role="tablist" id="myPill">
<li role="presentation" class="active">Show All</li>
<li role="presentation">Cars</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>
<div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>
Basically, the only mentions of pill you should have is your ID (as its name doesn't matter) and .nav-pills. Everything else should be tab, ie tabpanel, .tab-pane, etc.
Lastly, the reason you're getting an undefined function error is that .pills() isn't a fucntion.
Take a look at this Bootply to see how the tabs work.

Categories