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

原文 标签 java jquery jquery-ui gwt errai

我正在尝试使XEditable Jquery-ui插件与GWT / Errai一起使用。
但是,单击所谓的“ x可编辑”字段时,什么也不会发生。我的代码可能出了什么问题:

这是我的代码:

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更容易/更可预测。因此,请绑定您的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;
}-*/;

关于java - 使JQuery-UI插件与Errai一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16669085/

相关文章:

java - 使用<applet>或<object>标记加载依赖的jar

javascript - 在按钮单击上禁用特定表单字段

jquery - 我想定位一个标签以外的body标签

java - 用多种颜色绘制路径

java - 计算数组中周末记录的数量

java - Java代码获取数据库表列中的所有值

javascript - 根据另一个选择的结果更改HTML <select>中的选项

javascript - 可拖动的两棵树

javascript - 将ID放入<select>内的<span>中

jquery - 使用滑动动画显示 Bootstrap 警报时的奇怪行为