In my form contains textbox and button. I am doing some operation in textbox (blur) event and button (click) event.
Let's assume:
user enter some text in textbox and click the button. (blur) event invoked but (click) event not invoking.
note : "at the time of clicking the button focus should be in textbox."
example: https://stackblitz.com/edit/angular-b4h9pi
blur event alert is coming but click event alert not coming.
Scenario
In onblur event I make the service call to save that field value. In onClick event I have to save all the fields data. If cursor focus one of the textbox then user click the save button. First I have save the field after finishing the first call, make the second call to save all the data. Do not call the service parallel. I want to call one by one.
Remove alert with console.log or other relevant code. alert will be triggered as as soon as focus is lost from the input even before the button is clicked. So two event is not firing simultaneously
stackblitz
Both events are indeed firing. You can confirm by changing your alert calls to console.log. I believe the browser is likely just blocking multiple alert dialogs.
Update to answer your comment:
You say you want them to fire simultaneously and then you say you don’t so I’m having trouble understanding your needs.
I can tell you this though. The blur event fires, then the click event fires. You should be able to handle whatever you need to in those handlers with that knowledge.
If you need to wait for your blur handler to come back with a response before sending that data along with your click handler, you could theoretically set a variable like
this.blurRequestLoading=true
That way, instead of firing the click request, if blurRequestLoading is true, you could set a this.clickEventPendingBlurResponse=true.
Then when the blurResponse comes back, you can set blurRequestLoading back to false, and if clickEventPendingBlurResponse is true, fire the clickEvent manually within the response handler, and set clickEventPendingBlurResponse back to false.
Hi thanks for your time and effort, i did one logic to sequence the event, please suggest me is this code in production level.
sample code base: https://stackblitz.com/edit/angular-czxn9o
Related
Does the form create something similar to an event listener for all submit buttons or does each submit button trigger the form?
For context, I am making a site that has 100+ photos. They all have an event listener that calls the same function on click (with different data). I wonder if it would be more efficient to wrap each photo in a submit button, and put all buttons in a form with an event listener that triggers on submit.
I'm guessing the button approach would be more efficient because it only uses one event listener, whereas the first approach would require the photos to attend to all actions all the time. But I wanted to double check that the form won't attend to all 100+ buttons in some way that's similar to event listeners, and thus making the button approach as (in)efficient as the first approach.
Each submit button triggers (sends) the form, so you'd just be creating extra work if you wrapped each photo in a submit button. You'd still need to create an event listener, as well as cancel the default submit action. Multiple submit buttons is also not recommended for accessibility (it can cause problems for keyboard users).
Adding a single event listener to a container element is best, as described in the comment by #tangentially-perpendicular.
I have a html5 date control with a min/max contraint as below.
<input class="testclass" type="date" min="2020-02-01" max="2020-03-01"/>
The control can sometimes be loaded via ajax and there may be occasions when there are multiple of these controls on a form. I intend to catch the invalid state on submit so I can display the error in a way which is more coherent with the rest of the error messages in the forms.
The above works perfectly if I directly wire up the event listener to the specific control. However as it can be loaded by ajax, can appear multiple times, and I don't know the id's in advance; I really want to wire it up at the document level using something akin to the following:
$(document).on("invalid", ".testclass", function (evt) {
//Do stuff
});
But when invalid this does not get hit (it is invalid and the default message shows etc). However the input event, if wired up the same way is hit as expected. I just can't see what I'm doing wrong. I've included a fiddle for anyone who wants to see it.
https://jsfiddle.net/thnderchild/dzm1sgvc/13/
Okay, so the answer I finally found was that the invalid event simply doesn't bubble, so a global event handler never receives the event.
I was under the impression all events bubbled up.
Which jQuery events do not bubble?
So if we use this as a control which is added to the dom via ajax - we have to bind/rebind the event.
I have a data entry form and have code in the 'Lost Focus" event in each one of them. But I also have other buttons that are not tab stop. Example-Clear button, Check Input Button,and Exit Data Entry button as well as an Update Button ( I save all the entry in an access table then do a mass update to SQL Server, why I do that is a function of the requirement). But, if I click one of the buttons the lost focus event takes place, and I have to click the button again for it's code to run. Is there a way around this, where I click the button and it negates the Lost Focus event from the field where the cursor is located?
Thanks
jpl
I'm running into an issue with H5Validate where their events are being triggered after to the custom events I have implemented, effectively preventing my events from being triggered because they're based on the H5validate events.
The workaround I'm currently using is setting H5validate's trigger event to change or $('#form').h5Validate({ change: true }); while triggering my events on focusout.
Although this works, I'd prefer to find a method to allow my events to fire after H5validate's so I can use the keyup event for more of a 'live validation' feel and to ensure changes keep the button disabled prior to focusout thus allowing users to move forward, not see the server side validation pop.
It actually works occasionally. How can I ensure my events will trigger after h5validate's without doing something hacky like a setTimeout?
Your question is a bit confusing. Why do you need your own event handlers in the first place?
What are you trying to accomplish with them?
If you need to check the whole form, you can do so like this:
$form.bind('formValidated', function (event, data) {
// do stuff after whole form is validated
});
// trigger whole-form validation check
$form.h5Validate('allValid');
When is one called versus the other? Is there a situation were onChange would be called but onBlur would not be called?
The onBlur event is fired when you have moved away from an object without necessarily having changed its value.
The onChange event is only called when you have changed the value of the field and it loses focus.
You might want to take a look at quirksmode's intro to events. This is a great place to get info on what's going on in your browser when you interact with it. His book is good too.
onblur fires when a field loses focus, while onchange fires when that field's value changes. These events will not always occur in the same order, however.
In Firefox, tabbing out of a changed field will fire onchange then onblur, and it will normally do the same in IE. However, if you press the enter key instead of tab, in Firefox it will fire onblur then onchange, while IE will usually fire in the original order. However, I've seen cases where IE will also fire blur first, so be careful. You can't assume that either the onblur or the onchange will happen before the other one.
An example to make things concrete. If you have a selection thus:
<select onchange="" onblur="">
<option>....
</select>
the onblur() is called when you navigate away. The onchange() is called when you select a different option from the selection - i.e. you change what it's currently selected as.
In Firefox the onchange fires only when you tab or else click outside the input field. The same is true of Onblur. The difference is that onblur will fire whether you changed anything in the field or not. It is possible that ENTER will fire one or both of these, but you wouldn't know that if you disable the ENTER in your forms to prevent unexpected submits.
I think it's important to note here that onBlur() fires regardless.
This is a helpful thread but the only thing it doesn't clarify is that onBlur() will fire every single time.
onChange() will only fire when the value is changed.
onChange is when something within a field changes eg, you write something in a text input.
onBlur is when you take focus away from a field eg, you were writing in a text input and you have clicked off it.
So really they are almost the same thing but for onChange to behave the way onBlur does something in that input needs to change.
onBluris when your focus is no longer on the field in question.
The onblur property returns the onBlur event handler code, if any, that exists on the current element.
onChange is when the value of the field changes.