Wicket-Jquery Date Picker onSelect date show border

[kapils....@gmail.com]

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.

please suggest where to email quick start.

Java

package com.ajaxdatepicker;

import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.IAjaxIndicatorAware;
import org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender;
import org.apache.wicket.extensions.markup.html.form.DateTextField;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;

import com.googlecode.wicket.jquery.core.Options;
import com.googlecode.wicket.jquery.ui.form.datepicker.AjaxDatePicker;



public class HomePage extends WebPage {
    private static final long serialVersionUID = 1L;

    public static final String DISPLAY_DATE_FORMAT = "dd MMM yyyy";
    private static final Locale LOCALE = Locale.UK;
    public static final String ENOVIA_DATE_FORMAT = "M/d/yyyy h:mm:ss a";
    public static final Locale ENOVIA_LOCALE = Locale.US;
    public static final String JAVA_DATE_FORMAT = "dd MMM yyyy";
    public static final String JAVA_WEEK_FORMAT = "'w'DD yyyy";
    public static final String JQUERY_DATE_FORMAT = "dd M yy";
   
    private static final DateFormat DISPLAY_DF = new SimpleDateFormat(DISPLAY_DATE_FORMAT, LOCALE);
    private static final DateFormat DB_DF = new SimpleDateFormat(ENOVIA_DATE_FORMAT, ENOVIA_LOCALE);

    public HomePage(final PageParameters parameters) {
        super(parameters);
       
        Form<?> form = new Form<Void>("form");
        add(form);

        Label name = new Label("name",Model.of("Date: "));
        form.add(name);

        Model<Date> dateModel = null;
        String strDate = "";//model.getObject().getValue();
        if (strDate.isEmpty()) {
            dateModel = new Model<Date>();
        } else {
            dateModel = Model.of(getDate(strDate));
        }

        Options options = new Options();
        options.set("showWeek", "true");
        options.set("firstDay", 1);
        options.set("showOtherMonths", "true");
        options.set("selectOtherMonths", "true");
        options.set("changeMonth", "true");
        options.set("changeYear", "true");
        options.set("dateFormat", Options.asString(JQUERY_DATE_FORMAT));

        final DateTextField value = new AjaxDateField("value", dateModel, JAVA_DATE_FORMAT, options);
        form.add(value);

       

        // TODO Add your page's components here

    }
   
    private class AjaxDateField extends AjaxDatePicker implements IAjaxIndicatorAware {

        private static final long serialVersionUID = 1L;

        private final AjaxIndicatorAppender indicatorAppender = new AjaxIndicatorAppender();

         public AjaxDateField(String id, Model<Date> dateModel, String dateFormat, Options options) {
            super(id, dateModel, dateFormat, options);
            this.setModel(dateModel);
            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
        public void onValueChanged(AjaxRequestTarget target) {
                //As soon as date is selected i want to show dotted border because we will save the selected date in database
                target.appendJavaScript("border(" + this.getMarkupId() + "," + true + ");");
               
                /*
                 * do save operation here
                 */
               
                //On
                target.appendJavaScript("border(" + this.getMarkupId() + "," + false + ");");
               
            }

        @Override
        public String getAjaxIndicatorMarkupId() {
            return indicatorAppender.getMarkupId();
        }
    }
   
    public static synchronized Date getDateFromDisplayFormat(String displayDateString) {
        Date date = null;
        if (isNotBlank(displayDateString)) {
            try {
                date = DISPLAY_DF.parse(displayDateString);
            } catch (ParseException e) {
                // Probably not a date string, so return a null Date
            }
        }
        return date;
    }
   
    public static boolean isBlank(String str) {
        int strLen;
        if ((str == null) || ((strLen = str.length()) == 0))
            return true;
        for (int i = 0; i < strLen; ++i) {
            if (!(Character.isWhitespace(str.charAt(i)))) {
                return false;
            }
        }
        return true;
    }

    public static boolean isNotBlank(String str) {
        return (!(isBlank(str)));
    }
   
    public static synchronized Date getDate(String dateString) {
            Date date = getDateFromDBFormat(dateString);
            if (date == null) {
                date = getDateFromDisplayFormat(dateString);
            }
            return date;
    }
   
    public static synchronized Date getDateFromDBFormat(String enoviaDateString) {
        Date date = null;
        if (isNotBlank(enoviaDateString)) {
            try {
                date = DB_DF.parse(enoviaDateString);
            } catch (ParseException e) {
                // Probably not a date string, so return a null Date
            }
        }

        return date;
    }
}






HTML include css and Javascript

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
	<head>
		<meta charset="utf-8" />
		<title>Apache Wicket Quickstart</title>
		<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold' rel='stylesheet' type='text/css' />
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Stylesheet" />
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css"> 
		
		<style>
        .ui-datepicker {
            width: 180px;
            font-size: 10px;
        }
        .dotted{
          border-color: #004080;
          color: #000000;
          border:dotted; 
          margin-top:2px;   
          width:40.5%;   
        }
    </style>
	</head>
	<body>
		<div id="hd">
			<div id="logo">
				<img src="logo.png" width="50px" height="50px" alt="Wicket Logo" />
				<h1>Apache Wicket</h1>
			</div>
		</div>
		<div id="bd">
			<form class="propertyBox" wicket:id="form">
            <ul>
                <li wicket:id="name" class="name-field">Date :</li>
                <li class="date-value-field"><input type="text" class="date" wicket:id="value"></li>
                <li class="date-value-field dotted"><input type="text" style="width:240px;" value="desired example on select of date"></li>
                <li class="date-value-field "><input type="text" style="width:240px;" value="desired example after ajax completion"></li>
            </ul>
        </form>
        
