Moving items from one listbox to another listbox through jquery

Moving items from one listbox to another listbox through jquery - javascript

enter image description hereI am trying to move items from one list to another on checkbox check but actually 1st list are select options and checked property is not coming in jquery , can anybody help how to achieve this ?
$(document).ready(function() {
//Once a field selected / deslected, update UI List
$('#GridFields').bind('change', function(option, checked, select) {
var selectedval = $('#GridFields option:selected').last().val();
if ($('.sort-selected li[field-id="+selectedval+"').length > 0) {
$('.sort-selected').remove(selectedval);
} else {
$('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).find(':selected').last().val() + '">' + $(this).find(':selected').last().text() + '</li>');
$('.sort-selected').animate({
scrollTop: $(".sort-selected")[0].scrollHeight
}, 1000);
}
enableSort();
});
<div class="form-group">
<select class="form-control input-sm multiselect" id="GridFields" multiple="multiple" name="GridFields" style="display: none;">
<option disabled="disabled" value="Remedy_Short_ID">Request ID</option>
<option value="Actuals_Per_Day">Actuals Per Day</option>
</select>
<div class="btn-group open" style="width: 100%;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Request ID, Summary, Request Category, Product Name, Comp Progress Level" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="true">
<ul class="multiselect-container dropdown-menu" style="-ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 300px;"><li class="multiselect-item filter"><div class="input-group input-group-sm">
--First Five Elements
<li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li>
--Remaining Elements
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Actuals_Per_Day"> Actuals Per Day</label></a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
#Html.Label("Layout Columns", "Layout Columns", new { #class = "form-label" }) #Html.ListBox("GridFields", CommonEntities.getGridFieldsMultiList(), new { #class = "form-control input-sm multiselect"})
</div>
</div>
<div class="col-md-3">
<div class="panel panel-custom1">
<div class="panel-heading">Display Order (Drag n Drop an Item)</div>
<ul class="list-group sort-selected" style="height:276px;overflow-y:auto">
<li class="list-group-item disabled" field-id="">Request ID</li>
<li class="list-group-item disabled" field-id="">Summary</li>
<li class="list-group-item disabled" field-id="">Request Category</li>
<li class="list-group-item disabled" field-id="">Product Name</li>
<li class="list-group-item disabled" field-id="">Comp Progress Level</li>
</ul>
</div>
</div>

Based on your description, following should work :
$(document).ready(function() {
//Once a field selected / deslected, update UI List
$('#GridFieldsWrap input[type=checkbox]').bind('change', function() {
$('#GridFieldsWrap input[type=checkbox]').each(function() {
if ($(this).is(":checked")) {
if ( $(".sort-selected li[field-id=" + $(this).val() + "]").length==0) {
$('.sort-selected').append('<li class="list-group-item" field-id="' + $(this).val() + '">' + $(this).parent().text() + '</li>');
}
} else {
$(".sort-selected li[field-id=" + $(this).val() + "]").remove()
}
})
$('.sort-selected').animate({
scrollTop: $(".sort-selected")[0].scrollHeight
}, 1000);
})
//enableSort();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group" id="GridFieldsWrap">
<ul id="GridFields">
<li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" value="Request_ID" checked> Request ID</label></a></li>
<li class="disabled active"><a tabindex="-1"><label class="checkbox" ><input type="checkbox" checked value="Summary"> Summary</label></a></li>
<li class="disabled active"><a tabindex="-1"><label class="checkbox"><input type="checkbox" checked value="Request_Category"> Request Category</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Product_Name"> Product Name</label></a></li>
<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Comp_Progress_Level"> Comp Progress Level</label></a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-custom1">
<ul class="list-group sort-selected" style="height:100px;overflow-y:auto">
<li class="list-group-item disabled" field-id="Request_ID">Request ID</li>
<li class="list-group-item disabled" field-id="Summary">Summary</li>
<li class="list-group-item disabled" field-id="Request_Category">Request Category</li>
</ul>
</div>
</div>

Adding id="GridFieldsWrap" on the form level helps you to get the checkbox property checked.
In List options if you want, checkbox property checked, please try to add one level above the id property and check there if checkbox property appears.

Related

Checkboxes and Tabs (Code almost complete)

I'm trying to make tabs appear and disappear if the correct checkbox is selected.
My code works but when I refresh the page or load the page the tabs appear for like 0.5 seconds and then dissapear. Maybe it's the script delay but how do I remove this? I want to start webAdmin,webCSR,webClient hidden and show/hide with the checkboxes.
https://i.gyazo.com/8ff29fe1679a89fd4e215f98ba71375d.png
My HTML:
//Start web* hidden
$('#tab-webCSR').hide();
$('#tab-webAdmin').hide();
$('#tab-webClient').hide();
//Hide/Show Branch tabs
$('#hasWebCSR').change(function() {
if($(this).is(":checked")) {
$('#tab-webCSR').show();
}
else {
$('#tab-webCSR').hide();
}
});
$('#hasProfile7').change(function() {
if($(this).is(":checked")) {
$('#tab-profile7').show();
}
else {
$('#tab-profile7').hide();
}
});
$('#hasWebAdmin').change(function() {
if($(this).is(":checked")) {
$('#tab-webAdmin').show();
}
else {
$('#tab-webAdmin').hide();
}
});
$('#hasWebClient').change(function() {
if($(this).is(":checked")) {
$('#tab-webClient').show();
}
else {
$('#tab-webClient').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<label>Deploy Apps:</label>
<div class="well">
<div class="checkbox">
<label><input type="checkbox" checked id="hasProfile7" name="hasProfile7">Profile7</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hasWebCSR" name="hasWebCSR">WebCSR</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hasWebAdmin" name="hasWebAdmin">WebAdmin</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hasWebClient" name="hasWebClient">WebClient</label>
</div>
</div>
</div>
<div class="row">
<label>GitLab Branches:</label>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id="tab-profile7" href="#profile7">Profile7</a> </li>
<li><a data-toggle="tab" id="tab-webCSR" href="#webCSR">WebCSR</a></li>
<li><a data-toggle="tab" id="tab-webAdmin" href="#webAdmin">WebAdmin</a></li>
<li><a data-toggle="tab" id="tab-webClient" href="#webClient">WebClient</a></li>
</ul>

Maybe it helps if you set the visiblity of the tabs as hidden for default. I added a style display: none; to your tabs. But then you have to initialize the visiblity once at startup.
//Start web* hidden
$('#tab-webCSR').hide();
$('#tab-webAdmin').hide();
$('#tab-webClient').hide();
//Hide/Show Branch tabs
$('#hasWebCSR').change(function() {
if($(this).is(":checked")) {
$('#tab-webCSR').show();
}
else {
$('#tab-webCSR').hide();
}
});
$('#hasProfile7').change(function() {
if($(this).is(":checked")) {
$('#tab-profile7').show();
}
else {
$('#tab-profile7').hide();
}
});
$('#hasWebAdmin').change(function() {
if($(this).is(":checked")) {
$('#tab-webAdmin').show();
}
else {
$('#tab-webAdmin').hide();
}
});
$('#hasWebClient').change(function() {
if($(this).is(":checked")) {
$('#tab-webClient').show();
}
else {
$('#tab-webClient').hide();
}
});
<style>
.nav-tabs li a {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<label>Deploy Apps:</label>
<div class="well">
<div class="checkbox">
<label><input type="checkbox" checked id="hasProfile7" name="hasProfile7">Profile7</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hasWebCSR" name="hasWebCSR">WebCSR</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hasWebAdmin" name="hasWebAdmin">WebAdmin</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="hasWebClient" name="hasWebClient">WebClient</label>
</div>
</div>
</div>
<div class="row">
<label>GitLab Branches:</label>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id="tab-profile7" href="#profile7">Profile7</a> </li>
<li><a data-toggle="tab" id="tab-webCSR" href="#webCSR">WebCSR</a></li>
<li><a data-toggle="tab" id="tab-webAdmin" href="#webAdmin">WebAdmin</a></li>
<li><a data-toggle="tab" id="tab-webClient" href="#webClient">WebClient</a></li>
</ul>

Add a style="display:none;" to the <ul> tag, and in the beginning of the JavaScript code add the following: $(".nav-tabs").show() ;
Or you can simply add style="display:none;" to the <li> tags that you want to hide at the page load

Jquery Append :checked Selector

what I need to do is when I click in test1 checkbox show the div in show-content the div id item 1 :
<div class="show-content">
<div id="item1">
test1
</div>
when I click in test2 checkbox show the div in show-content the div id item 2 :
<div class="show-content">
<div id="item2">
test2
</div>
jsfiddle: http://jsfiddle.net/P3zMu/271/
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>

First of all, you have multiple elements with the same id, and Id show never exists more than once. use class if needed.
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
I've added the code above. Hope this is what your looking for.
Demo
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$(".show-content [class^=item]").hide();
$('#selected_items span').each(function() {
var id = $(this).attr("selected-item").replace("_selected","");
$(".show-content ."+ id).show()
})
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>

Your duplicating ID's, not ideal. But will still work in this case.
Below I'm initially setting the display:none on your sections.
And then just use toggle class on them, and finding the same id inside the show-content div.
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).parent('li').get(0);
var id = $(this).closest('[id]').attr('id');
$('.show-content #' + id).toggle($(this).is(':checked'));
if ($(this).is(':checked')) {
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1" style="display:none">
test1
</div>
<div id="item2" style="display:none">
test2
</div>
</div>

Instead of multiple same id's you can use custom data attribute and then toggle those elements based on checkbox.
$('.show-content > div').hide();
$(".bill-type input[type='checkbox']").change(function() {
var id = $(this).parent('li').attr('id');
$('.show-content > div[data-target="' + id + '"]').toggle($(this).is(':checked'))
})
<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>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div data-target="item1">test1</div>
<div data-target="item2">test2</div>
</div>

Try this
multiple same ids, not good one .so change with class name
HIDE all the show-content children before showing particular item
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
var $li = $(this).closest('li');
$('.show-content').find('div').hide();
if ($(this).is(':checked')) {
$('.show-content').find('div[class="'+$li.attr('id')+'"]').show()
$('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
} else {
$('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
}
$("span").bind("click", function() {
$(this).remove();
var selectedText = $(this).attr('selected-item');
selectedText = selectedText.split('_');
$('li#' + selectedText[0]).find('input').prop('checked', false);
});
});
.test1 {
border: 1px solid red;
}
.show-content div{
display:none;
}
<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>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<div class="show-content">
<div class="item1">
test1
</div>
<div class="item2">
test2
</div>
</div>

One simple solution using data attributes and CSS:
$('[data-checked-toggle]').each(function(i) {
var thisCheckbox = $(this);
var thisTarget = $( thisCheckbox.data('checkedToggle') );
thisCheckbox.on('change', function(e) {
thisTarget.toggleClass('is-visible', thisCheckbox.is(':checked'));
}).trigger('change');
});
.show-content > div {
display: none;
}
.show-content > div.is-visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label for="checkbox1">
<input id="checkbox1" type="checkbox" data-checked-toggle="#item1" /> test1
</label>
</p>
<p>
<label for="checkbox2">
<input id="checkbox2" type="checkbox" data-checked-toggle="#item2" /> test2
</label>
</p>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
Also on JSFiddle.
This way you have great control:
inside HTML you define which element is controlled by checkbox, anywhere on page
inside CSS you decide how to present the element, it does not have to be invisible - is easy when you add/remove class

Here is a sample code. i just added two id on checkbox.
<html>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<ul class="sidebar-nav">
<li style="text-indent: 0px;">
<a id="selected_items">Refined by:</a>
</li>
<div class="collapse-link">
<a aria-controls="collapseCommittee" aria-expanded="false" class="collapsed" data-target="#collapseCommittee" data-toggle="collapse">click bellow to include</a>
</div>
<ul class="bill-type">
<li id="item1">
<input type="checkbox" id="checkbox1" />
<label for="">test1</label>
<span for="" class="pull-right">222</span>
</li>
<li id="item2">
<input type="checkbox" id="checkbox2" />
<label for="">test2</label>
<span for="" class="pull-right">33</span>
</li>
</ul>
<h1> show the content </h1>
<div class="show-content">
<div id="item1">
test1
</div>
<div id="item2">
test2
</div>
</div>
<script>
$(document).ready(function () {
$('#checkbox1').on('change', function () {
var checkbox1 = $('#checkbox1').is(':checked')
if (checkbox1) {
$(".show-content > #item1").hide();
} else {
$(".show-content > #item1").show();
}
});
$('#checkbox2').on('change', function () {
var checkbox2 = $('#checkbox2').is(':checked')
if (checkbox2) {
$(".show-content > #item2").hide();
} else {
$(".show-content > #item2").show();
}
});
})
</script>

iCheck js block my js search checkbox filtering (jQuery)

I use iCheck http://icheck.fronteed.com/ on my project
but it block my js code. Here is the code:
1) list of checkboxes
<div class="list_box">
<dl>
<dt><span>FORM-FACTOR</span></dt>
<dd>
<ul>
<li><label><input class="chk_all" type="checkbox" name="cateChk_0_all" value="all" checked="">Select All</label></li>
<li class=""><label><input type="checkbox" value="AAA" name="cateChk_0_arr" checked="" >AAA</label></li>
<li class=""><label><input type="checkbox" value="BBB" name="cateChk_0_arr" checked="" >BBB</label></li>
<li class=""><label class=""><input type="checkbox" value="CCC" name="cateChk_0_arr" checked="" >CCC</label></li>
</ul>
</dd>
</dl>
<dl>
<dt><span>TYPES</span></dt>
<dd>
<ul>
<li><label><input class="chk_all" type="checkbox" name="cateChk_1_all" value="t_all" checked="">Select All</label></li>
<li class=""><label><input type="checkbox" value="type_1" name="cateChk_1_arr" checked="" >type_1</label></li>
<li class=""><label><input type="checkbox" value="type_2" name="cateChk_1_arr" checked="" >type_2</label></li>
<li class=""><label class=""><input type="checkbox" value="type_3" name="cateChk_0_arr" checked="" >type_3</label></li>
</ul>
</dd>
</dl>
<div class="btn_search"> Search</div>
</div>
2) and list of products:
<ul class="thumb_list">
<li class="thumb_1 flower" data-category="AAA TYPE_1 ">
<a href="www.link_1.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#1 </span>
<span class="title1">Product#1 description </span>
</div>
</div>
</a>
</li>
<li class="thumb_2 flower" data-category="BBB TYPE_2 ">
<a href="www.link_2.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#2 </span>
<span class="title1">Product#2 description </span>
</div>
</div>
</a>
</li>
<li class="thumb_3 flower" data-category="CCC TYPE_3 ">
<a href="www.link_3.com">
<div class="txt_box">
<div class="p_info">
<span class="p_number"> Product#3 </span>
<span class="title1">Product#3 description </span>
</div>
</div>
</a>
</li>
</ul>
This script works without iChek.js, but not works with.
<script>
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];}
selectedFilters[this.name].push(this.value);});
var $filteredResults = $('.flower');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;}
});
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
});
</script>
So I need to show only checked products by FORM-FACTOR or TYPES filtering (using cklick the button "Search")
Could you help me please to work it using iCheck?

