We Keep Coding

Jquery Load is Duplicating Behaviour in django template

I am trying to populate a page using jquery.load() method. The loading is working fine but a form inside the newly loaded part is duplicating its behaviour on submit event.
Relevant jquery part :
$('#settings').on('click',function(event){
var tax_submit_url = "{% url 'clinic_tax_submit' %}";
$('.right_col:visible').load(tax_submit_url);
return false;
});
HTML Part(inside dashboard.html)
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li><i class="fa fa-home"></i> Home </li>
<li><a><i class="fa fa-edit"></i> Appointments <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li id="doctors"><a>Doctors<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
{% for membership in memberships %}
<li class="sub_menu membership_button" id="membership_{{membership.id}}" data="{% url 'clinic_doctor_scheduler' membership.doctor.slug %}">
<a>
<span><h6 style="margin:0">{{ membership.doctor }}</h6></span>
<span style ="color:#1abb9c;"><small>{{ membership.doctor.doctorSpecial }}</small></span>
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
</li>
<li><a><i class="fa fa-desktop"></i> Billing & Invoicing <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li id="invoicing_summary"><a> Invoicing Summary </a></li>
<li id="settings"><a> Settings </a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
<div class="right_col" role="main">
</div>
Form inside template
<div class="col-xs-4" style="float:right;">
<h3>Add Another Tax</h3>
<br>
<form class="taxes_form" method="POST" action="">
{{ taxes_form.as_p }}
<button class="primaryAction btn-success" type="submit" style="width:100%;">Submit</button><br/>
</form>
<div class="alert alert-success" role="alert" style="display:none !important;">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> You have added a tax successfully!
</div>
</div>
View to render taxes.html which will be loaded in dashboard.html
def clinic_tax_submit(request):
print "inside clinic tax submit"
if request.user.is_authenticated():
invoice_taxes = Invoice_taxes.objects.filter(clinic_id=request.user.clinic.id)
context = {
'invoice_taxes': invoice_taxes,
'taxes_form': TaxesForm,
}
return render(request,'clinic/taxes.html',context)
else:
raise Http404()

Although this is a hacky way to do things, if you don't find anything else, use event.stopImmediatePropagation() on the click event that is giving duplicate behaviour..!!

How do I get link in bootstrap tabs

i want in this tabs code get the link for tabs directly
like this ex : domainname.com/index.php#tab3
any idea for get the url tabs because i want to use in form ...
How do I get link in bootstrap tabs
code directly : http://www.bootply.com/D4A2AglssW#3
<div class="container" id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="step1">
<p>Here is the content for the first step...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step2">
<p>Here is the content for step 2...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step3">
<p>Here is the content for step 3...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step4">
<p>Here is the content for step 4...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step5">
<p>This is the last step. You're done.</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
Javascript
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
$('.first').click(function(){
$('#myWizard a:first').tab('show')
})

use this
$(".nav-pills>li>a").click(function(){
alert($(this).attr("href"));
});

You can easily get control over you tabs by following function. Define a global variable and whenever tab is shown, append the tab name in current url:
var url = window.location.href;
var url_withtab = ""; //you can easily access current tab url on this variable whenever needed.
$("body").on("shown.bs.tab", "#step1", function() {
//code to do after displaying step2 tab.
url_withtab = url+"#step1";
});
$("body").on("shown.bs.tab", "#step2", function() {
//code to do after displaying step2 tab.
url_withtab = url+"#step2";
});
$("body").on("shown.bs.tab", "#step3", function() {
//code to do after displaying step2 tab.
url_withtab = url+"#step3";
});
Update: here is a quick work around, and I hope it will work for you.
<div class="container" id="myWizard">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="active"><a onclick="setCurrentTabUrl('#step1')" href="#step1" data-toggle="tab">Step 1</a></li>
<li><a onclick="setCurrentTabUrl('#step2')" href="#step2" data-toggle="tab">Step 2</a></li>
<li><a onclick="setCurrentTabUrl('#step3')" href="#step3" data-toggle="tab">Step 3</a></li>
<li><a onclick="setCurrentTabUrl('#step4')" href="#step4" data-toggle="tab">Step 4</a></li>
<li><a onclick="setCurrentTabUrl('#step5')" href="#step5" data-toggle="tab">Step 5</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="step1">
<p>Here is the content for the first step...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step2">
<p>Here is the content for step 2...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step3">
<p>Here is the content for step 3...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step4">
<p>Here is the content for step 4...</p>
<a class="btn btn-default next" href="#">Continue</a>
</div>
<div class="tab-pane" id="step5">
<p>This is the last step. You're done.</p>
<a class="btn btn-success first" href="#">Start over</a>
</div>
</div>
</div>
<script>
var url = window.location.href;
var url_tab = "#step1"; //initially setting current tab to step1.
function setCurrentTabUrl(tab){
url_tab = url+tab;
console.log(url_tab);
}
//now url_tab will contain current tab url.
</script>
Update 2 (more effective):
<script>
var url_tab = window.location.href+"#step1"; //initially store your first tab name since below code only execute after clicking on a tab, and first tab url will empty if not set.
$('.nav-pills a').on('show.bs.tab', function(e){
url_tab = this.href;
console.log(this.href);
});
//url_tab contain current url of tab.
</script>
If doesnot work, try using src via url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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 Skip to Next Visible Tab

