Wicket: update of textfield via Javascript

Question

I have this problem. I am using Wicket 7, and I have an HTML page that includes a Bootstrap's datepicker. I can't intercept, in Java side, the change of the date. The code is showed below.

HTML:

<div class="input-group date availability-date" id="iwb-availability-checkin" data-date-format="yyyy-mm-dd" data-date="2012-02-20" data-value="2017-04-02">
    <span class="datepicker-holder"><strong>2</strong>/Aprile</span>
    <input wicket:id ="inizio" name="checkin" id="startDate" type="text" value="" class="form-control hidden" />
    <span class="input-group-addon"><i class="fa fa-angle-down"></i></span>
</div>

<script>
    $(function () {
        window.prettyPrint && prettyPrint();

        var startDate = new Date();
        var endDate = new Date();
        $('#iwb-availability-checkin').datepicker().on('changeDate', function (ev) {
            console.log("Cambio data check in");

            if (ev.date.valueOf() > endDate.valueOf()) {
                $('#alert').show().find('strong').text('The start date can not be greater then the end date');
            } 
            else {
                console.log(ev.date);

                $('#alert').hide();
                startDate = new Date(ev.date);
                $('#startDate').text($('#iwb-availability-checkin').data('date'));
                console.log($('#startDate').val());
            }

            $('#iwb-availability-checkin').datepicker('hide');
        });

        $('#iwb-availability-checkout').datepicker().on('changeDate', function (ev) {
            console.log("Cambio data check out");

            if (ev.date.valueOf() < startDate.valueOf()) {
                $('#alert').show().find('strong').text('The end date can not be less then the start date');
            } 
            else {
                $('#alert').hide();
                endDate = new Date(ev.date);
                $('#endDate').text($('#iwb-availability-checkout').data('date'));
                console.log($('#endDate').val());
            }

            $('#iwb-availability-checkout').datepicker('hide');
        });
    });
</script>

JAVA:

inizio = new TextField("inizio", new PropertyModel(this, "inizioField"));
inizio.setOutputMarkupId(true);
inizio.setOutputMarkupPlaceholderTag(true);
add(inizio);

inizio.add(new OnChangeAjaxBehavior() {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        System.out.println("Cambio data check-in");
    }
});

How can I intercept the change?

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

datepicker doesn't seem to trigger a "change" event, so you'll have to do that for yourself:

.on('changeDate', function (ev) {
  ....
  $('#iwb-availability-checkin').datepicker('hide');
  $('#iwb-availability-checkin').change();
}

Read here for further discussion: Detect change to selected date with bootstrap-datepicker

edited May 23 '17 at 11:54

Community

1
1

answered Apr 04 '17 at 14:25

svenmeier

5,681
17
22

It seems not working for me. I supposed that the change event to trigger must be make on the component with id startDate, because is this component that have attached the onChangeAjaxBehavior(). It is correct? – Matteo Rossi Apr 04 '17 at 15:15
Yes, you're right: You have to trigger the change on '#startDate' – svenmeier Apr 12 '17 at 09:29

score 0 · Answer 2 · answered Apr 05 '17 at 07:29

0

I resolve the problem. The problem is that I use 2 version of jQuery inside my BasePage. The mismatch has caused the missing launch of the trigger Javascript side.

answered Apr 05 '17 at 07:29

Matteo Rossi

95
3
11

Wicket: update of textfield via Javascript

2 Answers2