PDA

View Full Version : Evaluting JavaScript in HtmlContainer



kpy3
29 Dec 2009, 9:11 AM
Hi,

I'm trying to embed custom script to my application via HtmlContainer:



HtmlContainer container = new HtmlContainer();
container.setId("properties_dialog");
container.setUrl(GWT.getModuleBaseURL() + "service/block/" + scriptBlock.getBlockId() + "-" + scriptBlock.getVersion());
container.setDeferDownload(true);
This code loads JavaScript from given URL but doesn'n evalute it. How it can be evaluted?

Arno.Nyhm
29 Dec 2009, 9:29 AM
maybe you better create a DOM element "SCRIPT" and use it to load a javascript.


as sample in the GXT zip file:

gxt/ui/client/data/ScriptTagProxy.java

in method load


the same with a css tag in:

gxt/ui/client/util/CSS.java

in the method addStyleSheet

sven
29 Dec 2009, 10:05 AM
The referenced informations are not 100% correct and hard to understand.

I suggest to use the GWT Document class:


ScriptElement script = Document.get().createScriptElement(url)

You will need to append that script element to the document than.

But i dont suggest to do that. You should compile the javascript you need in. With GWT2 you can also use runAsync to dynamically load your application.

kpy3
29 Dec 2009, 9:06 PM
Thanks for answer,

AFAIK, runAsync helps to reduce size (and time load) of compiled module by dividing compiled JavaScript to a smaller pieces, while I need to load compiled JavaScript from another (standalone) module dynamically. Is there any right way to do it with ExtGWT?

kpy3
29 Dec 2009, 11:15 PM
Here is a simple example what I trying to do (I replace getting JavaScript from server with a String):



import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.ScriptElement;

public class TestContainer extends LayoutContainer {

@Override
protected void afterRender() {
ScriptElement script = Document.get().createScriptElement(
"alert('1234');");
script.setLang("javascript");
script.setType("text/javascript");

el().dom.setInnerHTML(script.getString());

}

}


As result I see embedded javascript into DOM:


...
<div id="x-auto-45"> <script lang="javascript" type="text/javascript">
alert('1234');


</script>


</div>
...



but it doesn't evalute, so I don't see an alert window.

sven
30 Dec 2009, 2:31 AM
Do not set the innerhtml. append the domnode directly.

Arno.Nyhm
30 Dec 2009, 2:38 AM
as sample in the GXT zip file:

gxt/ui/client/data/ScriptTagProxy.java

in method load



why you dont look into the source code?

from gxt/ui/client/data/ScriptTagProxy.java # load


private Element head = XDOM.getHead();
[...]

Element script = DOM.createElement("script"); // <--- change this to the code like sven suggested
script.setAttribute("src", u); // <--- change this to the code like sven suggested
script.setAttribute("id", transId); // <--- remove - you not need it
script.setAttribute("type", "text/javascript"); // <--- use the script element methods like in your code
script.setAttribute("language", "JavaScript"); // <--- use the script element methods like in your code

head.appendChild(script); // <--- this append it to the dom




you you need for your code to add this line:



XDOM.getHead().appendChild(script);



and you NOT need a html container for this!

the script is added to the header on your page....

sven
30 Dec 2009, 2:39 AM
to make it even more simple:


el().appendChild(script);

Arno.Nyhm
30 Dec 2009, 2:42 AM
ok thats more simple.

it makes a difference to append the script to the element and to the header? or it is the same?

sven
30 Dec 2009, 2:44 AM
There is no differents. The only differents is there when loading the page initially. If it is in the head, the script has to be loaded before it parses the body. If it is in the end of the body, the page is already displayed.

The problem with setting innerhtml is that it does not get evaluated.

kpy3
30 Dec 2009, 2:45 AM
I looked to gxt/ui/client/data/ScriptTagProxy.java after post my test code and fix it. Now it works.

Thanks anyway. :)