Loading jsmol from external javascipt file
JavaScript-Based Molecular Viewer From Jmol
Brought to you by:
hansonr
Menu
▾
▴
Hi,
Here ehat I try to do: I would like to display n molecules with jsmol. In a external javascript function, n is "learned" and I would like to create n jsmol windows to display my molecules. I have no clue hoe to do that. For now I am loading jsmol directly in a div in my html file:
You would just create as many divs as you need, giving them different names
and probably different Info
More information can be found from the Jmol user list --
https://lists.sourceforge.net/lists/listinfo/jmol-users
On Fri, Mar 13, 2015 at 5:54 AM, Bomble laetis@users.sf.net wrote:
--
Robert M. Hanson
Larson-Anderson Professor of Chemistry
Chair, Department of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr
If nature does not answer first what we want,
it is better to take what answer we get.
-- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900
It is what I did. But ideally I would like to load "dynamically" because I don't know in advance how many div I will need. Thus ideally I would like to create divs in a javascript file and do the Jmol.getApplet("jmolApplet1", Info) there. But it is not working, most probably I am not giving properly the info.
Best
Last edit: Bomble 2015-03-17
send a copy of the html or a link to where it is not working, and I will
check to see why.
On Tue, Mar 17, 2015 at 7:58 AM, Bomble laetis@users.sf.net wrote:
--
Robert M. Hanson
Larson-Anderson Professor of Chemistry
Chair, Department of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr
If nature does not answer first what we want,
it is better to take what answer we get.
-- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900
Hi,
In my htlm here what I have for now:
<script type="text/javascript"> var Info = { width: 150, height: 150, serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php", use: "HTML5", j2sPath: "jsmol/j2s", allowjavascript: true, </script>.... with a lot of jsmolwindow div that I will display later if needed, here the js external code that is loaded images:
for (i_comp=0;i_comp<n_components;i_comp++){
scr = document.createElement('script');
scrt_var =RUserDir+"MOLECULE"+(i_comp+1)+"/conformer1_geoDFT.sdf";
scr.type = 'text/javascript';
jsname="jmolApplet"+(i_comp+1);
scr.innerHTML="Jmol.script("+jsname+",'load "+scrt_var+"');";
divname="jsmolwindow"+(i_comp+1);
div=document.getElementById(divname);
div.appendChild(scr);
document.getElementById(divname).style.display = 'inline-block';
}
In this loop (that is not in my html file) I would like to create the number of div I need (that's easy) and apply the "jmolApplet1=Jmol.getApplet("jmolApplet1", Info);" command. This is what I am not performing to do, I think it is because I am not giving properly the Info. Or maybe all the "links" at the beginning of the html file ned to be also put, all these " <script type="text/javascript" src="ketcher/prototype-min.js"></script>".
Thanks for help and tips.
Best way is to make sure all this is executed after page loading:
$(document).ready(function() {
$("#jsmolwindow" + 1).html(Jmol.getAppletHtml("jmolApplet" + 1, Info))
..... ...// change info here
$("#jsmolwindow" + 2).html(Jmol.getAppletHtml("jmolApplet" + 2, Info))
// change info here
...
})
On Wed, Mar 18, 2015 at 2:45 AM, Bomble laetis@users.sf.net wrote:
--
Robert M. Hanson
Larson-Anderson Professor of Chemistry
Chair, Department of Chemistry
St. Olaf College
Northfield, MN
http://www.stolaf.edu/people/hansonr
If nature does not answer first what we want,
it is better to take what answer we get.
-- Josiah Willard Gibbs, Lecture XXX, Monday, February 5, 1900
Hi,
Sorry for long absence, I was so desperate I drop this for a time but I really need it, thus... back...
Still aiming to do the same thing I am first trying to do something simpler. I'm just trying to load a jsmol from a external js file. The thing is that if I am in the html file when loading jsmol it is all fine. Frome other js file it is not working.
For example in my HTML I have this:
It works just fine.
Let's say I don't want to put this in the HTML but in n external jsfile. I created a button and when the button is clicked, the following function is called:
ui.onClick_exec_optimizer=function()
{
var scrijsmol= document.createElement('script');
scrijsmol.type = 'text/javascript';
scrijsmol.innerHTML="var Info = {width: 150,height: 150, serverURL: 'http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php', use: 'HTML5', j2sPath: 'jsmol/j2s', allowjavascript: true,}; jmolApplet0 = Jmol.getApplet('jmolApplet0', Info); Jmol.script(jmolApplet0,'load bucky.sdf');";
var divjsmol=document.getElementById('jsmolwindow');
divjsmol.appendChild(scrijsmol);
document.getElementById('jsmolwindow').style.display = 'inline-block';
return;
}
and in HTML I just have:
Then when I clicked on the button to load jsmol, all my page is going away and I just have the following text: Jmol._Canvas2D (Jmol) "jmolApplet0"[x]
with no image loading.
Any idea about what is so wrong in this simple copy-pasting from html to external js?
Thanks very much for your time and help.
Best