使JQuery-UI插件與Errai協同工作

我正在嘗試使XEditable Jquery-ui插件與GWT/Errai協同工作。但是，當點擊所謂的「x-editable」字段時，沒有任何反應。出了什麼問題在我的代碼：使JQuery-UI插件與Errai協同工作

這是我的代碼：

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

更新：

錯誤我g等通過元件的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)

來源

2013-05-21 xybrek

，如果你不打電話給你的xeditable方法之前，ID firstname元素附加到DOM，jQuery將找不到它。你可以通過放置警報（$（'＃firstname'））來檢查。在你的可編輯的JSNI代碼中。

我發現將元素傳遞給jquery更容易/更可預測。因此，結合你的UI（即有@DataField Element firstname;，然後通過名字作爲一個參數爲xeditable和使用$（名字）.editable（...）

不過請注意，有些jQuery插件不上的元素工作。還未被附加到DOM可以確保小部件是安全的調用jQuery的前附：For what is the AttachEvent

編輯：更新的代碼看起來也錯了，你不需要用$ WND在前面。的警報，只能訪問主文檔框架中定義的全局變量（如jquery）。

這裏是一個N實施例，其中我這樣做與datatables.js jQuery插件：

private native JavaScriptObject _init(TableElement element) /*-{ 
    var c = $wnd.jQuery(element); 
    var dataTable = c.dataTable({ 
     "bAutoWidth" : false 
    }); 
    return dataTable; 
}-*/;

來源

2013-05-21 14:11:34

我想您的意見，但我得到上面的JavaScriptException錯誤... – xybrek

也 - 這是不是你的代碼的問題，但你確定xfield已初始化？你可能需要有'private Element xfield = DOM.createDiv（）;'（用你使用的任何元素替換Div）。你不能在元素中使用@Inject，因爲它們沒有構造函數。 –

我現在有︰@DataField private Element xfield = DOM.createElement（「a」）; – xybrek

使JQuery-UI插件與Errai協同工作

回答

相關問題