Bootstrap navpanel and date picker with javascript call to C# controller

I have a some code that allows a user to enter a data into a bootstrap datepicker and then click the submit button and date is shown inside a navpanel. On button click I have a javascript function that will determine which tab the user is on, and will run a C# function in an MVC controller. I currently have two functions DelayedSpiffDate, InstantSpiffDate. For some reason it will only load the DelayedSpiffDate function even if the instantspiff tab is selected. I'm not sure what I'm doing wrong? Here's my html:
<div class="row-fluid 1">
<div class="col-lg-12 delayed_spiff_body">
<div class="row spiff-datepicksection">
<div class="col-lg-6 pull-right">
<div class="col-sm-5 col-lg-offset-4">
<div class="form-group">
<div class="input-group date">
<input type="text" id="startDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3">
<input class="spiffdate-btn" type="button" value="Submit" />
</div>
</div>
</div>
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
And here's my javascript:
$(".spiffdate-btn").click(function(){
var correctid = $(".tab-content .active").attr("id");
var startDate = $("#startDate").val();
if (correctid == "delayedspiff")
$.get("#Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
else
$.get("#Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
});
Updated javascript:
$(".spiffdate-btn").click(function(){
var correctId = $("ul.spiff_tabs li.active a").attr('data-id');
console.log(correctId);
var startDate = $("#startDate").val();
if (correctId == "delayedspiff")
{
$.get("#Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
} else if (correctId == "instantspiff") {
$.get("#Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
}
});

You are targeting the wrong item if you want it based on the clicked tab... Try this as your 'getter':
var correctId = $("ul.spiff_tabs li.active a").attr('data-id');

Change your code in this point, your second param in FormGet is wrong, change it from delayedspiff to instantspiff:
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>

How to call function more than once?

I have this code I am trying to implement that calls a function
<body>
<nav id="menu">
<div id="app">
<ul class="List">
<li><span>Enter Number below</span></li>
<div id="coachid">
<input type="text" name="coachid" id="textbox1" value="22984">
</div>
<li><span>Fitness Programs</span>
<ul id="programs">
<li class="Label"> </li>
<li><span>10-Minute Trainer</span>
<ul id="10min">
<li class="Label"> </li>
<li><span>Base</span>
<ul id="10minBase">
<li class="Label"> </li>
<label for="basic">Text Input:</label>
<input type="hidden" name="basic" id="basic" value="10MinTrainer"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="10min">
<li class="Label"> </li>
<input type="hidden" name="basic1" id="basic1" value="TMT"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="Deluxe">
<li class="Label"> </li><input type="hidden" name="basic3" id="basic3" value="TMTUpgrade"/>
<button id="getWebSite">Open Website</button><br/>
<ul>
</li>
</ul>
</li>
</li>
<ul>
</li>
</ul>
</div>
</nav>
</body>
and here is the function
$(function() {
$('#getWebSite').unbind().click(function(){
goUrl = 'http://www.example.com/' + $("#basic").val() + '?referringRepId=' + $("#textbox1").val();
window.location = goUrl;
});
});
I am trying to call the function multiple times throughout the code to redirect the button to a site based on info held within the html. Is this possible?

You need to name your function, apply a class to those elements that should have the click handler, and create the click function:
<button class="myClass">
$(function () {
function doSomething() {
goUrl = 'http://www.example.com/'
+ $("#basic").val()
+ '?referringRepId='
+ $("#textbox1").val();
window.location = goUrl;
}
$('.myClass').unbind().click(function () {
doSomething();
});
});

Develop Reference

JavaScript is the programming language of the Web.

Moving items from one listbox to another listbox through jquery - javascript

Adding id="GridFieldsWrap" on the form level helps you to get the checkbox property checked. In List options if you want, checkbox property checked, please try to add one level above the id property and check there if checkbox property appears.

Related

Checkboxes and Tabs (Code almost complete)

Jquery Append :checked Selector

iCheck js block my js search checkbox filtering (jQuery)

Bootstrap navpanel and date picker with javascript call to C# controller

How to call function more than once?

Categories

Resources