GWT Tip: Don’t use your module name as the id of an HTML element in your page.

I spent a few hours tracking down and fixing something in our GWT application over the last couple of days, and thought I would blog about it in case someone reading this blog (maybe me in the future) runs into this same issue. The issue was simply that my external JavaScripts stopped working.

The stage: I was doing some major refactorings of the application. For the most part this involved moving files around, changing class and package names, etc. After this was done the application appeared to still work, but it didn’t. My external JavaScripts were not being executed. Well, debugging external JavaScripts within GWT is exactly the same as debugging it outside of GWT. Just fire up your favorite JS debugger – I used Firebug here, and set your breakpoints.

Debugging: I set 2 breakpoints. One in my external JavaScript file, and one in the code that uses it. The debugger stopped in my JS file, so I knew the browser was successfully loading my scripts and I could see that my objects were being declared. After “go”-ing, the debugger then stopped at the other breakpoint, but there, my objects were undefined…?!. This immediately signaled to me that my JavaScript and calling code were probably in different documents within the page. I searched the dom to see that my calling code was in an iframe that was named the same as my module name…

It turns out, this is the way GWT does things. When you load the page, the GWT *.nocache.js file creates an iframe in your page that has the id of your module, something like this (module name highlighted):

<iframe src=”javascript:”” id=”testiframeid” style=”position: absolute; width: 0pt; height: 0pt; border: medium none;” tabindex=”-1″>

Well, this all worked before I did my refactoring, and since the clues pointed to different documents, it seemed that this iframe could be the issue. I had renamed my module too, so I searched for another DOM element with this id. There was one. This was the problem. My DOM had 2 elements with the same id.

The fix: I changed the module name in the *gwt.xml file. ex. <module rename-to=’testiframeid‘> I could have changed the id of the other div, but since this was code that someone else wrote, I wasn’t completely sure if this id was needed for other functionality.

I tried this in a stand-alone GWT project to confirm this was always a problem. This only takes a few minutes to try. Steps:

Create a new GWT application
Compile/Run – no problems
Insert a dom element with the same id as your module name (defined in *.gwt.xml : <module rename-to=’testiframeid‘>)
Compile/Run – Application will not work.

This is the body of the main GWT html file that is created when you create a new GWT application. See the highlighted div. Because it has the same id as the GWT module name, it breaks the application.

<body>

    <!– OPTIONAL: include this if you want history support –>

    <!– RECOMMENDED if your web app will not function without JavaScript enabled –>
    <noscript>
      <div style=”width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif”>
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <h1>Web Application Starter Project</h1>
    <div id=”testiframeid”>The existence of this div will break the page.</div>
    <table align=”center”>
      <tr>
        <td colspan=”2″ style=”font-weight:bold;”>Please enter your name:</td>
      </tr>
      <tr>
        <td id=”nameFieldContainer”></td>
        <td id=”sendButtonContainer”></td>
      </tr>
      <tr>
        <td colspan=”2″ style=”color:red;” id=”errorLabelContainer”></td>
      </tr>
    </table>
</body>

2 Responses to GWT Tip: Don’t use your module name as the id of an HTML element in your page.

thanks says:

June 9, 2011 at 5:24 pm

i got the same problem and took 1 hours for debug. thanks for your tip. btw the sample code of the book “Google Web Toolkit Applications” made the same mistake!!

dan says:

November 16, 2012 at 2:43 pm

Oh my Lord. After a merry 24 hours making great progressteaching myself GWT, I spent another 24 hours battling this same issue. Finally figured out the problem, at which point I found this reference. Always nice to find someone who went through the same chain of irrationality.