Question

I am trying to integrate the jQuery Masonry library with my GWT project. However I cannot make the library to work with the containers and elements generated by GWT. But it does work if I rewrite the generated GWT HTML directly in my HTML page.

This how my GWT EntryPoint looks like

public class Sample implements EntryPoint {

    //In here the text has random lengths to achieve different div blocks to work with Masonry
    private HTML label1 = new HTML("Text..");
    private HTML label2 = new HTML("Text..");
    private HTML label3 = new HTML("Text..");
    private HTML label4 = new HTML("Text..");
    private Image image1 = new Image("images/samsung.jpg");
    private AbsolutePanel hPanel = new AbsolutePanel();

    public void onModuleLoad() {

        DOM.setElementAttribute(hPanel.getElement(), "id", "content");
        image1.setSize("230px", "400px");
        HTML html = new HTML(image1.toString());
        html.setStyleName("item");
        hPanel.add(html);

        label1.setStyleName("item");
        hPanel.add(label1);

        label2.setStyleName("item");
        hPanel.add(label2);

        label3.setStyleName("item");
        hPanel.add(label3);

        label4.setStyleName("item");
        hPanel.add(label4);

        RootPanel.get("wrapper").add(hPanel);

    }
}

I also have a css file declared like this:

#wrapper{
    margin: 0 auto;
    width: 1000px;
}

.item{
    padding: 10px 10px;
    width:230px;
    float: left;
}

This generates the following HTML code:

<div id="wrapper">
            <div id="header">
                <h1>JQuery, Masonry, GWT, GQuery Test</h1>
            </div>

        <div style="position: relative; overflow: hidden;" id="content">
            <div class="item">
                <img src="images/samsung.jpg" class="gwt-Image"
                    style="width: 230px; height: 400px;">
            </div>
            <div class="item" style="">
                Text
            </div>
            <div class="item">text</div>
            <div class="item" style="">text</div>
            <div class="item"><img src="images/samsung.jpg" class="gwt-Image"
                    style="width: 230px; height: 400px;">
            </div>
            <div class="item">text</div>
        </div>
    </div>

And finally in my HTML page I have the jQuery call which looks like this:

    <script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery-1.7.2.min.js"></script>

        <script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery.masonry.js"></script>

    <script type="text/javascript" charset="UTF-8">

    $(document).ready(function(){       

        $('#content').masonry();
    });
</script>

When I execute this GWT application the Masonry library will not work and will not render the expected output. However, when I copy the HTML generated by GWT and paste it directly into the HTML page the library will work correctly and will render the expected output.

I followed this tutorial in the Masonry website http://masonry.desandro.com/docs/intro.html . Can somebody point me out what could be the reason why this does not work with the GWT generated HTML??

Answer 1

At the time of your document ready the entrypoint has not been executed yet. So the DOM is not there yet.

To avoid this problem you could just use GWTQuery instead or call javascript from gwt signaling your DOM update. This would look something like this:

JavaScript:

function domUpdated(){
    //do you jquery stuff here...
}

GWT:

private native void tellJavascriptWeAreDone()/*-{
    $wnd.domUpdated();
}-*/;