Calling JQuery function from GWT

Question

I'am starting a project Using GWT, the designer team made a prototype using HTML and JQuery. I 'am actualy using UIBinder to 'rebuild' the UI. My problem is the application has a drop down menu that use JQuery... and it's not working

What I tried so far is I used a HTMLPanel in UIBinder XML and insert the menu, I keeped the .js file and reference them in the HTML file hoping that the actions will be picked up... but no luck.

This is menu.ui.xml, the menu is displayed but no mouse over

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<!-- menu --> 
 <ul id="menu"> 
    <li class="home"><a href="#"><span>Accueil</span></a></li> 
    <li class="configuration"> 
        <g:Anchor ui:field="configurationButton" href="#">
                                   <span>Configuration</span></g:Anchor> 
        <div class="submenu"> 
            <div class="group"> 
                <ul> 
                    <li> 
                        <a href="#">Fiches de configuration</a> 
                        <ul> 
                            <li><a href="#">Organisme</a></li> 
                            <li><a href="#">Groupe opérationnel</a></li> 
                            <li><a href="#">Unité opérationnelle</a></li> 
                            <li><a href="#">Immeuble</a></li> 
                        </ul> 
                    </li> 
                </ul>                    
            </div> 
        </div> 
    </li> 
    <li class="audit"><a href="#"><span>Audit</span></a></li> 
    <li class="result"><a href="#"><span>Résultats</span></a></li> 
    <li class="scenario"><a href="#"><span>Scénarios</span></a></li> 
    <li class="document"><a href="#"><span>Documents</span></a></li> 
 </ul>
<!-- menu.end -->   
</g:HTMLPanel>

the JQuery code which is in a separated file common.js

$('#menu').find('submenu').each(function(){
alert("inside");
    var totalWidth = 0;
    $(this).children().each(function(){
        totalWidth += $(this).outerWidth();
    }).end().css({
        'display'   : 'none',
        'width'     : totalWidth
    });
}).end().css({
    'overflow'  : 'visible'
});

EntryPoint

public class M3T implements EntryPoint {    
 public void onModuleLoad() {       
    Menu menu = new Menu();
    RootPanel.get("menuwrapper").add(menu);     
}
}

In the HTML I have a div where the menu is inserted

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> 
<script src="js/jquery.lib.min.js" type="text/javascript"></script> 
<script src="js/common.js" type="text/javascript"></script> ...

<div id="menuwrapper"> </div>

Is there any way to make it work without using GQuery or JSNI

Thanks

Answer 1

I tried the solution by elvispt, it works. In the JSNI code, I had to replace $ with $wnd.jQuery because otherwise it doesn't compile .

I tried also a second solution which I decide to implement : Instead of using a wrapper around Menu, I overided onAttach() in the Menu class it self and call bind

import com.google.gwt.core.client.GWT;     
public class Menu extends Composite  {

    private static MenuUiBinder uiBinder = GWT.create(MenuUiBinder.class);    
    interface MenuUiBinder extends UiBinder<Widget, Menu> {}        

    public Menu() {
        initWidget(uiBinder.createAndBindUi(this));
    }

     @Override
     public void onAttach() {
         super.onAttach();
         bind();
     }      

     private static native void bind() /*-{
          $wnd.jQuery('#menu').find('.submenu').each(function(){
         alert("inside");
           var totalWidth = 0;
            $wnd.jQuery(this).children().each(function(){
              totalWidth +=  $wnd.jQuery(this).outerWidth();
           }).end().css({
          'display'   : 'none',
          'width'     : totalWidth
           });
         }).end().css({
           'overflow'  : 'visible'
         });
     }-*/;      
}

Thanks again

Answer 2

Wrapp the uiBinder generated class in a SimplePanel then override the onAttach() method

Since the generated class is menu:

Create another class, name it for example: menuCaller

    public class menuCaller extends SimplePanel {

        menu menuWrap = new menu();

        public menuCaller() {
            add(menuWrapp);
        }

        @Override
        public void onAttach()
        {
            super.onAttach();
            bind();
        }

            private static native void bind() /*-{
                $('#menu').find('submenu').each(function(){
                    alert("inside");
                      var totalWidth = 0;
                      $(this).children().each(function(){
                         totalWidth += $(this).outerWidth();
                      }).end().css({
                     'display'   : 'none',
                     'width'     : totalWidth
                      });
               }).end().css({
                      'overflow'  : 'visible'
                   });
        }-*/;
    }