I am adding Partial view in to my main view , the partial view code snippet is:
<li class="item-#j deeper parent active">
<a class="" href="">
<span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-#j" class="sign"><i class="icon-plus icon-white"></i></span>
<span class="lbl">Brands</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-#j">
#foreach (var brand in Model.BrandList)
{
<li class="item-#j deeper parent active">
<div class="checkbox">
<label>
<input type="checkbox" value="#brand._id">
#*<a class="" href="#Url.Action("FilterData", "ShopWindow", new {shopKey=house._id,houseKey=house._id,houseName = house.House})">*#
<span class="lbl">#brand.Brand</span>
#*</a>*#
</label>
</div>
</li>
j++;
}
</ul>
</li>
in my main view I have a script to get all the check boxes that user have selected, the script snippet :
<script type="text/javascript">
var selectedBrand=[];
$("input[type='checkbox']").change(function () {
$('#brand input:checked').each(function () {
selectedBrand.push($(this).attr('value'));
alert("Test");
})
sendAjaxRequest();
});
When I select any check box from the partial view the script's change function is not getting triggered. This change function triggers if I check any checkbox in the main page but not for checkboxes belongs to partial view .
Any idea?
Thanks
I found the solution :
changed
$("input[type='checkbox']").change(function () {
to
$(document).on('change', '.checkbox', function() {
Related
I have filter product that have sort and filter
sorting by price, created at , available product
But when I filter the product, I can no longer sort the same product filter
for example
http://127.0.0.1:8000/product?&filter[brand]=1
and I want sort product in brand based on created at but
When I click on the latest, the link does not continue the filter and only does the sort
http://127.0.0.1:8000/product?sort=created_at
I know there is a problem with my JavaScript, but I do not know how to solve it
<form method="GET" id="jobfilter-form" enctype="multipart/form-data" content="{{ csrf_token() }}">
<div class="col-sm-12 d-flex justify-content-center">
<div class="product-short">
<ul class="products-archive-tabs watch-page">
<p>order by ::</p>
<li>
<a id="createdAt" href="{{ URL::current()."?sort=created_at" }}">
The oldest
</a>
</li>
<li>
<a id="createdAt" href="{{ URL::current()."?sort=-created_at" }}">
the newest
</a>
</li>
</ul>
</div>
</div>
<div class="shop-box-area">
<div class="sidebar-categores-box shop-sidebar mb-10">
<div class="expander">
<div class="inner-bit">
<ul class="barnd-item">
#foreach ($brand as $brands)
<li>
<label class="m-checkbox">
<input
name="brand" type="checkbox" value="{{ $brands->id }}"
#if (in_array($brands->id, explode(',', request()-
>input('filter.brand'))))
checked
#endif
>
{{ $brands->name }}
<span class="count-brand">({{count($brands->product)}})
number
</span>
<img src="/photo/brandsmall/{{$brands->smallbarnd}}">
</label>
</li>
#endforeach
</ul>
</div>
</div>
</div>
</div>
java script
<script>
function getIds(checkboxName) {
let checkBoxes = document.getElementsByName(checkboxName);
let ids = Array.prototype.slice.call(checkBoxes)
.filter(ch => ch.checked == true).map(ch => ch.value);
return ids;
}
function filterResults() {
let brandIds = getIds("brand");
let createdAt = getIds("createdAt");
let href = 'product?';
if (createdAt.length) {
href += '&sort[created_at]=' + createdAt;
}
if (brandIds.length) {
href += '&filter[brand]=' + brandIds;
}
document.location.href = href;
}
$("#jobfilter-form #filter").on("click", e => {
filterResults();
});
</script>
$products = QueryBuilder::for(Product::class)
->allowedFilters([
AllowedFilter::exact('brand', 'brand_id'),
])
->allowedSorts('created_at')
->defaultSort('available_id')
->with('category')->paginate('5')
->appends(request()->query());
How can I keep the latest value in the link?
At First, you should not have duplicated ID value in your elements.
id="createdAt" is duplicated.
Second, you are using href for the sort function, whenever you click on it, the page will redirect to the URL of the href. so other things on the page will reset.
You should use a checkbox for sort items without the <a> tag, then when filter results are called, your sort items will be added to the URL without any page redirection.
I am trying to use kendo dropdown inside a Kendo Menu. The dropdown is rendering fine. I have added noDatatemplate inside kendo dropdown to add new item to my datasource. But when i click on Add button, the newly added item is not showing inside the dropdown. When i try to console the dropdown datasource, i see the newly added item there. So, datasource.sync() is not rendering the newly added value in the dropdown.
If i use it this outside the kendo menu then it is working fine.
Please suggest what i can do to make it work.
Kendo Menu Html
var arr=[{destination:"ABC",destination:"XYZ"}];
$(window).on('load', function () {
$("#mainSapMenu").kendoMenu({
});});
function AddMenuClick() {
BindDestination();
}
function BindDestination(){
$("#drpSapDest").kendoDropDownList({
dataTextField: "destination",
dataValueField: "destination",
optionLabel: "--Select--",
filter: "startswith",
dataSource:arr,
noDataTemplate:$("#nodestinationTemplate").html(),
valuePrimitive: true,
});
}
function addNewItem(id, val) {
var widget = $("#" + id).getKendoDropDownList();
var datasource = widget.dataSource;
if (id == "drpSapDest") {
datasource.add({ "destination": val });
}``
datasource.one("sync", function () {
widget.select(dataSource.view().length - 1);
});
datasource.sync();
}
<script src="http://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="mainSapMenu">
<li id="addNewMenuClick" onclick="AddMenuClick();">
Add
<ul>
<li>
<div id="searchTemplate" style="padding: 10px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<label class="col-md-3 col-lg-3 col-sm-3">Destination</label>:
<div class="col-lg-4 col-md-4 col-sm-4">
<input id="drpSapDest" class="selectpicker" />
<script id="nodestinationTemplate" type="text/x-kendo-tmpl">
<div>
No data found. Do you want to add , click below - '#: instance.filterInput.val() #' ?
</div>
<br />
<button class="k-button" style="background-color:\\#00547d;color:\\#fff" onclick="addNewItem('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add</button>
</script>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 ">
<label class="col-md-3 col-lg-3 col-sm-3"></label>
<button class="btn blue-btn-small" onclick="CreateNewNode();"><i class="glyphicon glyphicon-plus"> </i> Add</button>
</div>
</div>
</div>
</li>
</ul>
</li>
<li id="searchMenuClick" onclick="RefreshMenuClick();">
Refresh
</li>
</ul>
I'm creating my first web app using asp.net core mvc, so I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter, Is it implemented in controller or something else, and how to implement it...
I'm stuck with implementing global search using textbox inside layout, I can't find where to implement the search after user press Enter
To implement the above requirement, you can refer to the following code snippet.
Adding form with input for searching functionality in _Layout.cshtml
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<form id="f_search" method="get" asp-action="Search">
<div class="form-group">
<div class="input-group">
<input id="ipt_search" type="search" class="form-control" name="SearchTerm" />
<span class="input-group-btn">
<button class="btn btn-default">
Search
</button>
</span>
</div>
</div>
</form>
</li>
</ul>
</div>
JS code of checking keydown event and user input
<script>
$(function () {
$('#f_search input').keydown(function (e) {
var searchTerm = $("#ipt_search").val();
if (searchTerm == "" && event.keyCode === 13) {
e.preventDefault();
return false;
}
});
})
</script>
Action method of Search
public IActionResult Search(string SearchTerm)
{
//...
//do query based on SearchTerm
//code logic here
//...
return View();
}
Test Result
So, I'm working with kendo in js. I'd like to use the tabstrip, but I'd like the tabs to be contained in a header that is styled and contains some other elements, so I am wondering if there is a way to separate the tab list and their associated divs. I'm looking to have something like this:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff</div>
</div>
</div>
However, it seems like all the example code I can find simply puts the associated divs immediately after the list, so the order of the divs corresponds to the list order. Is there any way to accomplish this sort of thing?
Edit: to clarify, I am looking for a way to display the tabcontent divs outside of the header. I don't really care about where the actual divs are in the html, but rather, where they will appear when they are generated on the page.
Ok, I figured it out. I don't think there is a way to directly attach the content divs to the tabs, but you can achieve the same functionality with the "show" or "select" events for the tabstrip. Here's what I ended up writing, boiled down.
Html:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
<div></div>
<div></div>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff1</div>
<div id="tabcontent2">Stuff2</div>
</div>
</div>
Js:
$(document).ready(function () {
function onTabSelect(selection) {
var contents = $("#content").children();
var tabNum = selection.contentElement.id.charAt(selection.contentElement.id.length - 1);
for (i = 0; i < contents.length; i++) {
if (tabNum - 1 === i) {
$("#" + contents[i].id).show();
}
else {
$("#" + contents[i].id).hide();
}
}
}
$("#tabstrip").kendoTabStrip({
show: onTabSelect
}).data("kendoTabStrip").select(0);
$("#tabstrip-1").remove();
$("#tabstrip-2").remove();
First solution would be to leave empty divs like:
<div class="border">
<div class="header">
<div id="tabstriplist">
<ul>
<li id="tab1">First tab</li>
<li id="tab2">Second tab</li>
</ul>
<div></div>
<div></div>
</div>
<div>Some other text</div>
</div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff</div>
</div>
</div>
And then set tab content whenever you want
$(document).ready(function() {
var tabstrip = $("#tabstriplist").kendoTabStrip().data("kendoTabStrip");
var item = tabstrip.contentElement(0);
//replace the first tab content
$(item).html($("#tabcontent1").html());
});
Or to create the entire tab strip dinamically using:
<div id="tabstrip"></div>
<div class="content">
<div id="tabcontent1">Stuff</div>
<div id="tabcontent2">Stuff2</div>
</div>
And JS to initialize like:
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.append({
text: "Firts tab",
content: $("#tabcontent1").html()
});
tabstrip.append({
text: "Second tab",
content: $("#tabcontent2").html()
});
I am trying to create a page with three tabs containing 3 partial views.
Main View that hosts the tabs.
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<div id="tabs" style="display:inline; float:inherit">
<ul>
<li>#Ajax.ActionLink("Tab name1","ActionMethod1","ControllerName",new AjaxOptions{UpdateTargetId="div1"})</li>
<li>#Ajax.ActionLink("Tab name2","ActionMethod2","ControllerName",new AjaxOptions{UpdateTargetId="div2"})</li>
<li>#Ajax.ActionLink("Tab name3","ActionMethod3","ControllerName",new AjaxOptions{UpdateTargetId="div3"})</li>
</ul>
</div>
<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
I have created next button in tab1 and tab2 and submit button in tab3.
Please give the code to open tab2 from tab1 on button(next) click. and where to put this code. Is it in this main view or the partial views?
Addressing the more specific question from your comment
To open tab 2 from a button click in tab 1:
Html (Standard markup for jQuery tabs):
<div id="tabs">
<ul>
<li><a id="tab1" href="#tabs-1">Tab One</a></li>
<li><a id="tab2" href="#tabs-2">Tab Two</a></li>
<li><a id="tab3" href="#tabs-3">Tab Three</a></li>
</ul>
<div id="tabs-1>
<button type="button" id="GotoTab2">Next</button>
</div>
<div id="tabs-2">
<!-- some content -->
</div>
jQuery
$(function () {
$("#tabs").tabs();
$('#GotoTab2').click(function () {
$('#tab2').click();
});
});