Menu
▾
▴
Re: [Jmol-developers] JSmol removes all html when Jmol.getApplet called
|
From: Shane Ó C. <spi...@gm...> - 2013-03-28 00:46:13
|
Hi Bob,
Thanks for the help. I also realize now that I should have posted this to
the users' list so my apologies for that.
Thanks for explaining what the error message means. I am using Chrome but I
am developing on a web site so all files are server-side.
I figured out that one problem I was having was related to the div
containing the HTML5 applet being set to hidden. When the div was made
visible, the graphics were distorted. Similar problems happened when the
div element was moved inside the DOM. I think this was related to the
version I was using (v13.1.13) as I tried this again using the zipfile
dated 24th March and the canvas now appears correctly once I set the div to
be visible which is great. I also really appreciate the JSmol.min.nojq.js
build.
My current situation is as follows:
In the HTML template:
- I define Info and jmolApplet0 as global variables
- Inside $(document).ready(function(), I call Jmol.setDocument(0);
- The HTML defines
<div id="jmol_panel" style='display:none'>
<button type="button" onclick="Jmol.script(jmolApplet0, 'spacefill
on;')">press</button>
<script type="text/javascript">jmolApplet0 =
Jmol.getApplet("jmolApplet0", Info);</script>
</div>
In my jQuery plugin, I have a button to upload a PDB file. Inside the
upload handler, I call:
Jmol.script(jmolApplet0, 'load /javascript/jsmol/data/mypdb.pdb;')
//$("#jmol_panel").appendTo("#JSmol_control");
$("#jmol_panel").show()
which loads the PDB file I want to display and makes the applet visible.
The button turns spacefill on as a simple scripting test. This all works
fine.
However, I have the following problem. The applet above is defined in the
main template HTML whereas I want it to be positioned inside a jQuery
plugin which is added to the page. The reason I define the div in the main
template, outside the jQuery plugin, and then move it inside is because
defining the applet div inside the control did not work for me (problems
with document loading?). The line commented out in the last section moves
the applet to where I want it to be but if I uncomment the line to move the
applet, the spacefill button ceases to work although no error is given.
Other commands do not work either. Do you think the coverImage
functionality be able to fix my problem?
Finally, is it possible to pass JSmol an array of characters (the contents
of a PDB file) to render or would I need to save the array to a temporary
file first?
Many thanks,
Shane
On Wed, Mar 27, 2013 at 3:39 PM, Robert Hanson <ha...@st...> wrote:
> That message is just a standard test that JSmol does to determine the
> capability of the browser.
>
> If you are using Chrome, you have to specially enable reading of local
> files by AJAX. Are you seeing this also on an actual web site?
>
> Do you know about the coverImage business? Sounds like this is what you
> are after -- it's built in now to show an image and then later replace that
> with the applet. Nothing special on your part to do.
>
> Bob
>
>
>
> On Tue, Mar 26, 2013 at 6:05 PM, Shane Ó Conchúir <spi...@gm...>wrote:
>
>> Hi all,
>>
>> I was hesitant to submit this as a bug report as the issue is probably my
>> fault.
>>
>> I am trying to add a JSmol applet to a website built with the TurboGears
>> 2.2 framework, jQuery 1.8.2, and jQuery UI 1.8.23. I have a webpage with a
>> div element which is initially blank. When the user uploads a PDB file, a
>> static image of the PDB file is generated and displayed in the div. This
>> all works fine. I am now trying to replace the image with a JSmol HTML5
>> applet. When I try this, the page's XHTML gets replaced by the HTML5
>> generated by the applet and the following error appears in the browser
>> (Chrome) console:
>> XMLHttpRequest.responseType cannot be changed for synchronous HTTP(S)
>> requests made from the window context.
>>
>> There is probably a good reason for this behavior. For starters, I am
>> defining my page as XHTML which may be the cause of the error above. I am
>> also using a different version of jQuery from JSmol. In the hope that
>> someone knows what could be happening, I've pasted excerpts from the code
>> below.
>>
>> The HTML document has this code:
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>> "
>> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>> <html xmlns="http://www.w3.org/1999/xhtml"
>> xmlns:py="http://genshi.edgewall.org/"
>> xmlns:xi="http://www.w3.org/2001/XInclude">
>> ...
>> <script type="text/javascript"
>> src="/javascript/jsmol/js/JSmoljQuery.js"></script>
>> <script type="text/javascript"
>> src="/javascript/jsmol/js/JSmolCore.js"></script>
>> <script type="text/javascript"
>> src="/javascript/jsmol/js/JSmolApplet.js"></script>
>> <script type="text/javascript"
>> src="/javascript/jsmol/js/JSmolApi.js"></script>
>> <script type="text/javascript"
>> src="/javascript/jsmol/js/j2sjmolfull.js"></script>
>> <script type="text/javascript"
>> src="/javascript/jsmol/js/JSmol.js"></script>
>> <script src="
>> http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
>> <script src="
>> http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" />
>> ...
>> and eventually instantiates a div element with the constructor of a
>> jQuery plugin.
>>
>> The constructor of the jQuery plugin which contains the div element has
>> this code:
>> ...
>> var Info = {
>> width: 200,
>> height: 200,
>> debug: false,
>> addSelectionOptions: true,
>> serverURL: ...
>> use: "HTML5",
>> j2sPath: "/javascript/jsmol/j2s",
>> script: "set antialiasDisplay;background white;load
>> /javascript/jsmol/data/caffeine.mol;"
>> }
>> this_.data('JSmolSettings', Info)
>> this_.html("\
>> ...
>> <div id='JSmol_control' style='width:256px;height:256px'>\
>> <img id='pdb_image' src='/images/placeholder.png' width=256
>> height=256/>\
>> </div>\
>> ");
>>
>> And the function run when a file is uploaded contains this code (which
>> is pretty ugly but the result of trying various methods):
>> ...
>> this_.find('#JSmol_control').html("<div><script> \
>> var jmolApplet0; \
>> jmolApplet0 = Jmol.getApplet('jmolApplet0',
>> $('#input_structure').data('JSmolSettings')); \
>> </script></div>");
>> ...
>> I am guessing that a better way would be to use the getAppletHTML
>> function but even replacing the code directly above with the declaration
>> jmolApplet0 = Jmol.getApplet('jmolApplet0',
>> $('#input_structure').data('JSmolSettings'));
>> causes the page's HTML to be removed and replaced with the applet.
>>
>> Can anyone see what the problem is?
>>
>> Rgards,
>> Shane
>>
>>
>>
>> ------------------------------------------------------------------------------
>> Own the Future-Intel® Level Up Game Demo Contest 2013
>> Rise to greatness in Intel's independent game demo contest.
>> Compete for recognition, cash, and the chance to get your game
>> on Steam. $5K grand prize plus 10 genre and skill prizes.
>> Submit your demo by 6/6/13. http://p.sf.net/sfu/intel_levelupd2d
>> _______________________________________________
>> Jmol-developers mailing list
>> Jmo...@li...
>> https://lists.sourceforge.net/lists/listinfo/jmol-developers
>>
>>
>
>
> --
> Robert M. Hanson
> Larson-Anderson Professor of Chemistry
> Chair, Chemistry Department
> 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
>
>
>
> ------------------------------------------------------------------------------
> Own the Future-Intel® Level Up Game Demo Contest 2013
> Rise to greatness in Intel's independent game demo contest.
> Compete for recognition, cash, and the chance to get your game
> on Steam. $5K grand prize plus 10 genre and skill prizes.
> Submit your demo by 6/6/13. http://p.sf.net/sfu/intel_levelupd2d
> _______________________________________________
> Jmol-developers mailing list
> Jmo...@li...
> https://lists.sourceforge.net/lists/listinfo/jmol-developers
>
>
|