I would like to open another tab after certain action is true.
Here you see my bootstrap navbar and the jQuery script.
<ul class="nav navbar-default nav-justified" role="tablist" id="navbar">
<li role="presentation" class="active"><a id="tab1" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" ><a id="tab2" href="#msg" aria-controls="msg" role="tab" data-toggle="tab">Messages</a></li>
</ul>
And here is the script.
$("#password-button").on("click", function () {
if($("#password-name").val() === password) {
$("#tab1").attr("aria-expanded", "false");
$("#tab2").attr("aria-expanded", "true");
}
}
Firebug shows me that it changes those attributes but nothing happens?
Use .tab() property to show or hide tab from Jquery. Try this:
$('.nav-tabs a[href="#tab1"]').tab('show');
Working DEMO
Related
I have a form, in the form I have a series of objects, for each object there is a tab. For example:
object 1: tab1
object 2: tab2
object 3: tab3
Code example:
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="evidence-form-1-tab" data-toggle="pill" href="#evidence-form-1" role="tab" aria-controls="evidence-form-1" aria-selected="true">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evidence-form-2-tab" data-toggle="pill" href="#evidence-form-2" role="tab" aria-controls="evidence-form-2" aria-selected="false">2</a>
</li>
</ul>
I would like to know the value of the selected tab at the time of submitting the form.
JavaScript part:
function validateRegister() {
event.preventDefault();
$('#evidence-formset').attr('action', "{% url 'interpretation' %}").submit();
}
Is there a way to inject the value of the current tab and then process it in the (request.POST) in the backend?
You can use $(".nav-item.active a").text() to get value of active tab and then put this value inside input tag and append it to your form so that this will also get submitted.
Demo Code :
function validateRegister() {
event.preventDefault();
console.log($(".nav-item.active a").text())
//get class which is active text() and append inside form..
$('#evidence-formset').append("<input type='text' name='obj' value='" + $(".nav-item.active a").text() + "'>")
$('#evidence-formset').attr('action', "{% url 'interpretation' %}").submit();
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="evidence-form-1-tab" data-toggle="pill" href="#evidence-form-1" role="tab" aria-controls="evidence-form-1" aria-selected="true">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="evidence-form-2-tab" data-toggle="pill" href="#evidence-form-2" role="tab" aria-controls="evidence-form-2" aria-selected="false">2</a>
</li>
</ul>
<div class="tab-content">
<div id="evidence-form-1" class="tab-pane fade in active">
<h3>HOME</h3>
</div>
<div id="evidence-form-2" class="tab-pane fade">
<h3>Menu 1</h3>
</div>
</div>
<form id="evidence-formset">
<button type="submit" onclick="validateRegister()">Click me</button>
</form>
I assume you are using Bootstrap navs. If this is correct, you should mention it first (and tag your qeustion as such).
You can add a <input type="hidden" name="activetab" id="activetab"> tag somewhere inside your <form></form>. Then add an event listener that updates the value of this hidden input whenever the user changes the tab:
$('a[data-toggle="pill"]').on('shown.bs.tab', (e) => {
$('#activetab').val(e.target.href.replace(/^#/, ''));
})
For example, if the user clicks on Tab 1, this will set the value of the input to "evidence-form-1". Then, when the user submits the form, the browser will send the value of the hidden input to the server as activetab=evidence-form-1, which can be read from Django.
Note that the input won't have a value until the user switches tabs at least once. This may become a problem if the user does not click on any tabs before submitting the form. I'll leave it to you to figure out how to handle this scenario.
If the #action dropdown element is clicked, a confirm dialog is presented, and if cancelled, the dropdown is closed using .dropdown('toggle').
Not as desired, however, the dropdown cannot be reopened without reloading the page.
What is the proper way to close an opened twitter-bootstrap-3 dropdown?
EDIT. I found I can replace $("#action").dropdown('toggle'); with $("#action").removeClass('open');, however, this does not seem like the "right" way to do it.
$("#netstart").click(function(){
if(confirm('Are you sure?')) {
$.ajax({
type:'post',
url:'netstart',
success: function (rsp){
location.reload();
},
error: function (xhr) {
alert.log(xhr.error);
}
});
location.reload();
}
else {
$("#action").dropdown('toggle');
}
});
<div class="masthead">
<nav class="navbar navbar-default">
<ul class="nav nav-justified">
<li class='first active'><a href='/settings'>Configuration Settings</a></li>
<li id='default'><a href='javascript:void(0)'>Default Settings</a></li>
<li id='testRemote'><a href='javascript:void(0)'>Test Server</a></li>
<li><a href='/logs'>System Logs</a></li>
<li><a href='/backup'>Backup Database</a></li>
<li id='action' class='dropdown'>
<a href='javascript:void(0)' data-toggle='dropdown' class='dropdown-toggle'>Action <b class='caret'></b></a>
<ul class='dropdown-menu'>
<li id='reboot'><a href='javascript:void(0)'>Reboot</a></li>
<li id='halt'><a href='javascript:void(0)'>Shutdown</a></li>
<li id='netstart'><a href='javascript:void(0)'>Restart Network</a></li>
</ul>
</li><li id='logoff' class='last'><a href='javascript:void(0)'>Logoff</a></li>
</ul>
</nav>
</div>
I have this nav tab
<ul class="nav nav-tabs" id="pointerTabs">
<li class="active aa"><a data-toggle="tab" href="#aa">01 Personal</a></li>
<li class="bb" ><a data-toggle="tab" href="#bb">02 Education</a></li>
<li class="cc"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
<li class="dd"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>
on page load am trying to disable all tabs except first tab.So tried adding property
$('.bb,.cc,.dd').prop('disabled','true');
But Its not working.
How to disable it?any help?How can I use data-toggleto enable and disable tabs here?
You can use pointer-events:none on all but the first li
.nav.nav-tabs li:not(:first-of-type) a {
pointer-events:none;
}
you can add this css in you li tag
class="disabledTab"
.disabledTab{
pointer-events: none;
}
in you html
<ul class="nav nav-tabs" id="pointerTabs">
<li class="active aa disabledTab"><a data-toggle="tab" href="#aa">01 Personal</a></li>
<li class="bb disabledTab" ><a data-toggle="tab" href="#bb">02 Education</a></li>
<li class="cc disabledTab"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
<li class="dd disabledTab"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>
add disabledtab css in your tab which you want to disabled.
You could use jQuery and remove the data-toggle and href attribute, and each time manipulate them on certain events.
Also, if all except one are to be disabled on page load, add a common class to all those that are to be disabled and then use the CSS property pointer-events
For eg :
.disable
{
pointer-events: none;
}
I'm working on small mvc application, and on my view there is tab control which has 3 tabs, and depending on ViewBag value I need to open my third tab, here is image of a how my view looks:
So when View is loaded, I need to check for a value of my ViewBag and depending on that I need to open my TAB 3, so here is what I've tried:
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
#if (ViewBag.SuccessBody == null)
{
<li role="presentation" class="active">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="">
TAB 3
</li>
}
else
{
<li role="presentation" class="">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="active" onload="RedirectToTab();">
TAB 3
</li>
}
</ul>
As you can see guys depending on a value od ViewBag.SuccessBody I tried to load corresponding HTML, so if there is a value then I would load HTML which include TAB3 To own class="active" (please read code detailed).
But unfortunatelly with this approach, TAB3 becoming active but not also OPENED, so its content is not visible, it's being kept acctually on TAB1 while TAB3 looks like it's active, and that is bad :( .
So what I've done is :
I wrote javasscript method which should really open TAB3, but I couldn't know how to invoke it so I guess I could invoke it using onload method on my li element, so guys as you can see in code above I wrote on my li
onload="RedirectToTab();"
but unfortunatelly nothing happens..
And here is definition of my RedirectToTab javascript method:
function RedirectToTab() {
var customVal = $("#editViewBag").val();
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
So guys one more time, how can I open TAB3 depending on a vaue of my ViewBag?
Thanks guys
Cheers
Just use the razor engine to output your ViewBag value in the javascript:
function RedirectToTab() {
var customVal = '#ViewBag.SuccessBody';
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
Now you can call this from the doc ready:
$(document).ready(function () {
RedirectToTab();
});
You don't need to use JavaScript to open the tab. You can do it your Razor view which has the benefit of not seeing the active tab switch from 1 to 3 when the page loads. Here is a simple example with 3 tabs:
#{
string tab1 = null, tab2 = null, tab3 = null;
if (ViewBag.SuccessBody == null)
{
tab1 = "active";
}
else
{
tab3 = "active";
}
}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="#tab1">Tab 1</li>
<li role="presentation" class="#tab2">Tab 2</li>
<li role="presentation" class="#tab3">Tab 3</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane #tab1" id="tab1">
tab 1
</div>
<div role="tabpanel" class="tab-pane #tab2" id="tab2">
tab 2
</div>
<div role="tabpanel" class="tab-pane #tab3" id="tab3">
tab 3
</div>
</div>
HTML :
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
JS :
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
switch ($(this).children(":first").attr("href")) {
alert(3);
case "#tab1":
});
Here I am unable to recieve the click event . Looks like I am making some mistake. Can someone show me the right way.
Because the JS is loaded first the DOM is not ready yet so it could not find the Mydatatabs list, you should put your code inside ready function :
$(function(){
//Your code here
})
Hope this helps.
$(function(){
$("#Mydatatabs li").click(function (e) {
e.preventDefault();
alert(1);
var MyID = $("#MyID").val();
alert(2);
});
})
<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>
<ul id="Mydatatabs" class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#details" id="TabDetailsLink">Personal
Details</a></li>
<li><a data-toggle="tab" href="#tab1" id="Tabtab1Link">tab1</a></li>
<li><a data-toggle="tab" href="#tab2" id="Tabtab2Link">tab2</a></li>
<li><a data-toggle="tab" href="#tab3" id="Tabtab3Link">tab3</a></li>
<li><a data-toggle="tab" href="#tab4" id="Tabtab4Link">tab4</a></li>
</ul>
So, first you have to put your jquery code inside a document ready statement. See the example:
$(document).ready(function(){
//... code
});
This is to be certain that the element to which the .click() event is bound has been created when the function executes.
For further explanation, look this response: Why should $.click() be enclosed within $(document).ready()?
And is not missing any end curly braces in this click event? In between switch case and end of the function?