WiQuery DatePicker and Ajax Request

[Alexander Monakhov <do...@gmail.com>]

Hi, guys.

Here is a problem I met today:
When I use DatePicker and I change it's model when ajax request
received, on client side date picker's button image doubles.
It happens because on every request date picker is initialized again
and renders new image every time, but old one doesn't disappear, so
user can see several button images.

Here is simple code snippet for testing:
Form<Void> form = new Form<Void>( "form" );
add( form );
		
DatePicker<Date> datePicker = new DatePicker<Date>( "datepicker",
				new Model<Date>(), Date.class );
datePicker.setButtonImageOnly( true );
datePicker.setShowOn( ShowOnEnum.BUTTON );
datePicker.setOutputMarkupPlaceholderTag( true );
form.add( datePicker );
		
FormComponent<String> submitBtn = new AjaxButton( "submit",
				new Model<String>( "Submit" ), form ) {
			
	@Override
	protected void onSubmit( AjaxRequestTarget target, Form<?> form ) {
		Component datePicker = getForm().get( "datepicker" );
		datePicker.setDefaultModelObject( null );
				
		target.addComponent( datePicker );
	}
			
};
form.add( submitBtn );

Here is markup:
<form wicket:id="form">
	<input type="text" wicket:id="datepicker"/>
	<input type="button" wicket:id="submit"/>
</form>

Is there any solution?

Best regards, Alexander.

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

Re: WiQuery DatePicker and Ajax Request

[Alexander Monakhov <do...@gmail.com>]

Thanks for this fast reply!

Best regards, Alexander.

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

Re: WiQuery DatePicker and Ajax Request

[julien roche AKA indiana_jules <ro...@gmail.com>]

Hi,

This is typically a jquery ui problem. Indeed, it creates a div element
after the input field So, each time you refresh the input, a new div will be
inserted. The "best" workaround is to wrap the input into a div / span
element which will be used to refresh the input. With this approach, we
flush the input and the additionnal div created by the datepicker js plugin.
So, you will have:

<form wicket:id="form">
       <span wicket:id="datepickercontainer"><input type="text"
wicket:id="datepicker"/></span>
       <input type="button" wicket:id="submit"/>
</form>

and

Form<Void> form = new Form<Void>( "form" );
add( form );

WebMarkupContainer datepickercontainer = new
WebMarkupContainer("datepickercontainer");
datepickercontainer.setOutputMarkupId(true);
form.add( datepickercontainer );

DatePicker<Date> datePicker = new DatePicker<Date>( "datepicker",
                               new Model<Date>(), Date.class );
datePicker.setButtonImageOnly( true );
datePicker.setShowOn( ShowOnEnum.BUTTON );
datePicker.
setOutputMarkupPlaceholderTag( true );
datepickercontainer .add( datePicker );

FormComponent<String> submitBtn = new AjaxButton( "submit",
                               new Model<String>( "Submit" ), form ) {

       @Override
       protected void onSubmit( AjaxRequestTarget target, Form<?> form ) {
               Component datePicker = getForm().get( "datepicker" );
               datePicker.setDefaultModelObject( null );

               target.addComponent( datepickercontainer );
       }

};
form.add( submitBtn );


Best regards

Julien Roche

On Tue, Mar 15, 2011 at 3:19 PM, Alexander Monakhov <do...@gmail.com>wrote:

> Hi, guys.
>
> Here is a problem I met today:
> When I use DatePicker and I change it's model when ajax request
> received, on client side date picker's button image doubles.
> It happens because on every request date picker is initialized again
> and renders new image every time, but old one doesn't disappear, so
> user can see several button images.
>
> Here is simple code snippet for testing:
> Form<Void> form = new Form<Void>( "form" );
> add( form );
>
> DatePicker<Date> datePicker = new DatePicker<Date>( "datepicker",
>                                new Model<Date>(), Date.class );
> datePicker.setButtonImageOnly( true );
> datePicker.setShowOn( ShowOnEnum.BUTTON );
> datePicker.setOutputMarkupPlaceholderTag( true );
> form.add( datePicker );
>
> FormComponent<String> submitBtn = new AjaxButton( "submit",
>                                new Model<String>( "Submit" ), form ) {
>
>        @Override
>        protected void onSubmit( AjaxRequestTarget target, Form<?> form ) {
>                Component datePicker = getForm().get( "datepicker" );
>                datePicker.setDefaultModelObject( null );
>
>                target.addComponent( datePicker );
>        }
>
> };
> form.add( submitBtn );
>
> Here is markup:
> <form wicket:id="form">
>        <input type="text" wicket:id="datepicker"/>
>        <input type="button" wicket:id="submit"/>
> </form>
>
> Is there any solution?
>
> Best regards, Alexander.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>