Duplicating html elements with gwt elements on page load instead of replacing them

[mdhirsch30345]

I have a simple html file with two text boxes and a button.  I inject those three fields into my java class and add a clickHandler onto the button.  That's all it does at the moment.  In particular, it doesn't use the ErraiBus at all, and no RPC or other JSON communication is happening.

When the app runs, I can see that the PostConstruct is called, and RootPanel.get().add(this); is executed.  After that, I get an error message that there is trouble with parsing some JSON.  When I clear the error, I can see 4 text boxes and two buttons--every element is duplicated instead of being replaced.

I've attached my html, java and gwt.xml filed, and here are the logs I see:

Compositing @Replace [data-field=login] element [<button data-field="login" class="btn">Login</button>] with Component com.google.gwt.user.client.ui.Button [<button type="button" class="gwt-Button"></button>]

Compositing @Replace [data-field=userName] element [<input data-field="userName" type="text" placeholder="User name">] with Component com.google.gwt.user.client.ui.TextBox [<input type="text" class="gwt-TextBox">]

Compositing @Replace [data-field=password] element [<input data-field="password" type="password" placeholder="password">] with Component com.google.gwt.user.client.ui.TextBox [<input type="text" class="gwt-TextBox">]

com.google.gwt.json.client.JSONException: Error parsing JSON: SyntaxError: Unexpected token <

          at com.google.gwt.json.client.JSONParser.throwJSONException(JSONParser.java:91)

          at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

          at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)

          at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)

          at java.lang.reflect.Method.invoke(Method.java:597)

          at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

          at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

          at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

          at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)

          at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)

          at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)

          at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)

          at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)

          at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)

          at com.google.gwt.json.client.JSONParser.evaluate(JSONParser.java)

          at com.google.gwt.json.client.JSONParser.parse(JSONParser.java:213)

          at com.google.gwt.json.client.JSONParser.parseStrict(JSONParser.java:87)

          at org.jboss.errai.bus.client.json.JSONUtilCli.decodePayload(JSONUtilCli.java:59)

          at org.jboss.errai.bus.client.framework.ClientMessageBusImpl.procPayload(ClientMessageBusImpl.java:1581)

          at org.jboss.errai.bus.client.framework.ClientMessageBusImpl.procIncomingPayload(ClientMessageBusImpl.java:1575)

          at org.jboss.errai.bus.client.framework.ClientMessageBusImpl.access$8(ClientMessageBusImpl.java:1574)

          at org.jboss.errai.bus.client.framework.ClientMessageBusImpl$11.onResponseReceived(ClientMessageBusImpl.java:1265)

          at com.google.gwt.http.client.Request.fireOnResponseReceived(Request.java:287)

          at com.google.gwt.http.client.RequestBuilder$1.onReadyStateChange(RequestBuilder.java:395)

          at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

          at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)

          at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)

          at java.lang.reflect.Method.invoke(Method.java:597)

          at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

          at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

          at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

          at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:337)

          at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:218)

          at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)

          at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)

          at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)

          at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)

          at com.google.gwt.core.client.impl.Impl.apply(Impl.java)

          at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:213)

          at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)

          at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)

          at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)

          at java.lang.reflect.Method.invoke(Method.java:597)

          at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)

          at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)

          at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)

          at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:292)

          at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:546)

          at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)

          at java.lang.Thread.run(Thread.java:662)

I'm using errai 2.1 and gwt 2.4.0.

Clearly I'm missing something, but I can't figure out what it is.

Thanks,

Michael

[mdhirsch30345]

I've found half the solution.  I can eliminate the communication error by turning off communication to the server with:

    <!-- No server side communication -->

    <script type="text/javascript">

        erraiBusRemoteCommunicationEnabled = false;

    </script>

in my HTML <head>

But I'm still getting two copies af all the html elements.

Michael

[jfuerth]

Hi Michael,

It looks like the reason for the stack trace you pasted is that the Errai servlet that enables communication between the client and server bus is not configured properly (the unexpected '<' character is probably the beginning of a 404 page from the web server).

I know you said you're not using any client-server communication, but by default the Errai client always attempts to federate the client bus with the server bus. There is a manual "kill switch" that you can use to disable this. See https://docs.jboss.org/author/display/ERRAI/Client+Configuration

As for the duplicate UI issue, it looks like your whole Errai app is getting reinitialized without a page reload. This is probably becuase the bus federation process didn't complete. This might be a bug in the Errai client bootstrap process (I will file a JIRA to remind us to investigate it), but you could work around the issue by doing a RootPanel.get().clear() as the first thing in your entry point's @PostConstruct method.

Hope this helps,

Jonathan

[mdhirsch30345]

Thanks Jonathan,

Turning off the server side of the communication worked well to get past that error.  However, I'm still getting two copies of the HTML elements, even with RootPanel.get().clear()

My current theory is that I have an inadequate jetty config...

Michael

[mdhirsch30345]

Lincoln solved this for me in my other thread!  It turns out that I did not understand how the HTML file gets used.  In his example, there is one HTML file that that has an empty <div> with the id of "rootPanel" which loads the javascript.  The javascript reads the template file and instantiates the HTML elements, and finally inserts them into the rootPanel.

Now it all makes sense to me,  but I didn't see where this was clearly explained.  And I was confused by the messages in the log:

    Compositing @Replace [data-field=login] element [<button data-field="login" class="btn">Login</button>] with Component com.google.gwt.user.client.ui.Button [<button type="button" class="gwt-Button"></button>]

I thought this was actually replacing the elements with new ones.  In fact, it is only creating an element as indicated in the template.

Whew, I feel much better now.

Thanks, everyone, for your help.