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.
Related
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.
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;
Using jQuery 1.7.1, I have noticed that the value attribute/property of a text input field does not update when I view it in Firebug's Inspect Element tool, but does update on the screen, i.e. in the actual visible text box.
For example, when changing the value of a text with the following (used inline):
jQuery(function() {
jQuery('#event').val("test");
});
the text box itself displays test but Firebug's Inspect Element does not represent the change:
<input type="text" value="" placeholder="" id="event" name="event" class="input-text">
I'm sure I have seen the value change in Firebug before using older jQuery, however not in this scenario, nor that of a colleague of mine also using jQuery 1.7.1.
Is this a quirk/bug of this particular version of jQuery or have I missed a step somewhere?
The value attribute always shows the defaultValue. Firebug never displayed the current value in the attribute.
The current value is always visible on the screen.
This has nothing to do with Firebug or jQuery, it is the HTML standard.
The attribute value never changes, only the property.
http://jsfiddle.net/cc5Pm/1/
var input = document.getElementsByTagName("input")[0];
setInterval(function(){
input.value = parseInt(input.value) + 1;
console.log(input.value, input.getAttribute("value"));
},1000);
Sometimes Firebug doesn't always reflect some changes, I have noticed this before.
If there is a refresh I haven't found it. You can either turn Firebug off and on again or just use the console to check the value has changed
console.log($("#event").val());
I've seen this too: i.e the value attribute of an input does NOT change in Firebug. Last time I paid attention to this was a while ago (like 2 years). Incidentally, I was using jQuery too, but I really doubt jQuery has anything to do with this. It's just how Firebug works (or at least worked).
Of course, you could still use the Firebug console to definitively get the value:
console.log( $('input#event').val() )
My PHP code looks as such:
<a id='next_page' HREF='#' onclick=\"javascript:document.getElementById('page_to_show').value='" . ($page + 1) . "'; return false;\" rel='facebox'>[Next $display_per_page]</a>
As you can see, I am using document.getElementById('page_to_show').value to set the value of the hidden field "page_to_show". I have also tried setting the value of a regular text input field, and I've encountered the same error. I've also tried .Value instead of .value - no luck. This code works in IE8 and FF 3.6.17. Why not IE9? It is sound code, correct? Thank you!
Oh, I've also tried jQuery's method of $("#page_to_show").val("Page Num"); and although it hasn't thrown a Javascript error,it doesn't change anything.
I've also tried a temp fix of adding "" however that didn't work either!
Here's something weird for ya. It wasn't the code. That error was from earlier code, not my updated code. For whatever reason, IE9 isn't refreshing my PHP code! Even if I shift-click refresh, it doesn't refresh my code. I had to exit the browser and open it again for it to refresh. Perhaps thats a setting. Thank you guys! That explains why it was so weird that it wasn't working!
Are you certain that your input has an id and not just a name attribute?
Additionally, I've seen IE get sticky when trying to set the value of input fields that exist outside of a <form>.