0

I'm trying to make the XEditable Jquery-ui plugin work with GWT/Errai. However, when clicking the supposedly "x-editable" field nothing happens. What could be wrong in my code:

This is my code:

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();
    }   

}

Template:

<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>

Update:

Error I get after passing Element to the xeditable method:

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

firstnamexeditable メソッドを呼び出す前にid を持つ要素を DOM にアタッチしないと、jquery はそれを見つけられません。alert($('#firstname').length); を入力して確認できます。xeditable JSNI コードで。

要素をjqueryに渡す方が簡単で予測しやすいことがわかりました。したがって、UIをバインドします（つまり、を持って@DataField Element firstname;から、firstnameを引数としてに渡し、xeditable$（firstname）.editable（...）を使用します

ただし、一部の jquery プラグインは、まだ DOM にアタッチされていない要素では機能しないことに注意してください。jqueryを呼び出す前にウィジェットがアタッチされていることを確認することで安全になります:

編集:更新されたコードが間違っているようです。また、アラートの前に $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 に答える