Question

我正在努力使 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)

Answer 1

如果在调用xeditable方法之前没有将带有id firstname的元素附加到DOM，则jquery将无法找到它。你可以通过发出警告来检查（$（'＃firstname'）。长度）;在您的可编辑的JSNI代码中。

我发现将元素传递给jquery更容易/更可预测。所以，绑定你的ui（即有一个@DataField Element firstname;然后将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;
}-*/;

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

1 个答案: