java - Making JQuery-UI Plugin work with Errai -

i'm trying make xeditable jquery-ui plugin work gwt/errai. however, when clicking supposedly "x-editable" field nothing happens. wrong in code:

this 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 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 firstname" class="editable editable-click editable-empty">empty</a> </div> 

update:

error after passing element xeditable method:

error] caused by: com.google.gwt.core.client.javascriptexception: (typeerror): cannot read property 'defaults' of undefined [error]     @ com.google.gwt.dev.shell.browserchannelserver.invokejavascript(browserchannelserver.java:248) [error]     @ com.google.gwt.dev.shell.modulespaceoophm.doinvoke(modulespaceoophm.java:136) [error]     @ com.google.gwt.dev.shell.modulespace.invokenative(modulespace.java:561) [error]     @ com.google.gwt.dev.shell.modulespace.invokenativevoid(modulespace.java:289) [error]     @ com.google.gwt.dev.shell.javascripthost.invokenativevoid(javascripthost.java:107) [error]     @ com.myapp.client.local.xeditabletest.xeditable(xeditabletest.java) [error]     @ com.myapp.client.local.xeditabletest.setup(xeditabletest.java:53) 

if don't attach element id firstname dom before call xeditable method, jquery won't find it. can check putting alert($('#firstname').length); in xeditable jsni code.

i find easier/more predictable pass element jquery. so, bind ui (ie, have @datafield element firstname; , pass firstname argument xeditable , use $(firstname).editable(...)

note however, jquery plugins don't work on elements not yet attached dom. can safe ensuring widget attached before calling jquery: for attachevent

---

edit: updated code looks wrong. also, don't need $wnd in front of alert, access globals (like jquery) defined in main doc frame.

here example datatables.js jquery plugin:

private native javascriptobject _init(tableelement element) /*-{     var c = $wnd.jquery(element);     var datatable = c.datatable({         "bautowidth" : false     });     return datatable; }-*/;