Document.get().getElementById(String) and $doc.getElementById(String) returning nulls

[giacomo]

Hi everyone!

SUMMARY
=========

I'm facing a problem with Document.get().getElementById(String) (in
Java) and $doc.getElementById(String) (in JavaScript) returning nulls.

My design goal is to define a <div> element in the Java code and add
it to the document, so that I can then retrieve it in the JSNI method
and use JavaScript libraries to draw stuff within it.

DESCRIPTION
============

To make problem description simpler, here is my GWT code:

1 protected void draw() {
2 String id = "divId";
3 HTML divElement = new HTML("<div id=\'" + id + "\'>Hello World</
div>");
4 getChartPanel().add(divElement); //getChartPanel() returns a Panel
5 Window.alert("The element ID is " + id);
6 Element element = Document.get().getElementById(id);
7 Window.alert("The GWT element ID is " + element.getId());
8 drawJS(id);
9 }
10
11 public static native void drawJS(String divID) /*-{
12 $wnd.alert("The JS element ID is " + divID);
13 var chartPanel1 = $doc.getElementById(divID);
14 $wnd.alert("The chart panel is " + chartPanel1);
15 var chartPanel2 = document.getElementById(divID);
16 $wnd.alert("The chart panel is " + chartPanel2);
17 chartPanel.innerHTML("Hello, World!");
18 }-*/;

When the draw() method is called I get the following:

i) Window on line 5 pops up with "The element ID is divId";
ii) Window on line 7 pops up with "The GWT element ID is null";
iii) Window on line 12 pops up with "The JS element ID is divId";
iv) Window on line 14 pops up with "The chart panel is null";
v) Window on line 16 pops up with "The chart panel is null"; and
vi) A JavaScriptException is raised in development mode at line 17:

-----------------------------------------------------------
09:50:16.235 [ERROR] [sensor_network] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (ReferenceError):
chartPanel is not defined
fileName: http://127.0.0.1:8888
lineNumber: 7
stack: ("divId")@http://127.0.0.1:8888:7
@:0
-----------------------------------------------------------

ANALYSIS
========

I inspected the Web page with FireBug and the <div> element with id =
"divId" DOES exist after it is added in the Java code. However,
neither the Java nor the JavaScript methods are able to retrieve it.

QUESTIONS
==========

i) What am I doing wrong and how do I fix it?

ii) Is there a better way to add a <div> element in Java and pass it
to a JavaScript method, so that the latter can use it to add stuff
(e.g., JavaScript-based charts) in it?

Thank you.

G.

[Daniel Simons]

i) The problem here is that you are trying to reference an element that has not yet been added to the dom.

Check where you are adding the element...most likely a you have a call to RootPanel.get().add(elem).  Be sure that this happens before calling getElementsById().

ii) I prefer to create my own Generic Widgets by extending ComplexPanel.  This is helpful because you can pass in any tag name that you'd like:

public class ContainerTag extends ComplexPanel{  

    public ContainerTag(String tagName) {  

        setElement(DOM.createElement(tagName));

    } 

}

Then you can use: ContainerTag div = new ContainerTag("div");

Daniel

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[giacomo]

Thank you for your reply.

I did know that I had to add the element before calling those methods,
but sure enough I had forgotten that the panel in line 4 hadn't been
added yet, as it was part of a cascade of constructors. Your reply
helped me point that one out.

Thanks,

G.

On Jul 1, 10:55 am, Daniel Simons <daniel.simo...@gmail.com> wrote:
> i) The problem here is that you are trying to reference an element that has
> not yet been added to the dom.
>
> Check where you are adding the element...most likely a you have a call to
> RootPanel.get().add(elem).  Be sure that this happens before calling
> getElementsById().
>
> ii) I prefer to create my own Generic Widgets by extending ComplexPanel.
>  This is helpful because you can pass in any tag name that you'd like:
>
> public class ContainerTag extends ComplexPanel{
>     public ContainerTag(String tagName) {
>         setElement(DOM.createElement(tagName));
>     }
>
> }
>
> Then you can use: ContainerTag div = new ContainerTag("div");
>
> Daniel
>

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .