Dynamic MVC Razor href based on active nav-tab - javascript

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.

Related

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.

Display active Main Menu and sub Menu using CSS and javascript

I have left side menus.
<div class="panel">
<div class="panel-heading panel-red" role="tab" id="headingDash" style="">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expanded="true" aria-controls="collapseDash" class="menuList" style="">
<i class="fa fa-dashboard" style=" padding: 15px;color: #fff"></i>
Dashoboard
</a>
</div>
<div id="collapseDash" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingDash">
<div class="panel-body">
<ul class="nav">
<li class="subMenuList active" style=" ">
Dashboard-1
</li>
<li class="subMenuList" style="">
Dashboard-2
</li>
</ul>
</div>
</div>
</div>
I want to display active main menu and sub menus. On-click of sub menu using css and JS.
I have done it for static main menu and sub menus.
My Fiddle link: https://jsfiddle.net/whv76xd0/6/
How can do this dynamic on click?
Working Fiddle link
Try this.
$(document).ready(function(){
$(document).on("click", ".subMenuList", function(){
$('.panel-heading').removeClass('panel-red');
$('.subMenuList').removeClass('active');
$(this).closest('.panel').find('.panel-heading').addClass('panel-red');
$(this).closest('.panel').find('.panel-heading').removeClass('panel-head');
$(this).addClass('active');
})
})
#pavan, If you want to handle dynamic link of submenu, then try with below jQuery function.
$(document).ready(function(){
$(document).on("click",".subMenuList",function(){
alert();
})
})
Here, instead of alert you can put, any functionality which you want to perform with submenu click event

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 to preselect a option - Dropdown

my HTML is a static variant, not a solution builded with ng-repeat or an existing JSON/Angular Controler.
I need to select a custom option and used alreay ng-select without a success.
My HTML looks like:
<div class="btn-group" dropdown>
<button type="button" class="pull-right btn btn-block btn-dropdown" dropdown-toggle>
<div class="pull-left">
<i class="flag-{{my.filter.flag}} left vcenter"></i>
<span class="vcenter">{{my.filter}}</span>
</div>
<div class="pull-right"><span class="caret"></span></div>
</button>
<ul class="dropdown-menu" dropdown-menu ng-init="options[0]">
<li ng-class="{active: my.filter == 'Germany'}">
<a ng-click="my.filter = 'Germany'; my.filter.flag='DEU'"><i class="flag-DEU"></i><span>Germany</span></a>
</li>
<li ng-class="{active: my.filter == 'England'}">
<a ng-click="my.filter = 'England'; my.filter.flag='GBP'"><i class="flag-GBP"></i><span>England</span></a>
</li>
</ul>
</div>
so how can i solve it to preselect the option "Germany" by pageloading into the div.pull-left section?
You mention ng-select in your question, but you used ng-selected. Maybe it is just a typo.

twitter bootstrap tab set input focus when tab click

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();
});

Categories