You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Neha <pu...@gmail.com> on 2014/05/02 18:23:35 UTC
Ajax DatePicker on select Date
Hi, I am using AjaxDatePicker and onSelect of Date i want to show doted
border outside(on parent i.e div,li) the date field text-box to reflect the
auto save behavior.Outside means it input field could be I tried to create
the same behavior as AjaxIndicatorAppender but couldn't get it working.
below is my AjaxDateField ,HTML which include both css and javascript
method.
Class
________________________________________________
private class AjaxDateField extends AjaxDatePicker implements
IAjaxIndicatorAware {
private static final long serialVersionUID = 1L;
private final AjaxIndicatorAppender indicatorAppender = new
AjaxIndicatorAppender();
private final IModel model;
private final Label state;
public AjaxDateField(String id, Model dateModel, IModel model, String
dateFormat, Options options) {
super(id, dateModel, dateFormat, options);
this.model = model;
add(indicatorAppender);
// AjaxDottedBorderAppender borderAppender = new
AjaxDottedBorderAppender(this);
// add(borderAppender);
}
@Override protected void onComponentTag(ComponentTag tag) {
super.onComponentTag(tag);
String readonly = tag.getAttribute("readonly");
if (readonly == null) {
tag.put("readonly", "readonly");
}
}
@Override protected void onBeforeRender() {
super.onBeforeRender();
if (!hasBeenRendered()) {
super.add(new AjaxFormComponentUpdatingBehavior("onChange") {
private static final long serialVersionUID = 1L;
@Override protected void onUpdate(AjaxRequestTarget target) {
target.appendJavaScript("border(" + this.getComponent().getMarkupId() + ","
+ false + ");");
}
});
}
}
@Override public void onValueChanged(AjaxRequestTarget target) {
target.appendJavaScript("border(" + this.getMarkupId() + "," + true+ ");");
target.add(this, state);
}
@Override public String getAjaxIndicatorMarkupId() {
return indicatorAppender.getMarkupId();
}
}
Html
---------------------------------------------------------------------------
<wicket:panel>
<form class="propertyBox" wicket:id="form">
<ul>
<li wicket:id="name"
class="name-field"></li>
<li
class="date-value-field"><input type="text" class="date"
wicket:id="value"></li>
</ul>
</form>
</wicket:panel>
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Ajax-DatePicker-on-select-Date-tp4665646.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Ajax DatePicker on select Date
Posted by Sebastien <se...@gmail.com>.
Hi,
If you are using the wicket-jquery-ui's DatePicker, the best would be that
you reproduce the usecase in a quickstart and post it to
http://groups.google.com/group/wicket-jquery-ui/
(don't forget the "border" javascript function)
Thanks in advance & best regards,
Sebastien.
On Fri, May 2, 2014 at 6:23 PM, Neha <pu...@gmail.com> wrote:
> Hi, I am using AjaxDatePicker and onSelect of Date i want to show doted
> border outside(on parent i.e div,li) the date field text-box to reflect the
> auto save behavior.Outside means it input field could be I tried to create
> the same behavior as AjaxIndicatorAppender but couldn't get it working.
> below is my AjaxDateField ,HTML which include both css and javascript
> method.
>
> Class
> ________________________________________________
>
> private class AjaxDateField extends AjaxDatePicker implements
> IAjaxIndicatorAware {
> private static final long serialVersionUID = 1L;
> private final AjaxIndicatorAppender indicatorAppender = new
> AjaxIndicatorAppender();
> private final IModel model;
> private final Label state;
> public AjaxDateField(String id, Model dateModel, IModel model, String
> dateFormat, Options options) {
> super(id, dateModel, dateFormat, options);
> this.model = model;
> add(indicatorAppender);
> // AjaxDottedBorderAppender borderAppender = new
> AjaxDottedBorderAppender(this);
> // add(borderAppender);
> }
>
> @Override protected void onComponentTag(ComponentTag tag) {
> super.onComponentTag(tag);
> String readonly = tag.getAttribute("readonly");
> if (readonly == null) {
> tag.put("readonly", "readonly");
> }
> }
>
> @Override protected void onBeforeRender() {
> super.onBeforeRender();
> if (!hasBeenRendered()) {
> super.add(new AjaxFormComponentUpdatingBehavior("onChange") {
> private static final long serialVersionUID = 1L;
> @Override protected void onUpdate(AjaxRequestTarget target) {
> target.appendJavaScript("border(" + this.getComponent().getMarkupId() + ","
> + false + ");");
> }
> });
> }
> }
> @Override public void onValueChanged(AjaxRequestTarget target) {
> target.appendJavaScript("border(" + this.getMarkupId() + "," + true+ ");");
> target.add(this, state);
> }
>
> @Override public String getAjaxIndicatorMarkupId() {
> return indicatorAppender.getMarkupId();
> }
> }
>
> Html
> ---------------------------------------------------------------------------
>
> <wicket:panel>
> <form class="propertyBox" wicket:id="form">
> <ul>
> <li wicket:id="name"
> class="name-field"></li>
> <li
> class="date-value-field"><input type="text" class="date"
> wicket:id="value"></li>
> </ul>
> </form>
>
>
> </wicket:panel>
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Ajax-DatePicker-on-select-Date-tp4665646.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>