How to getElemenetById in KitchenSink sample?

[jack.tang]

Hi all,

I extended my own sink and try to get some element when the sink is
shown, however, it faild. my code looks like:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;

public class TestASink extends Sink {
public static SinkInfo init(){
return new SinkInfo("TestA", "simple test"){
public Sink createInstance() {
return new TestASink();
}
};
}

private TestASink(){
VerticalPanel panel = new VerticalPanel();

HTML html = new HTML("<div id=box><h1>Just test</h1><p>One call.
Two parameters. Three sizes.</p></div>");
panel.add(new Label("Todo"));
panel.add(html);
setWidget(panel);

}

public void onShow(){
System.out.println("--->" + DOM.getElementById("box"));
}
}

the output is "--->null". So what's wrong in my code? Thanks

/Jack

[Scott Blum]

Hi Jack,

I'm guessing it's the "<div id=box>.." part. The "box" needs to be
quoted string within the quoted string of the inner HTML you're
passing. You should be able to use single-quotes '' or escaped double
quotes \"\" around it.

Alternatively, since the HTML itself creates a div to wrap your inner
HTML, you could do this:
HTML html = new HTML("<h1>Just test</h1><p>One call. Two parameters.
Three sizes.</p>");
DOM.setAttribute(html.getElement(), "id", "box");

Scott

[Azzah]

Hi Scott,

I'm having a very similar problem at
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/4d8cd3ba10ae4848/b56fe898e293c986?q=getelementbyid&rnum=2
that I was hoping you could help with...

Interestingly, your suggestion above of
DOM.setAttribute(html.getElement(), "id", "box"); won't actually cause
the div definition to be defined as id="box".

If you do a Window.alert(html.getElement() + ""), you'll find that it
hasn't been quoted (presumably because the compiler feels it doesn't
actually need to)!

Cheers,

Aaron Watkins
---------------------
My Site: http://www.goannatravel.com

[Azzah]

Hi Scott,

I've had no end of trouble setting and then accessing ids using GWT
1.0.21 (see the other thread). I've tried using your example (see code
below), but all alerts result in nulls! Do you have any further ideas?

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class JournalEditor extends Composite {

private HTMLPanel ta;
private String id;

private VerticalPanel panel;

public JournalEditor() {
super();
panel = new VerticalPanel();

id = HTMLPanel.createUniqueId();

ta = new HTMLPanel("<h1>FOO</h1>");
DOM.setAttribute(ta.getElement(), "id", "box");

panel.add(ta);
setWidget(panel);

Window.alert(DOM.getElementById("box") + "");
}

protected void onLoad() {
super.onLoad();
Window.alert(DOM.getElementById("box") + "");
}
}

Thanks for any help...

Aaron

[Scott Blum]

Hi Aaron,

It looks like you figured out the issue on the other thread. I'll
repeat my understanding of it here for the benefit of anyone reading
this thread.

Basically, you were doing a DOM.getElementById() for an element that
had been created, but hadn't been attached to the DOM yet. Trying to
do it from the constructor of the JournalEditor would definitely be
wrong, since JournalEditor (and therefore panel and ta) definitely
haven't been attached yet. In this case the caller is expected to
attach the JournalEditor (or it might not).

Doing it inside the onLoad() event seems like it should work, but in
fact does not work. I'm not sure why it doesn't work, Joel is looking
at this. But setting up a DeferredCommand inside of onLoad() does
work.

Correct me if that's inaccurate.

Thanks,
Scott

[Azzah]

Hi Scott,

That's spot on.

I'm a bit confused about why the DeferredCommand was required in the
onLoad - when Joel finds out, I would love to know why.

Cheers,
Aaron