You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Steven Haines <ly...@yahoo.com> on 2010/06/01 21:50:01 UTC
Re: OnChangeAjaxBehavior and other form components
Hi Everyone,
I have a followup question to this thread from last month... The following Ajax call decorator that I added to my zipcode field (stopping the ajax call until the user enters 5 digits) works in Firefox, but not in Chrome or Safari (webkit):
@Override
protected IAjaxCallDecorator getAjaxCallDecorator()
{
return new AjaxCallDecorator()
{
private static final long serialVersionUID = 1L;
@Override
public CharSequence decorateScript( CharSequence script )
{
// Only return the script (which means that it will be executed) after the
// user enters the 5th digit (or more)
return "if(this.value.length >= 5){" + script + "}";
}
};
}
This resolves to the following JS:
<input wicket:id="address.zipcode" id="zip_code" class="check_address validate addressChecker" type="text" value="" name="gettingStartedPanel:address.zipcode" onchange="if(this.value.length >= 5){var wcall=wicketSubmitFormById('step_form', '?wicket:interface=:1:quoteForm:gettingStartedPanel:address.zipcode::IActivePageBehaviorListener:0:&wicket:ignoreIfNotActive=true', null,function() { }.bind(this),function() { }.bind(this), function() {return Wicket.$$(this)&&Wicket.$$('step_form')}.bind(this));};"/><script type="text/javascript"><!--/*--><![CDATA[/*><!--*/
new Wicket.ChangeHandler('zip_code');
/*-->]]>*/</script>
The problem seems to be that the browser loses sight of what "this" is and reports: Uncaught TypeError: Cannot read property 'length' of undefined.
The web developer that I'm working with suggested the following change to the Ajax decorator:
return "var zipcode =
document.getElementById('zip_code'); if(zipcode.value.length >= 5 ){" + script + "}";
And it worked correctly because it removed the ambiguity of the value of "this". He was suggesting that something that Wicket's JavaScript is doing is changing the value of "this". I have a working solution, but wondering if you have any thoughts as to why this is happening?
Thanks
Steve
----- Original Message ----
From: Steven Haines <ly...@yahoo.com>
To: users@wicket.apache.org
Sent: Wed, April 21, 2010 2:43:41 PM
Subject: Re: OnChangeAjaxBehavior and other form components
I finally got everything working... Here is what I did for anyone that comes across this problem..
I added an onComponentRendered() method to my AjaxFormSubmitBehavior in that method I added the new Wicket.ChangeHandler (I saw the code in the OnChangeAjaxBehavior class):
@Override
protected final void onComponentRendered()
{
Response response = getComponent().getResponse();
final String id = getComponent().getMarkupId();
response.write( JavascriptUtils.SCRIPT_OPEN_TAG );
response.write( "new Wicket.ChangeHandler('" + id + "');" );
response.write( JavascriptUtils.SCRIPT_CLOSE_TAG );
}
So here is my final zipcode field:
zipcodeField.add( new AjaxFormSubmitBehavior( form, "onchange" )
{
private static final long serialVersionUID = 1L;
@Override
protected void onSubmit( AjaxRequestTarget target )
{
// Access your objects through the form bound in your CompoundPropertyModel
myModel.getZipcode();
myModel.getStreet1();
}
@Override
protected void onError( AjaxRequestTarget art )
{
// Called for things like validation errors ...
}
@Override
protected IAjaxCallDecorator getAjaxCallDecorator()
{
return new AjaxCallDecorator()
{
private static final long serialVersionUID = 1L;
@Override
public CharSequence decorateScript( CharSequence script )
{
// Only return the script (which means that it will be executed) after the
// user enters the 5th digit (or more)
return "if(this.value.length >= 5){" + script + "}";
}
};
}
@Override
protected final void onComponentRendered()
{
// Creates a new Wicket.ChangeHandler for immediate notifications of
// change events
Response response = getComponent().getResponse();
final String id = getComponent().getMarkupId();
response.write( JavascriptUtils.SCRIPT_OPEN_TAG );
response.write( "new Wicket.ChangeHandler('" + id + "');" );
response.write( JavascriptUtils.SCRIPT_CLOSE_TAG );
}
} );
----- Original Message ----
From: Steven Haines <ly...@yahoo.com>
To: users@wicket.apache.org
Sent: Wed, April 21, 2010 1:38:04 PM
Subject: Re: OnChangeAjaxBehavior and other form components
Thanks Igor, the AjaxFormSubmitBehavior worked to give me access to all form fields. I have one additional problem: with the OnChangeAjaxBehavior implementation it used my Ajax call decorator correctly and sent me updates after the user typed the 5th character in the field, but with the AjaxFormSubmitBehavior it only calls back to my web page when the field loses focus. I setup both scenarios and looked at the HTML document.
Here is the working one (OnChangeAjaxBehavior ):
<input wicket:id="zipcode" class="js_disable" id="zip" value="" name="zipcode" onchange="
if(this.value.length >= 5){var wcall=wicketAjaxPost('?wicket:interface=:1:gettingStartedPanel:step_1:zipcode::IBehaviorListener:0:', wicketSerialize(Wicket.$('zip')),function() { }.bind(this),function() { }.bind(this), function() {return Wicket.$('zip') != null;}.bind(this));}">
<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/
new Wicket.ChangeHandler('zip');
/*-->]]>*/</script>
And here is the one that only sends requests when the text field loses focus (AjaxFormSubmitBehavior):
<input wicket:id="zipcode" class="js_disable" id="zip" value="" name="zipcode" onchange="
if(this.value.length >= 5){var wcall=wicketSubmitFormById('step__114', '?wicket:interface=:7:gettingStartedPanel:step_1:zipcode::IActivePageBehaviorListener:0:&wicket:ignoreIfNotActive=true', null,function() { }.bind(this),function() { }.bind(this), function() {return Wicket.$$(this)&&Wicket.$$('step__114')}.bind(this));};">
My "guess" is that the Wicket.ChangeHandler('zip') is what is making it work, but that does not appear when I add the AjaxFormSubmitBehavior. Do you know what I need to add to it to get this behavior?
Thanks so much!
Steve
----- Original Message ----
From: Igor Vaynberg <ig...@gmail.com>
To: users@wicket.apache.org; Steven Haines <ly...@yahoo.com>
Sent: Wed, April 21, 2010 12:35:20 PM
Subject: Re: OnChangeAjaxBehavior and other form components
there is ajaxformsubmitbehavior if you want all the fields updated
-igor
On Wed, Apr 21, 2010 at 6:10 AM, Steven Haines <ly...@yahoo.com> wrote:
> Hi Igor,
>
> I looked at the JavaScript that is generated when adding an AjaxFormComponentUpdatingBehavior and it does not include any form fields other than the component to which it is added:
>
> onChange="if(this.value.length >= 5){var wcall=wicketAjaxPost('?wicket:interface=:1:gettingStartedPanel:step_1:zipcode::IBehaviorListener:0:', wicketSerialize(Wicket.$('zip')),function() { }.bind(this),function() { }.bind(this), function() {return Wicket.$('zip') != null;}.bind(this));}">
>
> Should I look at submitting the entire form via Ajax when my conditions are met? Or any other ideas about how to add a form field to the callback?
>
> Here is what I added to my WebPage:
>
> // Street 1
> final TextField<String> street1 = new TextField<String>( "street1" );
> street1.setOutputMarkupId( true );
> street1.setMarkupId( "address1" );
> form.add( street1.setRequired( true ) );
>
> final TextField<String> zipcodeField = new TextField<String>( "zipcode" );
> zipcodeField.setOutputMarkupId( true );
> zipcodeField.setMarkupId( "zip" );
> form.add( zipcodeField.setRequired( true ) );
>
> zipcodeField.add( new AjaxFormComponentUpdatingBehavior( "onChange" ) {
> private static final long serialVersionUID = 1L;
>
> @Override
> public void onUpdate( AjaxRequestTarget target ) {
> System.out.println( "Street 1 (final): " + street1.getValue() );
> TextField<String> street1f = ( TextField<String> )form.get( "street1" );
> System.out.println( "Street 1 (form): " + street1f.getValue() );
> System.out.println( "Zipcode value (form component): " + getFormComponent().getModelObject() );
> }
>
> @Override
> protected IAjaxCallDecorator getAjaxCallDecorator()
> {
> return new AjaxCallDecorator()
> {
> private static final long serialVersionUID = 1L;
>
> @Override
> public CharSequence decorateScript( CharSequence script )
> {
> // Only return the script (which means that it will be executed) after the
> // user enters the 5th digit (or more)
> return "if(this.value.length >= 5){" + script + "}";
> }
> };
> }
> });
>
>
> ...and on another note, I had the same code with an OnChangeAjaxBehavior and the callback was made when the 5th character was typed, but with the AjaxFormComponentUpdatingBehavior the callback was made when the component lost focus ..
>
> Thanks
> Steve
>
>
>
>
> ----- Original Message ----
> From: Igor Vaynberg <ig...@gmail.com>
> To: users@wicket.apache.org; Steven Haines <ly...@yahoo.com>
> Sent: Tue, April 20, 2010 6:25:03 PM
> Subject: Re: OnChangeAjaxBehavior and other form components
>
> user AjaxFormComponentUpdatingBehavior
>
> -igor
>
> On Tue, Apr 20, 2010 at 2:37 PM, Steven Haines <ly...@yahoo.com> wrote:
>> Hi,
>>
>> I have a form component to which I added an OnChangeAjaxBehavior derivative and in its onUpdate() method I want to access the contents of it *and* another form field.
>>
>> Here's what I'm doing:
>>
>> form.add( new TextField<String>( "street1" ).setRequired( true ) );
>> final TextField<String> zipcodeField = new TextField<String>( "zipcode" );
>> zipcodeField.setOutputMarkupId( true );
>> zipcodeField.setMarkupId( "zip" );
>> form.add( zipcodeField.setRequired( true ) );
>>
>> // Load cities when the zipcode is updated
>> zipcodeField.add( new OnChangeAjaxBehavior()
>> {
>> private static final long serialVersionUID = 1L;
>>
>> @Override
>> protected void onUpdate( AjaxRequestTarget target )
>> {
>> //TextField<String> street1 = ( TextField<String> )form.get( "street1" );
>> //System.out.println( "Street 1: " + street1.getValue() );
>> System.out.println( "Zipcode value (form component): " + getFormComponent().getModelObject() );
>> // Do something with street1 and the zipcode....
>> }
>> } );
>>
>> The problem is that, although I've tried different techniques to obtain the value of the street1 text field, it is always returning null. I've tried creating street1 as a final text field and then calling its getValue() method, I've tried getting it from the form, as above, and I've tried reading from the underlying form model, all of which return null.
>>
>> Any suggestions?
>>
>> Thanks
>> Steve
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org