Jquery Load is Duplicating Behaviour in django template - javascript

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..!!

Related

not able to get the selected tab value to the controller in angular.js

In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input

how to prevent MVC action and use javascript function

Form:
<form asp-action="Edit" method="post">
<ul class="nav nav-tabs">
<li class="nav-item">
<a id="informacje-ogolne-tab" class="nav-link tab-buttons">Informacje ogólne</a>
</li>
<li class="nav-item">
<a id="kategorie-tab" class="nav-link tab-buttons">Kategorie</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="informacje-ogolne-content" class="tab-pane fade">
#await Component.InvokeAsync("ProductEditGeneralInfoTab", new { product = Model })
</div>
<div id="kategorie-content" class="tab-pane fade">
#await Component.InvokeAsync("ProductEditCategoryTab", new { productId = Model.ProductId })
</div>
</div>
<div class="text-left">
<button class="btn btn-primary mt-1" type="submit">Zapisz</button>
</div>
</form>
ProductEditCategoryTab
#model ValueTypeListBoxViewModel
#Html.ListBoxFor(m => m.SelectedValue, Model.Values, new { size = 15 })
<div class="text-left">
<button id="add" class="btn btn-primary mt-1">Dodaj</button>
</div>
<script type="text/javascript"></script>
Inside script tag I want to add javascript logic to add, remove logic from one listbox to another.
But when I press 'Dodaj' it's run the same action as 'Zapisz' button. In this form there will be probably more buttons and the only one that has to run the action should be 'Zapisz'
Question:
How to prevent run action when i press 'Dodaj' and work by javascript/jquery.

jquery page counter, pagination

I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">·</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.

Change display and icon when click on <a> element

I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>

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.

Categories