JQuery and JMOL Initial Loading Problem Solved

Nov 9, 2012 by

JQuery and JMOL Initial Loading Problem Solved

I was working on this project once which was basically designing a 3D viewer for different chemical structures, and gave users control to dynamically interact/modify the view.

Now the first thing I had to do was to research technologies to use for this project. After a thorough research and examination I have came up with Jmol, jQuery and JSP pages to be used hand in hand. It was the optimal solution for the problem.

The reasons I chose those three are efficiency, ease of maintenance, and availability of support and tutorials (some APIs could be very effective but not have much support from their developers and not much tutorials around. That makes it very hard to use and if you have a deadline it is a big NO-NO).

Now once I had the technologies out as a next step I started experimenting with putting them all together. Then after a little getting used to them I jumped on to making little prototypes which could be easily tested.

One main problem that I was having (and this post is mainly about solving this specific problem) was the loading of the chemical structures in the very beginning when the applet was just getting ready.

Let me be more specific. My applet which was displaying the structures  was using Jmol API, on the right side was the menu which gave users control over the page (this was created using jQuery).

The JSP page was used for calculations. When people used the menu on the right jQuery took care of all the Ajax calls very easily to connect to the JSP page which you already know performed calculations and sent data back.

Now that you see the big picture let me explain where the problem was – when the applet was loading in the beginning, jQuery always showed up with an error.  This is because the applet took too long and jQuery needed the applet in order to get the data and build the menu.

I tried solving this problem by using intervals and tried functions such as:

setTimeout() – the user provides the number of milliseconds after which the specified function is executed.

setInterval() – the user provides the number of milliseconds after which the specified function is continuously called in between the interval of user’s specified time.

Now both of these worked 50/50 there were still times when the user had a slow machine/connection and so it took longer than my specified amount of milliseconds.

Then I tried a different approach which was to call isActive() method to check if the applet is active or not. So I would write:

If (Document.jmolApplet0.isActive() == true) { do what I would like it to do}

By the way I know I could have just skipped the true part but I still write it just to make sure nothing weird is causing the error.

This failed as well and at first I didn’t know why but I found out with time. This approach only checks if the applet is loaded not the structure inside of the applet. So the applet might be loaded but the structure is very big and maybe takes a couple of seconds more to load and therefore the 50/50 error message.

Then after researching some more I have found out that Jmol actually has a method which checks to see if the structure is loaded or not.

The reason I didn’t find it at first because I was still getting used to the API and the way it worked and once I did I was comfortable with the small circle of things I knew about it. I didn’t feel like incorporating new methods because that might have caused bugs. Bottom line is I didn’t want to get out of my comfort zone, and when I did the solution came to me.

I found out that there are callback functions with specific commands and the one I needed was:

loadStructCallBack

So when I put all things together the code in the beginning looked like this

jmolSetCallback("loadStructCallBack", "jmolStructureLoaded")

The second argument is the name of the function I would like to call AFTER the structure has been loaded completely.

After doing this my program has never crashed and has been working great.

I know this might be a very unusual problem but hope it helps someone, somehow out there and if you have any questions please don’t hesitate to contact me or drop a comment.

Related Posts

Share This

  • Sean

    This totally solved my problem! Thanks!