时间戳

首页 > 解决方案 > 单击ajax按钮时Jquery不起作用

wicket - 单击ajax按钮时Jquery不起作用

问题描述

我使用 jquery datepicker，单击 ajax 按钮后它不显示。
点击后有什么方法可以再次显示日期选择器？我使用检票口 8。
BasePage.java

public class BasePage extends WebPage {
    ...
}

BasePage.html

<body>
    ...
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jqueryui.min.js"></script>
    <script src="/js/main.js"></script>
</body>

主页.java

public class HomePage extends BasePage {
    public HomePage() {
        SearchForm searchForm = new SearchForm();
        Form<SearchForm> form = new Form<>(new CompoundPropertyModel<SearchForm>(searchForm))

        AjaxButton btn = new AjaxButton() {
            protected void onSubmit(AjaxRequest target) {
                // Handle search data
                ...
                target.add(form);
            }
        };

        TextField<String> date = new TextField<>("searchDate");
        form.add(date);
        form.add(btn);
    }
}

主页.html

<wicket:extend>
    <form wicket:id="form">
        <input wicket:id="searchDate" class="datepicker" />
        <button wicket:id="btn">Search</button>
    </form>
</wicket:extend>

main.js

$(function() {
    $(".datepicker").datepicker();
    ...
});

单击 ajax 按钮后，文件 main.js 中的所有脚本都不起作用
请帮助我。

标签： wicket

解决方案

当您通过 AJAX 更新表单时，您会替换其中的每个元素，其中包括您与 datepicker 一起使用的输入字段。但是这样做会丢失第一次加载页面时由 main.js 完成的 javascript 设置。您可以通过两种方式解决此问题。首先，您可以只更新那些需要刷新的元素，例如用于显示搜索结果的组件（我想您的代码中必须有这样的元素）。

第二种解决方案，更重和更复杂，是制作一个自定义 TextField 组件，每次呈现时执行 datepicker javascript 代码。可以在用户指南中找到此类解决方案的示例：https ://wicket-guide.herokuapp.com/wicket/bookmarkable/org.wicketTutorial.ajaxdatepicker.HomePage

我建议遵循第一个解决方案，因为它更自然、更简单，并且需要更少的代码。

更新：如果要刷新文本字段，另一个简单的解决方案是使用 target.appendJavaScript​ 重新应用 datepicker 插件：

target.add("$('#" + date.getMarkupId() + "').datepicker();");

这应该将日期选择器添加到新的字段中。

推荐阅读