You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Tom Eugelink <tb...@tbee.org> on 2012/04/19 14:02:10 UTC

two interlinked ajax textfields

Again a situation where I'm missing the background because of my newbie status.

I have two textfields, one for the buildingnr, the second for the roomnr within that building. Both have a label to the right with a description.
All four components (2x TextField, 2x Label) are within a single WebMarkupContainer and the two textfields each have a AjaxFormComponentUpdatingBehavior associated.
This basic setup works.

The next step is that once the buildnr number is changed, I may want to change the roomnr (clear it if it doesn't exist) or the room label as well. So the ajax event on the buildingnr textfield also influences the roomnr fields. This does not work as expected: I cannot set the value of the second TextField.

What would be the best way to do this?

Tom





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


Re: two interlinked ajax textfields

Posted by Tom Eugelink <tb...@tbee.org>.
Removing the OnChangeAjaxBehavior does not help, this behavior comes from the MarkupContainer; it changes the behavior of the onchange to a per-keypress event.

Tom


On 19-4-2012 16:40, Tom Eugelink wrote:
>
> The last alert is displayed on every key press, the first after leaving the field. The behavior of the event is different.



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


Re: two interlinked ajax textfields

Posted by Tom Eugelink <tb...@tbee.org>.
Switched back to simple onchange. All is well now.


On 2012-04-19 16:50, Martin Grigorov wrote:
> OnChangeAjaxBehavior uses oninput/onpaste/oncut behind the scenes for
> text form components, that's why it reacts on each key press
> onchange fires only when you leave the input field
>



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


Re: two interlinked ajax textfields

Posted by Martin Grigorov <mg...@apache.org>.
OnChangeAjaxBehavior uses oninput/onpaste/oncut behind the scenes for
text form components, that's why it reacts on each key press
onchange fires only when you leave the input field

On Thu, Apr 19, 2012 at 5:40 PM, Tom Eugelink <tb...@tbee.org> wrote:
>
> To take it one level further, if I add
>
>
>     onchange="javascript:alert('test');"
>
> to an input without and with an OnChangeAjaxBehavior:
>
> <div class="clearfix">
> <label>Renewal delay:
> <div class="input">
> <input type="text" size="10" wicket:id="renewalDelay"
> onchange="javascript:alert('test');"/>
> </div>
> </label>
> </div>
>
>
> <div class="clearfix" wicket:id="contextPanel">
> <label>Client:
> <div class="input">
> <input type="text" size="5" wicket:id="context.owner.id"
> onchange="javascript:alert('test');"/>
> </div>
> </label>
> </div>
>
> The last alert is displayed on every key press, the first after leaving the
> field. The behavior of the event is different.
>
> Tom
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

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


Re: two interlinked ajax textfields

Posted by Tom Eugelink <tb...@tbee.org>.
To take it one level further, if I add

      onchange="javascript:alert('test');"

to an input without and with an OnChangeAjaxBehavior:

<div class="clearfix">
<label>Renewal delay:
<div class="input">
<input type="text" size="10" wicket:id="renewalDelay" onchange="javascript:alert('test');"/>
</div>
</label>
</div>


<div class="clearfix" wicket:id="contextPanel">
<label>Client:
<div class="input">
<input type="text" size="5" wicket:id="context.owner.id" onchange="javascript:alert('test');"/>
</div>
</label>
</div>

The last alert is displayed on every key press, the first after leaving the field. The behavior of the event is different.

Tom



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


Re: two interlinked ajax textfields

Posted by Tom Eugelink <tb...@tbee.org>.
Hmmmmm. So I type something in field #1, tab to the field #2, start typing, then the 1 second delay on field #1 triggers the ajax call, it refreshes the label associated with #1 AND a select all on field #2 happens. This is not an acceptable user interface experience.

I've upgraded to Wicket 6 beta 1 to see if the problem was in the javascript being used, and even though there is no onchange attribute on the element anymore (it's put there by jquery), the behavior is identical.

What confuses me is that if I do a simple onchange="javascript:alert('test');" on any textfield, it does not trigger until the cursor leaves the textfield.



On 19-4-2012 15:53, Martin Grigorov wrote:
> see org.apache.wicket.ajax.AjaxEventBehavior#setThrottleDelay
>



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


Re: two interlinked ajax textfields

Posted by Martin Grigorov <mg...@apache.org>.
see org.apache.wicket.ajax.AjaxEventBehavior#setThrottleDelay

