我正在尝试制作 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)
最佳答案
如果在调用 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;
}-*/;
关于java - 让 JQuery-UI 插件与 Errai 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16669085/