Jsfiddle is here.
I have a text box and as the user type keys in the box, the multiple select box must refresh its options.
On input change, I am using this code to refresh select options,
$("select").empty()
filteredOpts.map(function(val){
$("select").append("<option name={0} value={0}>{0}</option>".format(val))
})
But, the view is not getting refreshed with new set of options.
When i move to some screen, (for example, pressing ctrl + shift + c to open chrome console) the view gets refreshed. Same behavior is seen in firefox too where the select box doesn't show the filtered options, but when i go to firebug console and come back, the select box has refreshed its options.
It's because you're only handling the Change event and not the Input event like you say you are. The Change event only fires after the element is blurred.
Change:
$("body").on("change", "#pattern", textChange)
To:
$("body").on("input change", "#pattern", textChange)
(You can probably drop the Change event altogether from that, too).
Working JSFiddle demo.
change event will be fired when you focus out of the text box.use keyup event instead change try this $("body").on("keyup", "#pattern", textChange) .
Related
Using jQuery or something similar, is it possible to detect when a user has clicked away, effectively removed focus, from a form field in iOS? I have conventional form which has a first name, last name, address line 1, address line 2 etc.
On an iPad when you select a form field the only way to leave that form field is to select another field in the form by clicking it or by hitting the Previous or Next buttons in the keyboard pane.
As the keyboard pane is shown clicks to other non-input elements on the page are ignored, so focus remains on the form field.
Is there a way with jQuery/JavaScript (or anything else) to force the focus to leave the form field if I click away from it by clicking a non-input form element?
Here's an example of what I mean. In the screen below, when the focus is on the Line 1 element I can't move out of it by clicking a non-input element.
Try just doing a quick blur() on the form, that might work.
$('body').on('click', function () {
$('form').blur();
// And since you said selecting an anchor might help, potentially doing a:
$('a#whatever').blur(); // might do the trick too
});
Hi I am using a dojo select, I have a text box where a certain ID is entered and then based on what is chosen on the select box an action is performed. Now the problem is, suppose over two different requests the action remains the same and the id changes I cant trigger the function with the onChange event. How do i handle this? Even if the user opens the select box and chooses the same item as last time I want the function i've written to be called.
onchange fires when any option is changed of the combo box.In your case you are not changing the options so obviously that event will not fired.
You can try onclick instead.
Write the same code in onclick for the select element (however with some intelligent logic since onclick will keep on firing even before you are able to select any option which may not expected in your case..!).
I have a "select" input that is programmed to open up a modal box when clicked to get some information before proceeding. That part all works great.
The problem is that once the modal box is up, the select dropdown options are all still visible. I want that select input to go back to being a normal, not clicked on at all, select box.
What javascript or jquery code can I use to make that select dropdown clear away?
I think it is more correct to move handler from click to change. In this case select will be close and keyboard changes also will be processed
Try using this instead:
$('#mySelect').focus(function(event){
event.preventDefault();
// code here
});
If that does't work, try using the preventDefault() with the click event.
The focus will at least allows users navigating fields with the keyboard (tab, etc) instead of the mouse.
Prior to jQuery 1.6
$('#mySelectBox :selected').attr('selected', '');
jQuery 1.6 and higher
$('#mySelectBox :selected').removeProp('selected', '');
I'm not sure that you can do it with standard select tag. Maybe because it still has focus. What I did when I needed a customized select tag is to avoid the select tag completely and use a button which graphically looks like the select button. Look at this page - look at the TAX button and the button to the left of it. There is no select tag, but it works great.
I have a select box which changes the form below via ajax. If someone changes the form, clicks the back button then clicks the forward button the form changes are reset but the select box still shows the same value.
How do I either do a hard page refresh or make the select box retain its default selected value?
You probably have an onchange event handler on your select element. Trigger that same event handler onload (or on document ready) of the document.
Reset the select box based on the value in the address bar.
Just reset the state of the check box every time the desired address is in the address bar.
After detecting a change in the browser's address, you can use some simple jQuery for example:
if (address === 'foobar.com/whatever') {
$('input[name=foo]').attr('checked', false);
}
The above code will simply uncheck the checkbox if it's checked. Do this check as soon as you detect that you are back at the address you are referring to.
I'm making an intranet application and experimenting with the Jeditable plugin for jQuery. The following function makes an element (in this case a td element) clickable, which then turns it editable (again in this case selectable, as it's a select box) and checks a key listener to see if tab or shift-tab has been pressed to activate the next or previous editable area.
$('.editBool').editable(function(value, settings){
// show and hide clickable links. shouldn't be important to problem,
// but i don't know at this point
$(this).parent().find('a.editbutton').hide();
$(this).parent().find('a.savebutton').show();
$(this).parent().addClass('notSaved');
// sets a warning if they leave the page without saving edited data
window.onbeforeunload = savePage;
// needed for editable to work (apparently).
return(value);
}, {
data : "{'Yes':'Yes','No':'No'}",
type : 'select',
onblur : 'submit',
callback : function(value, settings) {
// kp is the keypress, sp is a bool checking for the shift key
if (kp == 9){if (sp){$(this).prev().click();}else{$(this).next().click();}kp = null;}
}
});
If I tab through the Jeditable boxes with code like this, I have no problems, until I move the mouse in Internet Explorer (7 and 8). If the currently selected element is a select box (using the code above), when the mouse moves, the select box loses focus and triggers the onblur event. If the mouse doesn't move, focus stays with the select box.
If I use the cursors to try to select another value, focus is lost as well, and again the onblur event is triggered.
This does not happen with any other kind of element I've set as Jeditable (textarea, autogrow textarea, masked text), just on selects, and only in IE 7-8 (maybe 6 as well, but I don't care about 6 anymore). It works as I expect it to work in FF3, Chrome 4+, Opera 10 (focus stays on select box when mouse moves and options can be selected by keyboard arrow commands).
Does anyone have any ideas about why this might be happening?
Thanks.
Clarification time: This bug only happens when using a next() function to go from a jeditable enabled td set to change to text, textedit or autogrow on click, to a jeditable enabled td set to a select box. It doesn't happen when going from text to text, or select to text.
More detail time: The bug is happening when the focus() is called in the jeditable jQuery plugin, line 253:
$(':input:visible:enabled:first', form).focus();
It seems if the mouse is moved after this line, it causes the select box to lose focus. This is driving me nuts, and as I want to solve this one, I've been attacking it every which way I can. I came across a curious oddity by swapping the previous line for this one:
setTimeout(function() { $(':input:visible:enabled:first', form).focus();}, 1000);
During the second between the select box being created and the focus set, if the mouse moves, focus is not lost once set. If the mouse does not move before focus is set, when it does move, focus is lost. This appears to be total fruit and nuttiness. I've been googleing the hell out of this issue, and can't find a solution. Any help would be very much appreciated.
Thanks,