We Keep Coding

Refocus input field after page gets refreshed in wicket

Is it somehow possible to refocus an input field after a refresh which was last focused before the page was requested?
I have a Wicket Form within my WebPage and in this Form there are quite some input fields (like text fields) the user can use to filter my data view. But when the user for example has the focus on the second input field and then clicks on 'go to next page' within the data view he loses the focus, but due to accessibility it is necessary to refocus the second input field.
My idea was to first tag the input field with jQuery with "regain-focus" when focused:
$("input").focus(function() {
$("input").removeAttr("regain-focus");
$(this).attr("regain-focus", "regain-focus");
});
Then on server update search for the element with the "regain-focus" tag - but that's the part, I don't know how to do that... - tag the corresponding component with "autofocus":
input.add(AttributeModifier.append("autofocus", "autofocus"));
and refocus with javascript:
$('[autofocus]').focus();

Since you have JavaScript experience it would be much simpler to do it completely client side: $(document).on('focusin', 'input textarea', function(event) {localStorage.setItem('focus:'+location.pathname, event.target.id)}) and then use jQuery.ready() based logic to read the entry and use it.

When your page DOM/elements change between requests/refresh/ajax calls, it is better to use a CSS selector using optimal-select to store just a unique identifier for the element and use a JQuery selector to find it again for focus setting. I used this in the NoWicket web framework to remember the focused element on ajax calls. Example JS code here.

WebApp doesn't recognize that an input field was changed when set with jQuery in PhantomJS

I open telegram with PhantomJS and try to fill phone number input with evaluate page like below:
page.evaluate(function(){
$("input[name='phone_number']").val("123456789");
});
When PhantomJS clicks on next button with jQuery the alert massage says:
"tel input is empty"
but when the page is rendered we can see numbers in the input field. How can I fill this input?

The problem is probably that the web app has some event listeners on that field, but they are not called when you change the value directly. You can try to trigger some of those events with jQuery.
For example:
$("input[name='phone_number']").blur();
or
$("input[name='phone_number']").change();
I found that this doesn't necessarily work. You can try to use the native keypress events in PhantomJS like this:
page.evaluate(function() {
document.querySelector("input[name='phone_number']").focus();
});
page.sendEvent("keypress", "123456789");
page.sendEvent() sends the given keys to the focussed input field. That's why you need to focus to the intended field beforehand.

Why browsers auto complete(auto suggestion) in text field Jquery form validations not trigger?

Problem with browsers Auto suggestions.
For example prefilling the user's address based on earlier user input...
Some conditions
autocomplete="on".
i am using "jQuery Validation Plugin 1.11.1".
I am filling the wrong data and click the submit, form validations trigger
next i filled date with browsers Auto suggestions this case form
validations not trigger. Any buddy know update the solution. [Fiddle][1].
First click the submit button next enter the values you observe.
next time click auto suggestion or auto complete -> error message still exit up to focus out...
[2]: http://jsfiddle.net/thiru715/57oyLjzh/2/
` `
[1]: http://i.stack.imgur.com/PDJv8.png

The validation for each field happens when you get out of that field (blur) and on other events (keyup, form submit...)
You'd have to hack it to work, for example, customize your jQuery code so that whenever you leave any field (and thus autocompletation can have happened) the validation is trigerred for all the fields.
See this to learn how to manually trigger the validation.
You can also try to do it using the change event. I'm not sure if it will work.
Please, add this to your fiddle and test it:
$("#registerform input").change(function() {
$(this).valid();
});
I'm not able to test it, because I cannot trigger the autocomplete.
If it doesn't work, try this:
$("#registerform input").blur(function() {
$("#registerform input").valid();
});

Change color when form changes

I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?

Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.

use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>

How can I catch a change event from an HTML text field when a user clicks on a link after editing?

Our webapp has a form with fields and values that change depending on values entered. Each time there is a change event on one of the form elements, we use an expensive AJAX call to update other elements on the page.
This works great for selects, radio buttons and checkboxes. The issue comes in when a user adds content to a text field, and then clicks a link without taking the focus from the text field. The browser moves to a new page, and the contents of the text field are never saved. Is there an easy way to code around this? The AJAX call is too expensive to call with each key press.
Here's an example of my Prototype code at the moment:
$$('.productOption input.text').invoke('observe', 'change', saveChangeEvent);

Have you considered hooking into the window unload() event? Here is a c/p jQuery example using .unload().
$(window).unload(function() {
var input = $("#MyInput"); // Text field to check for
if(input.length > 0)
{
//Ajax call to save data, make sure async:false is set on ajax call.
}
});
This lets you work around making a call on each key press, by making one if they leave the page.

using prototype, you can have a PeriodicExecuter listen while you're typing and sending off an ajax query when nothing has happened for e.g. 2 seconds and value has changed since the last AJAX request. Start the executor using a focus event and shut it down using a blur event, that way you only need one executor at a time