    <script>
    
     
   
    function border(border,isClassToSet) {
        alert(border.id+isClassToSet);//alert is temp because we can see it puts dotts and removed it.
        var isToSet = Boolean(isClassToSet);
        if(isToSet){
           $(border).parent().addClass("dotted");
        }else{
            $(border).parent().removeClass("dotted");
        }
       };
        
    
   /* I tried below function also but it never called.Another thing in real time our page could have more then one date field
   */
    
    /* $(document).ready(function(){
    $(".date").datepicker({minDate: +1,
          onSelect: function(dateText) {
              alert("here");
                display("Selected date: " + dateText + "; input's current value: " + this.value);
                $(this).getParent().addClass("dotted");
              }
            });
}); 
 */

   
       
    </script>
		</div>
		<div id="ft">
		</div>
	</body>
</html>

[Sebastien Briquet]

Hi,

You can attach your quickstart here (you should see an "Attach a file" link, just above the editor)

Thanks & best regards,
Sebastien.

[kapils....@gmail.com]

Hi Sebastien,

 

Thanks for reply.

 

I couldn't able to find "Attach a file link". Above this editor their are style,image,Link and other options but nothingto upload a zip or file.

 

Please suggest or shared some emaild if possible.

 

Br

Kapil

[kapil sharma]

Hi Sebastien,

Please find the attached quickstart.

Br
Kapil

[kapils....@gmail.com]

Please help and suggest some solution!!

Thanks in advance!!

Br
Kapil

[Sebastien]

Please help and suggest some solution!!

No problem, I'm an Expert...
https://www.youtube.com/watch?v=BKorP55Aqvg
 

Just kidding :)
I am looking at your quickstart asap....

[Sebastien Briquet]

Hi Kapil,

The problem is that you display and hide the border at the end of the same request cycle. What you need is to display the border *before* sending the ajax request.

Additionally:
 - be careful to deal with correct selector while using jQuery
 - wicket-jquery-ui-6.15 is supposed to work with jQuery 1.10.4, (the css reference was 1.10.3 in you quickstart)

So, it can be done like this:

        @Override
        public void onValueChanged(AjaxRequestTarget target) {

            /*
             * do save operation here
             */

            // border off
            String selector = JQueryWidget.getSelector(this);
            target.appendJavaScript("border('" + selector + "', false);");
        }
       
        @Override
        public JQueryBehavior newWidgetBehavior(final String selector)
        {
            return new DatePickerBehavior(selector, this.options) {

               
                private static final long serialVersionUID = 1L;

                @Override
                public boolean isOnSelectEventEnabled()
                {
                    return true;
                }

                @Override
                public void onSelect(AjaxRequestTarget target, String date)
                {
                    AjaxDateField.this.onSelect(target, date);
                }
               
                @Override
                protected JQueryAjaxPostBehavior newOnSelectBehavior()
                {
                    return new OnSelectBehavior(this, AjaxDateField.this) {

                        private static final long serialVersionUID = 1L;

                        @Override
                        public CharSequence getCallbackFunctionBody(CallbackParameter... parameters)
                        {
                            // border on
                            return "border('" + selector + "', true); " + super.getCallbackFunctionBody(parameters);
                        }
                    };
                }
            };
        }


Maybe is there a better solution, but that's the one I see for the moment...

Best regards,
Sebastien.

[kapils....@gmail.com]

Hi Sebastian,

Thanks a lot it worked.you are expert :)

But i need your help for same functionality in one more case which is TextField.

How to do it when we have TextField of wicket and onChange of AjaxFormSubmitBehaviour.Please suggest.

Br
Kapil

[Sebastien]

Hi Kapil,

This is out of scope of wicket-jquery-ui here...

Anyway, you can do it with a recommended wicket way:

        final TextField<String> textfield = new TextField<String>("textfield", Model.of(""));
        final String selector = JQueryWidget.getSelector(textfield);
       
        textfield.add(new OnChangeAjaxBehavior() {

           
            private static final long serialVersionUID = 1L;
           
            @Override

            protected void updateAjaxAttributes(AjaxRequestAttributes attributes)
            {
                super.updateAjaxAttributes(attributes);

                AjaxCallListener listener = new AjaxCallListener();
                listener.onBefore("border('" + selector + "', true);");

                attributes.getAjaxCallListeners().add(listener);
            }

            @Override
            protected void onUpdate(AjaxRequestTarget target)
            {

                target.appendJavaScript("border('" + selector + "', false);");
            }

        });
       
        form.add(textfield);

Please read this for more detail:
http://apache-wicket.1842946.n4.nabble.com/Wicket-Message-Dialog-Behavior-close-on-click-td4665557.html
https://github.com/martin-g/blogs/blob/master/wicket6-ajax-demo/src/main/java/com/wicketinaction/HandlebarsButton.java#L104

Best regards,

Sebastien.

[kapils....@gmail.com]

Thanks a lot.It worked

Br
Kapil