JavaScript problem, help me!!

asked 2010-01-19 04:39:07 +0800

JoH gravatar image JoH
105 2 3

Dear all,

I have a problem implementing Jmol.js (molecular visualiser) in my web application. My application contains a list of data from my database and a visualisation of chemical structures of the data.
So, if include the jmol.js in a script tag (bolded in code), and then I call my application in web browser, the application with the list will show up for less than 1 second, and then the JavaScript will cover anything and the page will be loaded endlessly. The same will happen if I use include tag.

The crazy thing is also that if I separate this Jmol script to a new .zul and make a hyperlink (also bolded in code), then it works.

For practical purpose it's much better if I could include this in the same page. So whoever has an idea, please help me...


<?page id="UserGUI" title=" New ZUL Title" cacheable="false"
language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

<window id="guestWnd" title="Database Search" border="normal"
width="2100px" use="de.qcdb.lmu.window.FrontWindow">
<zscript language="Java">

public void download() {
Listitem li = items.getSelectedItem();
String filepath = ((de.qcdb.lmu.domain.Item)li.getValue()).getFilepath();
java.io.InputStream is = desktop.getWebApp().getResourceAsStream(filepath);
Filedownload.save(is, "text/plain", filepath);

} }

<!-- public void view() {
Listitem li = items.getSelectedItem();
String filepath = ((de.qcdb.lmu.domain.Item)li.getValue()).getFilepath();

<script src="./jmol/Jmol.js" type="text/javascript"
<script type="text/javascript" xmlns:n="http://www.zkoss.org/2005/zk/native">

<row align="center">
Chemical Formula
<textbox width="99%" id="strform" />
<button id="search1" label="Search" onClick="guestWnd.submit()" />
<hbox width="200px">
Example: C3H6B1N1O1
<hbox width="30px">
<image src="/images/info1.png" popup="info1" style="cursor:pointer" />
<label popup="info1" />
<hbox width="200px">
<popup id="info1" width="400px">
<html>Chemical formula is strictly defined by IUPAC
X: Further elements are to
be sorted by their
atomic number.
<row align="center">
<textbox id="description" width="99%" />
<button id="search2" label="Search" onClick="guestWnd.submit1()" />
<hbox width="200px">
Example: oxazole-borane
<hbox width="30px">
<image src="/images/info1.png" popup="info2" style="cursor:pointer" />
<label popup="info2" />
<hbox width="200px">
<popup id="info2" width="400px">
<html> The description should simple and clear.
oxazole-borane will show items which contain oxazole borane
Keyword cysteine will show items which contain all
protein structures
with amino acid cysteine.
<row align="center"> <hbox></hbox> Advance Search <hbox></hbox>

<hbox width="200px"> Example: </hbox> <hbox width="30px"> <image
src="/images/info1.png" popup="info3" style="cursor:pointer" />
<label popup="info3" /> </hbox> <hbox width="200px"> </hbox> <popup
id="info3" width="400px"> <html> Not Yet! </html> </popup> </row>
<row align="center"> Description <textbox id="tb_description"
width="99%" /> <button id="search4" label="Search"
onClick="guestWnd.submit3()" /> </row> <row align="center">
Multiplicity <textbox id="tb_multi" width="99%" /> </row> <row
align="center"> Charge <textbox id="tb_charge" width="99%" />

<row align="center">
<button label="Advance Search" onClick="guestWnd.onSearch()" />
<row align="center">

<button label="Download the selected file" onClick="download()" />
<row align="center">

<button label="View structures" href="http://localhost:8080/QCDB/jmol.zul" />



<separator />
<borderlayout height="25px" width="100%"><north height="25px" title="General Item"></north></borderlayout>
<listbox id="supitems" width="2090px" mold="paging" pageSize="10"
<listheader sort="auto" width="10%" label="Index I" />
<listheader sort="auto" width="10%" label="Chemical formula" />
<listheader sort="auto" width="60%" label="General Description" />
<listheader width="10%" label="Multiplicity" />
<listheader width="10%" label="Charge" />
<separator />
<button label="Get Details" onClick="guestWnd.showListI()" />
<textbox width="200px" id="tb_idxa" readonly="true" />

<separator />
<borderlayout height="25px" width="100%"><north height="25px" title="Detailed Item"></north></borderlayout>
<listbox id="items" width="2090px" mold="paging" pageSize="10">
<!--onCreate="guestWnd.showListI()" -->
<listheader width="190px" label="Index I" />
<listheader width="190px" label="Index II" />
<listheader width="190px" label="File Path" />
<listheader width="190px" label="Chemical formula" />
<listheader width="190px" label="Description" />
<listheader width="190px" label="Methods" />
<listheader width="190px" label="Basis Set" />
<listheader width="190px" label="Info" />
<listheader width="50px" label="PG" />
<listheader width="50px" label="ES" />
<listheader width="70px" label="Multiplicity" />
<listheader width="50px" label="Charge" />
<listheader sort="auto" width="190px" label="Energy" />
<listheader sort="auto" width="190px" label="Enthalpy" />
<separator />
<button label="Back to Login" onClick="guestWnd.onBack()" />



delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2010-01-19 20:48:30 +0800

samchuang gravatar image samchuang
4084 4

Hi ~~

Could you try <?script src="/js/XXX.js" ?>, this will include javascript to head, try if this could solve your problem

link publish delete flag offensive edit

answered 2010-01-20 04:25:06 +0800

JoH gravatar image JoH
105 2 3


Thank you for your reply first.
I tried your suggestion but failed. I think this is an incompatibility of ZK with Jmol. Somehow if I use iframe and put the source, it works. Since nobody has a lot of experience with ZK/Jmol, it is hard to find any hint.
Does anybody have another solution?

link publish delete flag offensive edit

answered 2010-01-20 13:13:01 +0800

kesavkolla gravatar image kesavkolla
180 3

The include tag is really not a iframe type of thing. The include actually puts a div tag and makes all the html from the include file into the main file. So if the include file have any script tags in it it will be inline script tags not same as <?script?>. You have to keep <?script?> in the main page and include pages you can use only inline scripts.

The other thing is you will have to wait till the zk elements are finished before you do the jmol initialization. I'd suggest throw the joml.js in the main page itself and in your include file have the inline script to initialize the actual visualization.

Also use zk.afterMount(function() {}); so that your visualization actually starts after zk mounts all it's widgets.


link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2010-01-19 04:39:07 +0800

Seen: 740 times

Last updated: Jan 20 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More