On Thu, Apr 19, 2012 at 4:43 PM, Tom Eugelink <tb...@tbee.org> wrote:
>
> Hm. Using "onchange" either directly or via OnChangeAjaxBehavior, I'm not
> able to type more that one character in the textbox. As soon as I've typed
> one, the ajax call triggers and does a select-all of the textbox (in
> Chrome), the next keystroke when overwrites the contents. Onblur does not
> have this behavior, but does not update the second textfield.
>
> Naturally this behavior is related to the browser; FF and IE do not do a
> select-all, but they place the cursor at the beginning of the text (which is
> not helping either).
>
> Tom
>
>
>
> On 19-4-2012 14:39, Martin Grigorov wrote:
>>
>> Check OnChangeAjaxBehavior too.
>> It is bit smarter than AjaxFormComponentUpdatingBehavior and you wont
>> need to leave the text input field with it.
>>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

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


Re: two interlinked ajax textfields

Posted by Tom Eugelink <tb...@tbee.org>.
Hm. Using "onchange" either directly or via OnChangeAjaxBehavior, I'm not able to type more that one character in the textbox. As soon as I've typed one, the ajax call triggers and does a select-all of the textbox (in Chrome), the next keystroke when overwrites the contents. Onblur does not have this behavior, but does not update the second textfield.

Naturally this behavior is related to the browser; FF and IE do not do a select-all, but they place the cursor at the beginning of the text (which is not helping either).

Tom


On 19-4-2012 14:39, Martin Grigorov wrote:
> Check OnChangeAjaxBehavior too.
> It is bit smarter than AjaxFormComponentUpdatingBehavior and you wont
> need to leave the text input field with it.
>



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


Re: two interlinked ajax textfields

Posted by Martin Grigorov <mg...@apache.org>.
Check OnChangeAjaxBehavior too.
It is bit smarter than AjaxFormComponentUpdatingBehavior and you wont
need to leave the text input field with it.

On Thu, Apr 19, 2012 at 3:34 PM, Tom Eugelink <tb...@tbee.org> wrote:
>
> Thank you!
>
> The problem apparently was that I had the ajax bound to "onblur" and not to
> "onchange". Copied that from some example on the web.
>
> Tom
>
>
>
>
>
> On 19-4-2012 14:12, Martin Grigorov wrote:
>>
>> field1.add(new AjaxFormComponentUpdatingBehavior("onchange") {
>>   onUpdate(target) {
>>     buildingNr = getComponent.getModelObject();
>>     if (buildingNr == ...) {
>>        field2.setModelObject(newValue)
>>        target.add(field2)
>>     }
>>   }
>> })
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

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


Re: two interlinked ajax textfields

Posted by Tom Eugelink <tb...@tbee.org>.
Thank you!

The problem apparently was that I had the ajax bound to "onblur" and not to "onchange". Copied that from some example on the web.

Tom




On 19-4-2012 14:12, Martin Grigorov wrote:
> field1.add(new AjaxFormComponentUpdatingBehavior("onchange") {
>    onUpdate(target) {
>      buildingNr = getComponent.getModelObject();
>      if (buildingNr == ...) {
>         field2.setModelObject(newValue)
>         target.add(field2)
>      }
>    }
> })



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


Re: two interlinked ajax textfields

Posted by Martin Grigorov <mg...@apache.org>.
Hi,

TextField field1 = new ...
final TextField field2 = ...

field1.add(new AjaxFormComponentUpdatingBehavior("onchange") {
  onUpdate(target) {
    buildingNr = getComponent.getModelObject();
    if (buildingNr == ...) {
       field2.setModelObject(newValue)
       target.add(field2)
    }
  }
})

On Thu, Apr 19, 2012 at 3:02 PM, Tom Eugelink <tb...@tbee.org> wrote:
>
> Again a situation where I'm missing the background because of my newbie
> status.
>
> I have two textfields, one for the buildingnr, the second for the roomnr
> within that building. Both have a label to the right with a description.
> All four components (2x TextField, 2x Label) are within a single
> WebMarkupContainer and the two textfields each have a
> AjaxFormComponentUpdatingBehavior associated.
> This basic setup works.
>
> The next step is that once the buildnr number is changed, I may want to
> change the roomnr (clear it if it doesn't exist) or the room label as well.
> So the ajax event on the buildingnr textfield also influences the roomnr
> fields. This does not work as expected: I cannot set the value of the second
> TextField.
>
> What would be the best way to do this?
>
> Tom
>
>
>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

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