java - 让 JQuery-UI 插件与 Errai 一起使用

Question

我正在尝试制作 XEditable Jquery-ui 插件与 GWT/Errai 配合使用。然而，当点击所谓的“x-editable”字段时，什么也没有发生。我的代码可能有什么问题:

这是我的代码:

Java:

@Dependent
@Page
@Templated
public class XeditableTest extends Composite {

    @DataField
    private Element xfield;

    @PostConstruct
    public void setup() {
        xeditable(xfield);
    }

public static native void xeditable(Element el) /*-{
    $wnd.alert($wnd.$(el).length);
    $wnd.$(function(){      
            $wnd.$.fn.editable.defaults.mode = 'inline';
            $wnd.$(el).editable({
                validate: function(value) {
                   if($wnd.$.trim(value) == '') return 'This field is required';
                }
            });
        }
    )
}-*/;

    @EventHandler("xfield")
    public void onAnchorClicked(ClickEvent clickEvent) {
        clickEvent.preventDefault();
    }   

}

模板:

<div class="control-group">
    <a href="#" data-field="xfield" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-original-title="Enter your firstname" class="editable editable-click editable-empty">Empty</a>
</div>

更新:

将 Element 传递给 xeditable 方法后出现错误:

ERROR] Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot read property 'defaults' of undefined
[ERROR]     at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
[ERROR]     at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
[ERROR]     at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
[ERROR]     at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
[ERROR]     at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
[ERROR]     at com.myapp.client.local.XeditableTest.xeditable(XeditableTest.java)
[ERROR]     at com.myapp.client.local.XeditableTest.setup(XeditableTest.java:53)

Answer 1

如果在调用 xeditable 方法之前没有将 id 为 firstname 的元素附加到 DOM，jquery 将找不到它。您可以通过输入以下命令进行检查:alert($('#firstname').length);在您的可编辑 JSNI 代码中。

我发现将元素传递到 jquery 更容易/更可预测。因此，绑定(bind)您的用户界面(即，有一个 @DataField Element firstname; ，然后将名字作为参数传递给 xeditable 并使用 $(firstname).editable(... )

但请注意，某些 jquery 插件不适用于尚未附加到 DOM 的元素。您可以通过在调用 jquery 之前确保附加小部件来确保安全:For what is the AttachEvent

<小时/>

编辑:您更新的代码看起来错误。另外，您不需要在警报前面添加 $wnd，只需访问主文档框架中定义的全局变量(例如 jquery)即可。

这是我使用 datatables.js jquery 插件执行此操作的示例:

private native JavaScriptObject _init(TableElement element) /*-{
    var c = $wnd.jQuery(element);
    var dataTable = c.dataTable({
        "bAutoWidth" : false
    });
    return dataTable;
}-*/;