Remove the selected item from a Kendo UI Multiselect Element - javascript

I got two Kendo ui multiselect elements on my page to select stores from a list. On the select event I have a function call where I check if the selected store is in another list.
If the selected item is already assigned to the other list i prompt a confirm. When the user click ok, then is ok, when clicks cancel i have to remove the selected item from the multiselect element.
Here is my function:
function checkStoreSelection(e) {
var selectedStore = this.dataSource.view()[e.item.index()];
var selectedStoreId = selectedStore.Id;
$.each(surveysData, function (index, surveyVal) {
// get each store
$.each(surveyVal.Stores, function (storesIndex, storesVal) {
// check if a store already assigned to another survey
if (selectedStoreId == storesVal.DBId) {
var answer = confirm('Some text here ... ');
if (answer) {
// nothing todo here
} else {
// have to remove the selected item
}
}
});
});
};

You can remove item from datasource dataSource.remove(item);
Check this example
http://jsfiddle.net/derickbailey/D4g8S/

Damn fool - Simple answer:
e.preventDefault();
Does what I need :-/
I´am sorry.

Related

How to get onclick event for jQuery Chosen drodpown listbox?

Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));

jquery clone with HTML drop down option two drop down select the same value an alert should select different value

Currently working on jquery clone where user click add it will clone the div perfectly but I have dropdown. If user select cellphone in drop down and in other dropdown if user select the same cellphone it should duplicate found and the dropdown value has to clear.
$('.slt_major select option:selected').each(function(i, e) {
alert("check");
//Check if values match AND if not default AND not match changed item to self
if ($(e).val() == cI.val() && $(e).val() != 0 && $(e).parent().index() != cI.index()) {
alert('Duplicate found!');
cI.val('0');
}
});
I was not able to see where the error was even the alert was not generating. Here is the fiddle link.
Thanks.
So here it is: DEMO
First I would like to correct your adding part since you were adding duplicate ids into internal elements of cloned row. So just change your code as below and check for inline comments.
$(document).on("click", ".btn_more", function () {
var $clone = $('.cloned-row:eq(0)').clone();
$clone.find('[id]').each(function(){
this.id=this.id +(count) //change the id of each element by adding count to it
});
$clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' value='Del' id='buttonless"+count+"'/>")
$clone.attr('id', "added"+(count)); //just append count here
$clone.find('.preferred').attr('checked', false);
$clone.find('.sslt_Field').val(0);
$clone.find('.txt_CC').val('');
$clone.find('.txt_Pno').val('');
$(this).parents('.em_pho').after($clone);
count++; //increment count at the end.
});
Now to check for duplicate options you can do it as below. Also check inline comments:
//attach event handler to document since you need event delegation on dynamically created elements
//attach change event to class 'sslt_Field'
$(document).on('change','select.sslt_Field',function(event) {
var cI = $(this); //store a reference
var others=$('select.sslt_Field').not(cI);
//store reference to other select elements except the selected one
$.each(others,function(){
//iterate through remaining selects
if($(cI).val()==$(this).val() && $(cI).val()!="")//check if value has been
//already selected on other select
{
$(cI).val('');//empty the value
alert('already selected');//display alert.
}
});
});

Related dropdown menu issue