I have created a "Next" button in Bootstrap tab panel, which skips to the next tab in the sequence, however I want it to skip to the next visible tab i.e. where the li tag does not have the class "hide".
The original code I took from Bootstrap Tabs: Next & Previous Buttons for Forms and adapted as follows:
<ul class="nav nav-tabs">
<li class="active">Products
</li>
<li>Sizes
</li>
<li>Quantities
</li>
<li class="hide">Shipping
</li>
<li>Summary
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab4">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab5">
<a class="btn btn-danger btnClose">Close</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.btnNext').click(function() {
$('.nav-tabs > .active').next('li').not(".hide").find('a').trigger('click');
});
});
</script>
Fiddle: http://jsfiddle.net/tyLje3jz/
As you will see I included "not(".hide")".
This is not working quite as expected, as it will go as far as #tab3 but the button on #tab3 does nothing when what I want it to do is skip to #tab5 as #tab4 has the "hide" class.
From my understanding, ".next('li').not('.hide')" should seek out the next "li" tag without the hide class, which in this case is #tab5.
What am I doing wrong?

First, you'll need to use the class .btnNext not the id #btnNext in your click handler.
Based on the question trying to get next item not having a specific class, you can do it like this:
$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
The problem is that .next() will grab a single element and .not() will remove any item in the collection that matches the criteria. So right before the hidden tab, your code would only grab the hidden tab and then immediately rule it out. Instead, what you need to do is find all matching items, rule out any hidden ones, and then pick the first.
Demo in Stack Snippets
$(function() {
$('.btnNext').click(function() {
$('.nav-tabs > .active').nextAll('li').not(".hide").first().find('a').trigger('click');
});
});
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">Products</li>
<li>Sizes</li>
<li>Quantities</li>
<li class="hide">Shipping</li>
<li>Summary</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab2">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab3">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab4">
<a class="btn btn-primary btnNext">Next</a>
</div>
<div class="tab-pane" id="tab5">
<a class="btn btn-danger btnClose">Close</a>
</div>
</div>

Loading new content in a tab when clicked on a button not working

I am trying load content into a tab when clicked on a button. But the below code takes me to the first tab instead.
HTML CODE:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#overview" >Overview</a></li>
<li class=""><a href="#site" >Manage Sites</a></li>
<li class="" style="display:none;"><a href="#department" >Departments</a></li>
</ul>
</div>
<div class="tab-pane" id="site">
<div class="container center">
<h3 class="center">Sites Management</h3>
<tr>
<td><input type="text" class="form-control name" id="site_name{ID}" value="{NAME}">/td>
<button type="button" class="btn btn-default btn-sm dropdow`enter code here`n-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#dept-container" class='manageDepartments' id='{ID}'>Manage departments</a></li>
</ul>
</td>
</tr>
</div>
</div>
<div class="tab-pane" id="department">
<div class="container center" id="dept-container">
<h3 class="center">Departments Management</h3>
</div>
</div>
Jquery:
$('.manageDepartments').on( 'click', function( event ) {
var urlLinks = $(this).attr("href");
$("#site").load(urlLinks);
});
Can anyone tell me what's wrong in here?
Thanks in advance

$('.manageDepartments').on( 'click', function( event ) {
event.preventDefault();
$("#site").html($($(this).attr("href")).html());
});