Question

after hours of searching and trying, I decided to ask here.

JqmHeader.java

public class JqmHeader extends ComplexPanel {

    public JqmHeader() {
        setElement(DOM.createDiv());
        getElement().setAttribute("data-role", "header");
    }

    public void add(Widget widget) {
        super.add(widget, getElement());
    }
}

JqmPage.java

public class JqmPage extends ComplexPanel {
    ...

    public JqmPage(String id) {
        setElement(Document.get().createDivElement());
        getElement().setAttribute("data-role", "page");
        getElement().setAttribute("data-url", id);

        RootPanel.get().add(page);
        render(page.getId());
    }

    private native void render(String id) /*-{
        $wnd.$("#" + id).page();
    }-*/;

    ...
}

MyPage.java extends JqmPage.java

...

JqmHeader header = new JqmHeader();
Button b = new Button("TestButton");

b.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        Window.alert("TestButton clicked");
    }
});

header.add(b);
this.add(header);

...

My Problem

So, my Problem is, that the ClickHandler from the Button in the header bar doesn’t fire. If I add the Button not to the header, but to the “RootPage”, like

this.add(b)

, everything works.

I think it must lie at the jquery-mobile header implementation. Are there any workarounds /ideas?

Thanks from Berlin,
Alex

Answer 1

JQuery Mobile swallows the events on headers so they are not propagated to GWT. What I did in solving this for jqm4gwt (https://github.com/sksamuel/jqm4gwt) was to have a general listener on the page level and then compare event source. If it was a button in the header then I fire that event on the button manually.

Take a look at bindHeaderEvents in https://github.com/sksamuel/jqm4gwt/blob/master/src/main/java/com/sksamuel/jqm4gwt/JQMPage.java

Also, the jqm4gwt project might be a good solution for you to save you having to invent all these widgets yourself.