Develop Reference

Moving items from one listbox to another listbox through jquery

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.

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>

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>

Open dropdown on hover using jquery

I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.
<div class="ms-parent form-control">
<button type="button">
<span class="placeholder">Choose Anyone</span>
</button>
<div class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.

$(document).ready(function(){
$('#btnToChoose').hover(
function () {
$('#content').show();
},
function () {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
<button type="button" name="btnToChoose" id="btnToChoose">
<span class="placeholder">Choose Anyone</span>
</button>
<div id='content' class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
Change Design as per your convenience.

$('#btnToChoose')
.on('mouseenter', function () { $('#content').show(); })
.on('mouseleave', function () { $('#content').hide(); });

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