Wicket：通过 Javascript 更新文本字段

Posted 2023-05-07

【中文标题】Wicket：通过 Javascript 更新文本字段

【英文标题】：Wicket: update of textfield via Javascript

【发布时间】：2017-08-29 18:15:42

【问题描述】：

我有这个问题。我正在使用 Wicket 7，并且我有一个包含 Bootstrap 的日期选择器的 html 页面。在Java方面，我无法拦截日期的更改。代码如下所示。

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");
    
);

如何拦截更改？

【参考方案1】：

datepicker 似乎不会触发“更改”事件，因此您必须自己动手：

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

阅读此处进行进一步讨论： Detect change to selected date with bootstrap-datepicker

【讨论】：

这似乎不适合我。我认为要触发的更改事件必须在 ID 为 startDate 的组件上进行，因为该组件附加了 onChangeAjaxBehavior()。对吗？

是的，你是对的：你必须在 '#startDate' 触发更改

【参考方案2】：

我解决了这个问题。问题是我在 BasePage 中使用了 2 个版本的 jQuery。不匹配导致触发器 javascript 端的启动丢失。