I'm polishing up a bit of jquery I wrote that works on 2 dropdown boxes. Basically, when the first dropdown is changed, it filters the second dropdown to show only the applicable choices. If the first choice (value: "none|") is chosen in the first dropdown, it shows no choices in the second
It works great, most of the time. Here's the issue: If you select the first choice in the first dropdown, the second dropdown clears out. But if you then choose another option in the first dropdown, the second stays empty when it shouldn't.
I'd appreciate if you can help me figure this out. You can find the dropdown boxes here: http://goinspire.com/jwrp-hotel-registration/.
PS: If it makes a difference (but I think it doesn't), it's a WordPress site and the form is generated by GravityForms.
PS: here's the code:
tripFilter = function () {
var tripClass = '.hotel-trip select',
hotelClass = '.hotel-name select',
unusedClass = '.unused-options select';
jQuery(tripClass).change(function(){
//testFunc();
var tripSelect = jQuery(tripClass),
trip = tripSelect.val(),
hotelSelect = tripSelect.parents('form').find(hotelClass);
if (trip === "none|"){
jQuery(hotelClass+" > option").each(function() {
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
});
} else {
tripnum = trip.match(/JWRP (\d*)/)[1];
//var hotelChoices = [];
jQuery(unusedClass+" > option").each(function() {
jQuery(this).clone().appendTo(hotelClass);
jQuery(this).remove();
});
jQuery(hotelClass+" > option").each(function() {
hotelMatch = jQuery(this).val().match(/(\d*) /);
//console.log(hotelMatch);
if (hotelMatch === null || hotelMatch[1] != tripnum){
jQuery(this).clone().appendTo(unusedClass);
jQuery(this).remove();
//console.log("not a match!");
};
});
}
});
};
jQuery(document).ready(function () {
tripFilter();
});
jQuery(document).bind('gform_post_render', function(event, form_id){
if(form_id == 38) {
tripFilter();
}
});
If I have understood properly, first dropdowm guides second.
So, I think you might just add a listener on "change" event of first dropdown, to perform your function every time the value of first input goes through some change.
Try this way:
$(document).ready(function(){
$('#38').bind('change', tripFilter)
});

Enabling checkbox with different elements

Ok, I've been coding a website for a while now and this the first "insurmountable" problem I haven't found an aswer for, so now I'm turning to you, the experts.
On my form I have three drop-down menus, one textbox and one disabled checkbox. I want it to work so that when a user has selected an option from each drop-down menu and written something on the textbox, the checkbox becomes enabled.
I have found this code when I have been looking for a solution and it's very similar to my problem. However, when I try to add another drop-down menu, it still enables the button when I select an option from the first menu and completely ignores the second menu. I'm sorry, I'm new to Jquery/JavaScript and I just think it should work that way when the class names are same on both menus (jQuery class selector: ('.dropdown')).
I have also found a similar code with textboxes. I just don't know how to combine these codes so it would act the way I want.
See it here: http://jsfiddle.net/JKmkL/109/
$(document).ready(function() {
$('.required').change(function() {
var done=true;
$('.required').each(function(){
if(!$(this).val()){
$('.myCheckBox').prop('disabled',true);
done=false;
return false;
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
});
And add class required to the elements.
Edit:
The code above assumes that the default <option> has value="". If not, you can use http://jsfiddle.net/JKmkL/114/
$(document).ready(function() {
$('.required').change(function() {
var done=true;
function quit(){
$('.myCheckBox').prop('disabled',true);
done=false;
return false;
}
$('.required.dropdown').each(function(){
if($(this).children(':selected').hasClass("disablenext")){
return quit();
}
});
$('.required[type=text]').each(function(){
if(!$(this).val()){
return quit();
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
});
Edit 2:
If you want to show a div when the checkbox is checked and hide it when the checkbox is disabled, use
JavaScript:
$(document).ready(function() {
$('.required').change(function() {
var done=true;
function quit(){
$('.myCheckBox').prop('disabled',true).removeAttr('checked');
done=false;
$('#div2').addClass('hide');
return false;
}
$('.required.dropdown').each(function(){
if($(this).children(':selected').hasClass("disablenext")){
return quit();
}
});
$('.required[type=text]').each(function(){
if(!$(this).val()){
return quit();
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
$('.myCheckBox').click(function(){
$('#div2')[(this.checked?'remove':'add')+'Class']('hide');
});
});
CSS:
.hide{display:none}
See it here: http://jsfiddle.net/JKmkL/133/
I assume that dropdown's default value is value=""
$('#form_submit_button').click(function(){
$('.checkbox').attr('disabled',true);
var all_selected = true;
$('.dropdown').each(function(){
if(!$(this).val())
{
all_selected = false;
}
});
if(!$('#text_box').text())
{
all_selected = false;
}
if(all_selected)
{
$('.checkbox').attr('disabled',false);
}
});
First of all, say the id for the three dropdowns are called d1, d2, and d3; textbox is txt; and checkbox is chk. You can then define a function that determines when the checkbox must be enabled:
function shouldEnableCheckbox() {
var nonEmptyFields = $("#d1,#d2,#d3,#txt").filter(function() {
return this.value;
});
return nonEmptyFields.length == 4;
}
Essentially, you select all 4 elements, filter those that are non-empty, and compare the resulting filtered array with 4. If it is true, it means you should enable the checkbox.
Then, assign the change event handler to all 4 elements, invoke the previous function, and assign the result to the disabled property of the checkbox:
$("#d1,#d2,#d3,#txt").change(function() {
$("#chk").prop("disabled", !shouldEnableCheckbox());
});​
Here's the working DEMO, and another working, more generic DEMO, which uses a class instead of ids to identify the required elements.

Getting all selected val()'s from a multiselect container per it's own click:event?

Per the following multiselect I need to grab the selected values that are selected from many multidropdowns on one page. I have a generic event handler setup where if a selection is clicked on any of the multiselect on the page it fires a common event. Two problems/questions:
1) How can I tell what muliselect (#Name) the event came from?
2) How can I grab the .val()'s from the multiselect click function if the event is from the same container?
// generic event for all multiselect
$("select").multiselect({
click: function (event, ui) {
// 1 - What multiselect container?
// 2- Get the list of selected values
var vals = $('#CNames').val(); // This doesn't work if the event was fired from #CNames..null.
var vals = $('#CAreas').val(); // This works if the event came from #CNames.
You can probably get the id of the select that was clicked with
var name = $(this).attr('id');
and the values of all the selects with
var values = [];
$('select').each(function() {
$.merge(values, $(this).val());
});
or the current select with
var values = $(this).val();
The code from aliz should work. Try binding them all the way the documentation shows:
$("select").bind("multiselectclick", function(event, ui){
var values = [];
$('select').each(function() {
$.merge(values, $(this).val());
}
alert(values);
});

Categories