JavaScript onChange after onClick

[cretzel]

Hi,

I'm having a problem regarding JavaScript/Ajax and I'm not sure if it's actually related to Wicket.

I've got a Button and a TextField within a Form. The TextField uses an AjaxUpdatingBehavior for validation, which is fired "onchange". The Button submits the form via Ajax "onclick". In my case, sometimes the onchange event occurs after the onclick event (on the clientside), which causes problems. This is only a problem in IE(6) and not in FF. In FF the onchange event always occurs before the onclick event. And even in IE in simple examples I could never get the onchange event to occur after the onclick. So my question is, if this could have something to do with wicket's ajax JavaScript.

Regards

[Timo Rantalaiho]

On Tue, 15 Jul 2008, cretzel wrote:
> I've got a Button and a TextField within a Form. The TextField uses an
> AjaxUpdatingBehavior for validation, which is fired "onchange". The Button
> submits the form via Ajax "onclick". In my case, sometimes the onchange
> event occurs after the onclick event (on the clientside), which causes
> problems. This is only a problem in IE(6) and not in FF. In FF the onchange
> event always occurs before the onclick event. And even in IE in simple

Are you sure that it always works in Firefox? Sounds like it
could be a race condition. People who know Javascript and
HTML better than me have told me that the browser event
model is not too well defined.

Anyway, if your intent to only validate when the textfield
loses focus? If it would be OK to validate on each keypress,
you could try using OnChangeAjaxBehavior in the TextField.

Another possibility would be to disable the submit button
until the validation does not pass -- but then if you want
to click the button directly when the focus is still on the
field, it gets kind of clumsy.

And yet another possibility is to add the extra check in
the Button event handler... and just run the validation
manually from there before submit if needed.

Best wishes,
Timo

--
Timo Rantalaiho          
Reaktor Innovations Oy    <URL: http://www.ri.fi/ >

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

[cretzel]

Hi Timo,

thanks for your reply.

Anyway, if your intent to only validate when the textfield
loses focus? If it would be OK to validate on each keypress,
you could try using OnChangeAjaxBehavior in the TextField.

We are doing validation via Ajax, so we decided to not to validate on each key press because of performance issues.

Another possibility would be to disable the submit button
until the validation does not pass -- but then if you want
to click the button directly when the focus is still on the
field, it gets kind of clumsy.

This would also mean, that the user first has to leave a text field (to trigger validation) before she could submit the form.

And yet another possibility is to add the extra check in
the Button event handler... and just run the validation
manually from there before submit if needed.

We are doing validation on each text field to give feedback as soon as possible, so this is not an option.

Timo Rantalaiho wrote:

Are you sure that it always works in Firefox? Sounds like it
could be a race condition. People who know Javascript and
HTML better than me have told me that the browser event
model is not too well defined.

Anyway, if your intent to only validate when the textfield
loses focus? If it would be OK to validate on each keypress,
you could try using OnChangeAjaxBehavior in the TextField.

Another possibility would be to disable the submit button
until the validation does not pass -- but then if you want
to click the button directly when the focus is still on the
field, it gets kind of clumsy.

And yet another possibility is to add the extra check in
the Button event handler... and just run the validation
manually from there before submit if needed.

Best wishes,
Timo

--
Timo Rantalaiho          
Reaktor Innovations Oy    <URL: http://www.ri.fi/ >

---------------------------------------------------------------------
To unsubscribe, e-mail: [e-mail]
For additional commands, e-mail: [e-mail]

[cretzel]

Okay, sorry,

this wasn't really a Wicket-Problem but an IE-Problem. The Button in my application is actually a div and IE has problems to focus() divs (sometimes), so that when clicking the div, the focus is not removed from the text field and no onchange-event is fired.

I managed it by giving the button div a tabIndex="0" attribute on in its onclick I call this.focus(). Then it works (even in IE).

cretzel wrote:

Hi,

I'm having a problem regarding JavaScript/Ajax and I'm not sure if it's actually related to Wicket.

I've got a Button and a TextField within a Form. The TextField uses an AjaxUpdatingBehavior for validation, which is fired "onchange". The Button submits the form via Ajax "onclick". In my case, sometimes the onchange event occurs after the onclick event (on the clientside), which causes problems. This is only a problem in IE(6) and not in FF. In FF the onchange event always occurs before the onclick event. And even in IE in simple examples I could never get the onchange event to occur after the onclick. So my question is, if this could have something to do with wicket's ajax JavaScript.

Regards

[Timo Rantalaiho]

Hello,

Great that you could solve your issue, but I'll comment on a
couple of things anyway.

On Wed, 16 Jul 2008, cretzel wrote:
> We are doing validation via Ajax, so we decided to not to validate on each
> key press because of performance issues.

Have you proved empirically (load testing, profiling or
something such) that this would cause performance issues?
Because ajax validation on each keypress is a very common
place to start premature optimisation when starting to do
more responsive user interfaces; I've seen many people fall
into that trap, myself included :)

> > And yet another possibility is to add the extra check in
> > the Button event handler... and just run the validation
> > manually from there before submit if needed.
> >
> We are doing validation on each text field to give feedback as soon as
> possible, so this is not an option.

I actually thought that this would have been only an extra
validation round in addition to the normal one.

But if you could get the events come always in right order,
great!

Best wishes,
Timo

--
Timo Rantalaiho          
Reaktor Innovations Oy    <URL: http://www.ri.fi/ >

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@...
For additional commands, e-mail: users-help@...

[cretzel]

Hi Timo,

thanks for that hint. Actually, we didn't prove these issues. We should give it a try ...

Thanks

Timo Rantalaiho wrote:

Hello,

Great that you could solve your issue, but I'll comment on a
couple of things anyway.

On Wed, 16 Jul 2008, cretzel wrote:
> We are doing validation via Ajax, so we decided to not to validate on each
> key press because of performance issues.

Have you proved empirically (load testing, profiling or
something such) that this would cause performance issues?
Because ajax validation on each keypress is a very common
place to start premature optimisation when starting to do
more responsive user interfaces; I've seen many people fall
into that trap, myself included :)

> > And yet another possibility is to add the extra check in
> > the Button event handler... and just run the validation
> > manually from there before submit if needed.
> >
> We are doing validation on each text field to give feedback as soon as
> possible, so this is not an option.

I actually thought that this would have been only an extra
validation round in addition to the normal one.

But if you could get the events come always in right order,
great!

Best wishes,
Timo

--
Timo Rantalaiho          
Reaktor Innovations Oy    <URL: http://www.ri.fi/ >

---------------------------------------------------------------------
To unsubscribe, e-mail: [e-mail]
For additional commands, e-mail: [e-mail]