Change event blocks other event from triggering - javascript

I'm developing an app in SAP Fiori with form in it.
Input value change triggers event (change borrowed from sap.m.InputBase so event is triggered on focus change or by enter key press). Event provides user some info. There is also button that sends data to backend.
But there is a case when user changes input value and clicks send button without pressing enter nor changing focus before action.
What happens is change event is triggered but send event is blocked and not triggered at all. User clicks save again and now send event is triggered twice (which make duplicates).
Here's the demo of problem I'm facing:
jsfiddle:
https://jsfiddle.net/o2zLa534/1/
I expect that input change event will be triggered and:
1) nothing will happend and after clicking send only one send event will be triggered or
2) send event will be triggered right after change event has been complited.
I know what the problem is but I cannot find a way out.
Thanks for help.

The issue is with the alerts.
If you check your fiddle, modifying to something else, other than using an alert, it'll work normally as expected. This issue is due to the alert usage itself, you should not be using an alert in a ui5 application, no matter what to be honest.
https://jsfiddle.net/cbL9z6rh/6/
onInputChange: function(evt){
evt.getSource().setValue("testing");
},
onSubmit: function(){
alert("Submitted!");
},
If you now put anything into your input, and press the button "Send", you'll see that your input will be changed to "testing", and your submit alert will display.

Related

How to trigger 'submit' event before the 'blur' event is triggered?

I have a form which has an error message as shown in the example below:
http://codepen.io/anon/pen/dYWyEM?editors=101
Steps to reproduce the problem is as follows:
After opening the codepen link,
Focus in the input field
Press submit button
Since, blur event is triggered first, the error message is made hidden first, thus the position of the submit button is changed. Thus the click event is not registered at all and I need another click to submit the form.
Is there any way to send the submit event first?
Somehow I need to detect the target that triggers the blur event.
It seems that relatedTarget enables us to figure out the element that triggered the blur event. However, this does not work in Firefox.
Is there way to figure out the relatedTarget in all browsers?
If your intention is to perform field validation on blur, you still need a way to check to see if there are any validation errors on form submit, so that you avoid submitting the form while there are validation errors.
I'm therefore suggesting an alternative approach instead of a workaround/fix to your exact problem because I think the current model might be troublesome to begin with.
Why don't you perform all field validations on form submit instead of field blur and then prevent the submission when any of the fields have a validation error?
Based on what was told in this answer I came with this solutio. Listen to the mousedown event that triggers before blur and check if the user can submit the form based on if the error message is visible or not.
form.on('mousedown','input[type="submit"]', function(e) {
if(!errorMsg.hasClass("hidden")){
e.preventDefault();
alert("Can't submit until the error message is gone");
}
});
I have updated your CodePen.

Trigger field validation

I am trying to fill a website with the help of a greasemonkey script.
This website has some required fields and I can't submit the form when they are not filled in.
Now, I have the following problem:
I fill the required fields using jQuery's .val. When I now click the submit button - even manually with the mouse - then it says that some of the required fields are not filled in.
When I click in one of the affected fields with the mouse and then click the submit button again, it accepts the value and proceeds.
My question is:
How do I figure out which event the website listens to? Or:
How can I trigger the validation of the fields from my script?
Update: I tried the following command directly in Chrome's developer tools' console:
jQuery('#ext-comp-1080').click().focus().focusin()
.val('my value').change().blur().focusout()
Most often, the validation is tied to a blur event.
In jQuery, you would use:
$('#thingToBlur').blur();
That said -- I have never triggered events through a UserScript, so I'm not sure if they will correctly hit the element in unsafeWindow.
If you need to force-ably run JavaScript on the page (and that includes firing the events there), see this question:
UserScripts & Greasemonkey: calling a website's JavaScript functions
Since after you change the file by using .val() and then you click into a field and click submit it most likely listens on change or blur event.
// set value
$(selector).val(value);
// trigger click
$(selector).click();
// trigger change or blur
$(selector).change();
You could also do method chaining if you wanted.

Using emit to trigger an EnhancedGrid event

It seems there is a bug in the dojox.grid.EnhancedGrid. The "onApplyCellEdit" is not triggered on editing a cell and then clicking Ok button in IE browser. Here is a jsfiddle,
http://jsfiddle.net/eZVkA/3/
As you can see, when you edit the cells in second column and then click on the button (without pressing enter or clicking on the grid), the "onApplyCellEdit" is triggered in all the browsers except IE. I presume this is a bug.
I am trying to resolve this by using emit function but not sure how to use it properly. I wish to use emit on click event of the button and trigger the "onApplyCellEdit" of the EnhancedGrid.
Any solutions?
You do not need emit but it is a good function to learn though.
http://dojotoolkit.org/reference-guide/1.9/dojo/on.html
by calling grid.edit.apply(); it will trigger the event. Grid is referring to the widget itself.

ASP.NET : onchange Event not triggered

I have an asp.net program in which I place a marker on a google map when the address in a textbox is changed. This Javascript is triggered by the onchange event. However I have noticed that if the user does not 'tab' out of the box before clicking submit, the event does not fire. Is there a way I can fix this?
I think what you are trying to achieve is impossible. the onchange event, happens only when you lose focus on the element. You could use onkeypress, onkeydown or onkeyup to get that change quicker. The problem here is that the value of the textbox is going to be changed by the click of an external element and therefore, you cannot bind it directly to the textbox.
If you know exactly what the clickable elements would be, you could add a click event to each one of them, pointing to a function that would test the textbox current value against the latest known value and if they were different, do whatever you want to do. But i don't think that's the case...
following your comment, you should add a submit event to the form, that would compare the current state of the textbox before submitting the form...

What events are fired when a user selects from the browsers stored form dropdown?

I'm using jQuery to alter things when a user enters text into an input. This works fine with .keydown() or .change() when typing.
I'm unable to capture an event when the user selects from the browser stored inputs for that field. This is the dropdown that appears when typing or on click when the element already has focus and the browser has previously entered items for this input.
Anyone know what event I can use to capture the population of the input by the browser from a stored list of previous inputs when the user clicks on one or uses the keyboard?
EDIT: As requested an example would be https://launchpad.37signals.com/highrise/signin (the Username and password, not openID). This hides the label for pasting, selecting from previous inputs or typing. I want to emulate this.
Thanks,
Denis
There's not one event triggered. As you said, it depends on how the user is using it : keyboard or mouse.
If I can remember well, keyboard approach triggers nothing. You should bind on the blur() event.
The mouseup should work for the mouse approach.
But whatever since you can bind several event at once thanks to
$("#id").bind("blur mouseup", function(){
alert("bound !");
});
The change event will fire as well, but when the element looses focus.. (like it normally does)
You would have the same issue even without the browser cache, if someone use the right-mouse-click -> paste of something they had in the clipboard ...
What about mouseup event? did you try it on the input?

Categories

Resources