如何在调用Wicket Ajax提交按钮后调用jQuery函数

Question

我有一个表单，其中包含一个提交按钮，但这是由Wicket的AjaxButton类实现的。当HTML页面呈现时，Wicket会为该提交按钮动态地保留一个javascript onClick方法。

我想在Wicket的onClick方法完成后使用JQuery执行一些操作。我该怎么做？

- jgg

Answer 1

如果使用正确，使用JQuery或其他JavaScript库在Wicket中可以很好地工作。

首先，您需要确保该库存在。通常使用JavascriptPackageResource来实现。

add(JavascriptPackageResource.getHeaderContribution("/path/to/jquery.js"));

将以下代码放在构造函数、动态初始化器或者 onBeforeRender() 中:

接下来，确保：

1. 你的组件有一个ID (使用 Component.setOutputMarkupId(true))，以及
2. 你在JQuery函数中使用正确的ID (通过 Component.getMarkupId() 来获取ID)

这里有一个例子：当点击按钮时，按钮会变成蓝色:

add(new AjaxButton("id"){

    private static final long serialVersionUID = 1L;

    @Override
    protected void onSubmit(AjaxRequestTarget target, Form<?> form){
        target.appendJavascript(
            "$('#" +getMarkupId() +"').css({'background':'blue'})");
    }
}.setOutputMarkupId(true));

- Sean Patrick Floyd

Answer 2

protected void onClick(AjaxRequestTarget target){
   target.appendJavascript("alert('hello');");
)

- black666

---

在appendJavascript中，如果您传递任何JQuery函数名称，它将无法正常工作。对于像alert这样的简单javascript来说是可以的。 - jgg

如果它不能正常工作，那么你可能做错了什么。它应该是这样工作的。 (+1) - Sean Patrick Floyd