I am using Chosen Jquery, and I want to get the value that was deselected from the multi select list. Somehow I am not getting it. What I am doing wrong?
$("#teachingOptions").chosen().change(function (evt, params) {
if (params.selected) {
var value = $("#teachingOptions option:selected").val(); // This is working fine
alert(value)
return;}
else{
var value = $("#teachingOptions option:selected").val(); //Problem lies here, This Does not returns the correct value.
alert value;
return;
}
So when someone selects its working fine, but if someone deselects from the list of alreay selectd, it does not return the value, it says Undefined.
In fact when user deselects the value will be an empty string, so you need to store the previous value, and get it when it's deselected;
Note that $("#teachingOptions option:selected").val(); returns the same value of params.selected
var oldValue = $("#teachingOptions");
$("#teachingOptions").chosen().change(function (evt, params) {
var value = params.selected || ''; // if params.selected is empty use an empty string
if (!params.selected) { // deselected
// the value that was deselected is avaliable in oldValue variable
}
oldValue = value; // value changed, so update the stored value
alert (value);
}
Related
The goal is to list ALL the values for all the inputs on the page, but not list inputs that do not have values, two question:
$(":input").not("[id*=a_prefix_]").map(function()
{
var value = this.val();
if( value ) console.log(this.id + ":=" + value );
}
);
There is an issue with the this.val(), I get an error "Object doesn't support property or method 'val'", what is the solution?
How do I move the check to see if there is a value into the actual selection so that the map only gets inputs with values?
var valueArray = $(":input")
// filter these things out, whatever they are
.not("[id*=a_prefix_]")
// filter only the elements that have a value
.filter(function(){ return this.value.trim(); })
// map the values
.map(function(){ return {[this.id]: this.value}; })
// turn the results into a real array, not a jQuery object of the values
.get();
How to get last choosen option in multiple select?
$('#select').change(function(event) {
...
});
I do not need all values provided by val(), but LATEST choosen option which triggered change.
Thanks
I fear that you can't have it so easily, even with jQuery. But you can store the old values and compare with the current value.
var last = [];
$('#select').change(function(event) {
var val = $(this).val();
var newValues = val.filter(function(element)) {
// You may need a more specific test for your values
return last.indexOf(element) == -1;
});
// newValues are the new selected options in the select
last = val;
});
But WARNING : If the user cancel an option, the change event is triggered too. And newValues will be empty (because there's no new values, only a missing value).
How can I verify all the items listed in a combo box? Like for example I want to check if a combo box have "item1" "item2" "item3". How do I output all options out and check?
Here's how to excess the combobox:
Ext.ComponentQuery.query('combobox[name=boxname]')[0];
Just access the store of your box and interrogate it. For example:
var store = Ext.ComponentQuery.query('combobox[name=boxname]')[0].getStore();
console.log(store.getById('item1'));
If item1 is not there the result will be null.
UPDATE:
Based on conditions lets say, I want to be able to validate the combo
box that it only has "item1" and "item2", not any more or any less.
Given that say the variable target contains what you want in your combo, you can verify your combo this way:
var target = ['item1', 'item2'],
combo = Ext.ComponentQuery.query('combobox[name=boxname]')[0],
check = function(combo, target) {
var store = combo.getStore();
if (target.length !== store.getTotalCount()) {
return false;
}
var result = true;
store.each(function(item){
if (!Ext.Array.contains(target, item.getId())) {
result = false;
return false;
}
});
return result;
};
console.log(check(combo, target));
The method check will return true if the combo contains what you want, or false otherwise.
var store = Ext.ComponentQuery.query('combobox[name=boxname]')[0].getStore();
store.each(function(record){
var name = rec.get('name');// instead of name use the attribute you want to use for the validation
if(name === 'code4jhon'){
console.log('this dudes name is code4jhon')
}
});
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Store-method-each
I have 3 groups of radiobuttons, all of them properly named. On submit() I want to check if user selected option from each of groups.
I do that that way:
$('.form').submit(function(){
var selectedUser = $('input[name="selectedUser"]').val();
var searchType = $('input[name="shareType"]').val();
var selectedSearch = $('input[name="selectedSearch"]').val();
console.log(selectedUser, searchType, selectedSearch);
return false; //for testing purposes
});
The problem is that each of three variables return not null values even if none of radiobuttons is selected.
Fact that might be important: each of groups contains more than 1 radiobutton, each radiobutton has distinct value.
You need to test if the radio is selected, you can do this using the :checked pseudo-selector:
var selectedUser = $('input[name="selectedUser"]:checked').val();
var searchType = $('input[name="shareType"]:checked').val();
var selectedSearch = $('input[name="selectedSearch"]:checked').val();
if(selectedUser || searchType || selectedSearch) {
// At least one selected
}
else {
// None selected
return false;
}
Here is a fiddle which demonstrates.
I have created a modal plugin that has options defined by default or the user.
The majority of these values will be passed to a function and updated, when this happens, I want the value to be updated in the options. Ideally I don't want to have to update each individual one, and want to handle and update the object (options) as a whole.
the following is the users options:
modalDialog({
ID: 'before_unload',
title: 'opt.heading',
message: 'opt.text',
confirm: 'opt.confirm',
cancel: 'opt.cancel',
link: $(this).attr('href'),
});
Each of the options beginning with 'opt.' will have the function performed on them.
Here is the code for the modalDialog plugin that deals with the options
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var reg = '^opt.*'; //regex to find all 'opt.' values
console.log(o);
$.each(o, function(i, v) { //for each value
if(i != 'save'){
if(v.match(reg)){ // match to regex
console.log(i+': '+v);
var newval = rc.getResource(v); // function to update value
console.log(newval); //value has been updated, function works
v = i.replace(i, newval); // update the index with new value
console.log('New i:v = '+i+': '+v); // checked and it works
//Now the question is, how do I update o (options with the new values?)
}
};
});
In the code above, lets pretend that rc.getResource(v) come back with a different farm animal name depending on which value gets passed to it, I update the value with my new farm animal name, and check that it all matches up and everything is working up until I get to updating the options. I have tried o = options.replace(i,v) and it come back with options.replace is not a function.
One thought I did have was after I have created a new value (performed my function) unset/delete the corresponding i:v and add the new value to the object, e.g.
i1 = i;
v1 = i.replace(i, newval);
o -= i:v;
o += i1:iv;
Alas, my brain is frazzled and am in desperate need of help, which would be greatly appreciated!
Can't you just do this?:
o[i] = v;