Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.
How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.
In addition to Ender the full code could be something like this.
$('#mySelectBox').change(function() {
$('#thingToBlur').blur();
})
Reference: http://api.jquery.com/blur/
This will find the element with the focus and trigger the blur event.
function blur(){
document.querySelectorAll('input,textarea').forEach(function(element){
if(element === document.activeElement) {
return element.blur();
}
});
}
Using jQuery do:
$('#mySelectBox').change(function() {
//do things here
});
According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.
Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/
You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.
Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.
Related
So, I have a simple question and I actually already wrote it in the title. :) But I will repeat it one more time, just to be completely clear. And the questions is:
Is there a way to know if "blur" was called by "element.blur()" or if it was "actual" blur? By saying "actual" I mean, clicking on some random area to make input lose focus, or by clicking TAB. :)
Of course. You should attach the blur event to the specific element you want.
An example would be:
<input id="myInput" type="text" />
function handleBlur(event){
console.log(event.target); // outputs: <input id="myInput" type="text">
}
document.getElementById('myInput').addEventListener('blur', handleBlur);
This function will only be called when blur event occurs for that input only. Nevertheless, you could use event.target to see the element that triggered the blur event.
EDIT:
Tested only on Chrome, but the following achieves what you are requesting.
<input id="myInput" type="text" />
function handleBlur(event){
if(event.sourceCapabilities !== null){
console.log('blur by user');
}
else{
console.log('blur programmatically')
}
}
var elem = document.getElementById('myInput');
elem.addEventListener('blur', handleBlur);
elem.focus();
elem.blur();
Try it online on jsfiddle.
Since each browser handles event differently though, my suggestion is to trigger a different, custom event to handle this case.
ooooo there's 2 different types of blur, one is an event called blur or onBlur for jQuery users which is for 'out of focus' basically the user clicks it and then clicks somewhere else. That's onBlur. Another is blur the CSS filter value for the filter property.
So! There's a few ways to see if an element is 'out of focus' one is like this:
var blur = true;//we start off not focused
element.addEventListener('blur', function() {
blur = true;
});
element.addEventListener('focus', function() {
blur = false;
});
So basically the above is "If it's not focused we are blured, if we are out of focus we blur". (Feel I'm making this more complicated to understand?). Try using element.blur() and element.focus() in the console and see what happens!
Another method is simply to check that the active element (focused element) is not your element.
document.getActiveElement.id !== element.
In jQuery there is a :focus prop you can use in the selector like so $('element:focus') which is also handy for :checked to get a checked radio button $('input[type="radio"]:checked')
Unfortunately though I don't think there's a way to see if another tab has been click. There probably is a way but in my experience, I had previously made a JS clock which I added to the title which appears as the tab's name. It didn't update when the tab was not opened so I think there's probably some more voodoo to look at to run your JS when the page is not in focus
I am trying to simulate an onclick event on a drop down.
I have an IE object that is going to a page and I need to change a dropdown which has an onchange event:
$('select[name="blah"]').val(3).trigger('change');
$('select[name="blah"]').change(function(){
alert('changed');
});
When I try this, I would expect the alert to fire as it's technically an onchange.
http://jsfiddle.net/3y5hmyf0/
Is there a way to acomplish this?
More Details
My tool is controlling another IE page through an object. It navigates to the page and finds the select drop down on the page. From there, if you did it manually it has an onchange event when making a selection.
I am trying to get jQuery to simulate as if it was being clicked by a person to it triggers that on change event.
I have tried .trigger and .change and couldnt get either of them to work.
The only reason your code does not work is the order you are executing it. You need to connect the handler before triggering it:
JSFiddle: http://jsfiddle.net/3y5hmyf0/1/
// Wire up event handler
$('select[name="blah"]').change(function(){
alert('changed');
});
// Now generate the event
$('select[name="blah"]').val(3).trigger('change');
Note: Your manual change trigger is still required as a change event must normally be triggered by user interaction. Setting the value is not enough.
$('select[name="blah"]').change(function(){
NotifyChanged();
});
function NotifyChanged() {
alert('changed');
}
If you want to test the logic in the changed function, just call it.
Before I click reset button I choose "Company" in Chosen (dropdown list). The event occurs normally after I click reset. I choose "Company" again but event change in dropdownlist doesn't occur.
Could anyone tell me how to trigger the change event for dropdownlist after clicking reset button and then the same element?
The code I have so far:
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
Code for the reset button:
$("#btn_reset").click(function() {
CKEDITOR.instances.ckeditor.setData('');
$('.mchosen').each(function() {
$(this).val('').trigger('liszt:updated');
$('#submenu').attr('disabled', 'disabled').html('');
$('#secondsubmenu').attr('disabled', 'disabled').html('');
$('#s-menu').removeClass('required').html('');
$('#secondsubmenu').removeClass('validate[required]');
$('#tabmenu').attr('disabled', 'disabled').html('');
$('#tab').removeClass('required').html('');
});
});
This is what i figured out:
$('#my-select').val(5).trigger("liszt:updated")
liszt:updated is no longer working in new version of chosen instead use below as Alexandru Cojan's answer suggesting
trigger("chosen:updated");
for newer version of chosen the event is "chosen:updated"
$(selector).trigger("chosen:updated")
If i need just to refresh value in chosen select - .trigger('chosen:updated') is enough. But if I have change handler and want it to be called - i need to do .trigger('chosen:updated').change()
I don't know if this is your case or not, but your code above should work,
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
but please notice that "change" event occurs on most browsers when you unfocus the select input
So when you click reset, just before executing the reset action the onchange is triggered.
Now try clicking outside the select input after changing the selection and see if it still works or not
Maybe you should try using .on, as your $('#mainMenu') may have changed somewhere (Can't say without an example). Try doing this:
$("body").on('change','#mainMenu',function(){
...
});
or any parent selector instead of "heavy" body
If I am not wrong to understand you then you want to trigger the event change after click on the reset button.
you can do this by simply adding one line to your code
//code
$("#btn_reset").click(function(){
// your code here
$("#mainMenu").trigger('change');
//you can write this as per your requirements ie. at start or end.
});
I have a div that when the page is loaded is set to display:none;. I can open it up using this simple code:
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'block'});
});
Once it's opened, I'd like the user to be able to close it so I tried using the .is(':visible') function and then wrapping my original code in an if statment but this time using display:none;
if($('.field-group-format-wrapper').is(':visible')){
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'none'});
});
}
This does not seem to work though and I am not getting any syntax errors that I know of.
I also tried this:
if ($('.field-group-format-wrapper').is(':visible'))
$(".field-group-format-toggler").click(function () {
$(".field-group-format-wrapper").css({'display':'none'});
});
... but that did not work either.
You can just use the toggle function:
$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").toggle();
});
This will show the '.field-group-format-wrapper' elements if they are currently hidden and hide them if they're currently visible.
FYI the reason your code snippet in your question wasn't working is because you're only checking the visibility of the elements on dom ready, rather than on each click - so the event handler to show the elements will never be attached.
I guess your function is only being called on page load at which time all divs are hidden.
Why not check the visibility in the click event handler?
$('.field-group-format-toggler').click(function(){
var $wrapper = $('.field-group-format-wrapper'); //Maybe $(this).parent()?
if($wrapper.is(':visible'))
$wrapper.hide();
else
$wrapper.show();
As already mentioned, you can use the toggle function to achieve what you want.
To add a bit of extra information, when attaching events like you're doing, you're actually using a subscription model.
Registering an event puts it in a queue of events subscribed to that handler. In this case, when you add the second event to change the CSS, you're adding an event, not overwriting the first one.
Whilst thing isn't actually causing your problem, it's worth being aware of.
I've got a lightbox textbox that is displayed using an AJAX call from an ASP.NET UpdatePanel. When the lightbox is displayed, I use the focus() method of a textbox that is in the lightbox to bring focus to the textbox right away.
When in Firefox, the text box gains focus with no problem. In IE, the text box does not gain focus unless I use
setTimeout(function(){txtBx.focus()}, 500);
to make the focus method fire slightly later, after the DOM element has been loaded I'm assuming.
The problem is, immediately above that line, I'm already checking to see if the element is null/undefined, so the object already should exist if it hits that line, it just won't allow itself to gain focus right away for some reason.
Obviously setting a timer to "fix" this problem isn't the best or most elegant way to solve this. I'd like to be able to do something like the following:
var txtBx = document.getElementById('txtBx');
if (txtPassword != null) {
txtPassword.focus();
while (txtPassword.focus === false) {
txtPassword.focus();
}
}
Is there any way to tell that a text box has focus so I could do something like above?
Or am I looking at this the wrong way?
Edit
To clarify, I'm not calling the code on page load. The script is at the top of the page, however it is inside of a function that is called when ASP.NET's Asynchronous postback is complete, not when the page loads.
Because this is displayed after an Ajax update, the DOM should already be loaded, so I'm assuming that jQuery's $(document).ready() event won't be helpful here.
Try putting the javascript that sets focus at the end of the page instead of the beginning or having it fire after the page loaded event. That will help ensure that the DOM is completely loaded before setting focus.
I've used FastInit for this. JQuery $(document).ready() would also work.
You can try this:
Use the endRequest event of the PageRequestManager. That event fires once an Ajax update has finished.
Focus the textbox in the event handler
Here is some sample code:
<script type="text/javascript">
function onRequestEnd()
{
var txtBx = $get('txtBx');
txtBx.focus();
}
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd);
</script>
To focus the textbox initially you can use the pageLoad function (shortcut to the load event of the Application client-side object):
<script type="text/javascript">
function pageLoad()
{
var txtBx = $get('txtBx');
txtBx.focus();
}
</script>
you could try something like this [IE Specific]. (untested)
theAjaxCreatedElement.onreadystatechange = function() {
if ( this.readyState != "complete" )
return;
this.focus();
};
Another way might be to change the background color of the element with onfocus, then retrieve it with js check if it is what it should be, if not: refocus the element.
It seems that IE does not update the DOM until after the script has finished running. Thus, a loop testing for focus will not allow the DOM to update. Using setTimeout is probably the only working solution.
Your example with .focus() is a well known example, see e.g. this answer.
Have you tried adding the autofocus="autofocus" attribute to the textbox element you are calling via Ajax?
Normally, when I need certain additional JavaScript functionality to run on dynamic content, I'll simply add that JavaScript to the content being called as well.
That JavaScript will also execute after it's added to the DOM. I don't see a point in writing JavaScript to your parent file and then "listening" for changes to the DOM. Like you mentioned, setTimeout() is more of a hack than anything else for something like this :)
There are several things in IE, that does the trick:
If focusing element has different z-index - you can quickly set z-index to that of currently focused element (possibly setting hidden attribute), set focus, and then set it back to original z-index.
Try to blur() currently focused element.
If element is 'shimmed' - focus the 'shim' element.