Click and change events in Aurelia framework - javascript

I am using Aurelia Framework for my SPA.
I have a change event in the input tag and click event on the "Continue" button with their respective functions as shown in the attached image.
The row where input and selects has been placed is a template(as separate view and view model), and this template is being composed in a page which have back and continue button.
Issue:
Case 1:
Page is loaded with default value of input tag and value is assigned using value.bind, now enter some value in the input tag and click on "Continue" button without losing the focus from input tag.
In this scenario only foo(change.delegate) is getting triggered not foo2(click.delegate)
Case 2:
Enter some value in the input tag and lose the focus, again enter some value in the input tag, now click on "Continue" button without losing the focus from input tag, foo2 is executed without any issue.
I am unable to understand this behavior.
I tried using "trigger" in-place of "delegate", even that is not resolving the issue.
Any suggestion or help is appreciated.

Related

Input field not loosing focus when I update a value in it and thus Form Data didn't gets updated on Save Button click

I have a case where my Input fields are not getting updated on Save Button click, as it seems like they are not losing Focus when I update them and then immediately click on Save Button without clicking anywhere else on the Page.
Does anyone has identified this behavior? Please let me know if you have any articles/documentation for such scenarios.

If last textbox has value cursor focus move to button

I'm using rfid reader that the student will tap their id and after that it will display their basic info, i have a hidden button on my form, if click it will open a modal that contains several purposes that the student will choose,
Now my problem is on how to move the focus of the cursor the the button and automatic click it if the last text box has value.
Hope you can help me or give me an idea.
Probably better of firing a javascript function onclick and then either:
Using a function to send formdata via an AJAX function (See this page), or
Using javascript to change window.location

How to keep focus on input field after browser repaint?

I have multiple tabs and each tab has its own iframe. During the first rendering tab 1's input text field has focus using JQuery. After switching to tab 2 and coming back on tab 1 does not put back focus on the input field from tab 1.
As per my understanding focus will be set during DOM construction phase and will be rendered by the browser as it is. But on repaint no DOM re-construction happens so JQuery can not put back focus on the input field.
function clearSearchTxtInput(resetResults) {
$("#searchTxt").val('');
$("#searchTxt").focus();
}
Above code is called onload.
Is there a non-blocking way to put back focus on the input field?

Raise different events if a textbox is focused or not

I'm working on this page:
How it works: the "Consultar" button searches for the code in the "Código" textbox and reloads the page. The "Salvar" button calls a routine to save what you have changed in that item.
Here's what I gotta do: if the "Código" textbox is focused and the user press Enter, the event of the "Consultar" button must be raised. If the "Código" textbox is not focused and the user press Enter, the event of the "Salvar" button must be raised.
I don't know how to do this, I tried to do this using SetDefault button but it won't work cause I need a different button to be default depending if the textbox is focused or not.
I wonder I that I'll probably have to use some javascript, but I have no clue about how to do it.
Can anyone help me?
Thank you.
Bind an event handler to the keypress event on your document and then check if the input field is focused. If so, you can submit your search form, otherwise you continue with your saving logic.
See this fiddle to see it in action: http://jsfiddle.net/KkJ2t/

Fire blur event unless specific element is clicked

I have three search categories (see first image). The user selects one and I show the search input that corresponds to that topic in the space of the categories (see second image). I automatically focus on the input with jQuery so the user can easily begin typing. If the user changes their mind and blurs the intput I hide it and again show the three categories.
This all works great if the user clicks enter to search, but I also want to allow them to be able to click the go button next to the search input field. The issue is that if they try to click the go button the input is blurred and then hidden and the submit click is never fired (I cannot unbind the blur event upon clicking this element because it is never fired - the blur is triggered first)
So is there any way to execute the function bound to the blur event (hiding the div) unless this "go" element is clicked using jQuery or JavaScript?
You have several options:
You can only hide the input on blur if the focus has gone somewhere outside its container, so if the focus has gone to the "Go" button, you don't hide the input at all.
You can your code design and fire the search question as an ajax call rather than a form submit.
You can hide the input on blur after a brief setTimeout() which gives the form submission a chance to get sent before it's hidden.
instead of placing the blur event on the input, place the blur event on the container that holds both the input and the Go button.

Categories

Resources