0

我正在尝试使XEditable Jquery-ui 插件与 GWT/Errai 一起使用。但是，当单击所谓的“ x-editable ”字段时，什么也没有发生。我的代码可能有什么问题：

这是我的代码：

爪哇：

@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)
4

1 回答 1

1

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

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

但是请注意，一些 jquery 插件不适用于尚未附加到 DOM 的元素。您可以通过在调用 jquery 之前确保附加小部件来确保安全：对于 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;
}-*/;
于 2013-05-21T14:11:34.740 回答