My tag is a single-choice pulldown, the default behavior for a tag. I have three values in it, "No", "Yes", "All". I am trying to change the selected programmatically, as I have done a thousand times before, with the following code (I'm using JQuery 1.9.1):
$('#select').children(':selected').removeAttr('selected');
$('#select').children('option[value="yes"]').attr('selected', 'selected');
$('#select').children(':selected');
I don't even know how this is possible, but somehow, in Chrome 26.0.1410.65 running on 10.8.3, there will be two selected options. Only one of them will show in the UI, but the last line of code will return two elements.
This does work correctly in Firefox 16.0.2, so I am mystified. Does anyone know if this is a quirk of Chrome, or if this is correct behavior and it's just changed?
You can do this to select desired value
$('#select').val('yes');
Stop trying to manipulate properties using attribute methods! Older versions of jQuery let you do this, but newer ones won't.
$('#select').children(':selected').prop("selected",false);
$('#select').children('option[value="yes"]').prop("selected",true);
//$('#select').children(':selected');
Though .val() as pointed out by Mohammad Adil is a better way of handling this.
You should not use the selected attribute to change what option is selected. Instead, use the selectedIndex property of your dropdwn.
For instance, in your case you might want this:
document.getElementById('select').selectedIndex = 1;
Related
comboBox.trigger(´chosen:updated´) what does this do in Jquery?
Anyone can give an example?
I dont see any effect or utility.
I really search over 20 links over google and I cannot find the documentation.
---- correcions ----
´chosen:update´ to ´chosen:updated´
comboBox.trigger(´chosen:update´)
comboBox
You will have a variable that points to a jquery collection containing a select, likely setup using
let comboBox = $("#mySelect");
.trigger
Raises the named event
'chosen:update'
the name of the event to raise.
In this case, the event is namespaced, this just allows it to be specifically looked for in the chosen namespace. It could also be .trigger("updated") and chosen2 will likely pick it up - this stop other code such as .on("update".. from triggering.
It also appears to be a typo as the event (depending on the version of chosen2) should be updated.
All together, you call this code when you change the value of the underlying select, eg:
var comboBox = $("#mySelect");
comboBox.val("newValue");
comboBox.trigger(´chosen:update´)
when your select has been converted to a select2 combo box. Without which, the select2 UI would not be updated to match the new value.
NB: The event to trigger appears to change with each version of select2, it could be one of:
comboBox.trigger('chosen:updated');
comboBox.trigger('change');
I'm using this: $('form').dirtyForms(); from https://github.com/snikch/jquery.dirtyforms to check if my form is dirty. However, on my page I have some dropdown's that are simply used for filtering (they should not make my form "dirty"). Right now when I select any of these drop down's it causes my form to become dirty. Using jquery.dirtyforms (I read their docs but do not see how), how do I exclude selectors (dropdowns, textboxes, etc.) maybe via a class name so that they do not mark the form as dirty.
I tried various things like assigning these dropdowns / filters a class called ignoreDirty then in my jquery I did this:
$('form').dirtyForms().ignoreClass('ignoreDirty');
This produces an error, so I must be doing something wrong.
Note I've also tried setting it via property:
$('form').dirtyForms({ ignoreClass : "ignoreDirty" });
But this still makes my form dirty for any control whose class name is still ignoreDirty
Please note these filters cause postbacks but lets say I go to my form and have not made a single change. I start clicking on these filters and the minute they post back this happens:
What can one say, the plugin code makes almost no sense to me :D However to make it quickly work for ignoring select boxes, you could replace its onSelectionChange with following
Original function
var onSelectionChange = function() {
$(this).dirtyForms('setDirty');
}
New version
var onSelectionChange = function () {
//this is the new line. self explanatory
if ($(this).hasClass($.DirtyForms.ignoreClass)) return;
$(this).dirtyForms('setDirty');
}
After this you should rely on the original developer for a proper fix. I just posted this as an answer because of space in comments
There seems to be 2 different issues here.
First of all, you are attempting to set the ignoreClass to ignoredirty. ignoredirty is the default value, so there is no reason to set it. However, if you do need to set it to something else, you can do so using the syntax:
$.DirtyForms.ignoreClass = 'my-ignore-class';
Secondly, in version 1.0.0 the ignoreClass only worked on Hyperlinks. This behavior has been amended to work with input and selection elements in version 1.1.0.
In version 1.2.0, you can now also set the ignoreClass to parent container elements to ignore input or clicks from any element within.
I'm using typeahead.js for a typeahead.
I basically want to do the reverse of this: Programmatically triggering typeahead.js result display
I've tried to do a .trigger('blur'); on the typeahead, but I set the value right before that by doing .typeahead('setQuery', value);. Doing 'setQuery' fires off an ajax request to fetch results with the new query term. So the "blur" takes place, but the box is opened soon thereafter.
The proper way to do this, as of version 0.11:
$('.typeahead').typeahead('close');
Manual: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#jquerytypeaheadclose
Ref: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
$('.typeahead-input').typeahead('close');
Undocumented but there is way to set precondition and not allow dropdown to open:
$('.typeahead-input').on('typeahead:beforeopen', function() {
return false;
});
In case someone comes across this in the future, the best way to do this now is:
$('.tt-dropdown-menu').css('display', 'none')
If you open Chrome developer tools and watch what happens as you type and erase, this is all Typeahead is doing, nothing magical.
Besides, if you try with the current version (10.5) to set the query, you'll get an error that looks like this:
Uncaught TypeError: Cannot assign to read only property 'highlight' of
In my particular case the dedicated close method from typeahead API (typeahead.js#0.11.1) did not work. Maybe because of custom CSS or some bug in my code.
While the method described in the other answer of hiding the menu by setting the display property to none worked, I needed to set it then back to display:block to show it back for subsequent use. Plus it is not using the API.
Another better way for me was to clear the value of the input so the dropdown gets hidden:
$('.typeahead').typeahead('val', '');
or
$('#place_typeahead_control').typeahead('val', ''); in case you have multiple search controls on the page and you want to target a specific one.
You can trigger 'blur' in the "opened" event handler. If the drop down flickers for a moment, you can use CSS to hide it for the interim.
Instead of calling setQuery, add another function that doesnt do getSuggestions, and youll have a good time.
Am I under the wrong impression that jquery or JS can retrieve the values of radio buttons in a form? The reason i ask is because in my code the script i use to check for all fields in a form, does not seem to recognise the value in id="contact2" in the form, which is a radio group. I have posted my code at jsfiddle.net and would appreciate some feedback as to how I can correct this. Many thanks
Fiddle: http://jsfiddle.net/xGrb9/
You need to do it like this:
$('input:radio[name=bar]:checked').val();
Because of how radio buttons are checked/unchecked and their values are stored. (from the jQuery docs). You also need to make sure that the radio buttons have different IDs, which is a classic gotcha.
Finally, when testing if a radio button has not been selected at all, make sure to test against undefined and not an empty string for compatibility across browsers.
EDIT: looked at your code, and you need to do two things:
1. Change IDs of the buttons, to something like "contact2a" and "contact2b" so they are unique.
2. Change your var customer2 = line to var contact2=$("input[name=contact2]:checked").val();
Change this line:
var contact2=$("#contact2").val();
to:
var contact2=$('input[name="contact2"]:checked').val();
You need the checked because otherwise it finds both inputs.
Also, technically, all IDs should be unique, ie, not used on 2 elements on the page.
You should be able to use .val()
See this: http://api.jquery.com/val/
Both of your radio buttons have the same ID. That doesn't work in HTML. You'll have to refer to the buttons separately and select the one that is checked.
You can simply call
$("[name=contact2]:checked").val()
I have a select box and I need to both set the selected value and issue a change event with javascript.
In Firefox, the following works with no problem:
Y.one('#my_select_box').set('value', STEP_VALUES);
Y.one('#my_select_box').simulate('change');
No such luck in IE (IE7 in this case). The selected's value does not even change. I have tried using 'selectedIndex' instead of 'value' too.
Any ideas?
A reasonable answer is mySelect.query('option[value=foo]').set('selected', true);, however according this ticket it looks like the set('value', value) approach should work on the select tag itself, so I'm still unsure about that (I'm using YUI 3.1.1), so I'm still interested in any comments.
I didn't have success with the suggested answer, however I did have success with.
Y.one("#object").set("selectedIndex", 1);
Where 1 is the index to be selected.