mirror of
https://github.com/schrodinger/pymol-open-source.git
synced 2026-06-07 20:44:23 +08:00
184 lines
5.1 KiB
HTML
184 lines
5.1 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="Pragma" content="no-cache"/>
|
|
<meta http-equiv="Cache-Control" content="no-cache"/>
|
|
<meta http-equiv="Expires" content="-1" />
|
|
<title>Web Services - Sample 13: Using jQuery with the PyMOL web server</title>
|
|
|
|
<script src="json2.js"></script>
|
|
<script src="pymol.js"></script>
|
|
<script src="jquery.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// This page assumes that PyMOL is running on 8083
|
|
|
|
var pymolhost = "http://localhost:8083";
|
|
|
|
function callback1(result)
|
|
{
|
|
document.getElementById('result').innerHTML = "<pre>"+result+"</pre>";
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
|
|
$("a[name=load]").click(function() {
|
|
try {
|
|
$.getJSON(pymolhost+"/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?", callback1);
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
return false; // causes the HREF to not load a new page
|
|
});
|
|
|
|
$("a[name=delete]").click(function() {
|
|
try {
|
|
$.getJSON(pymolhost+"/apply/pymol.cmd.delete?name=pept&_callback=?", callback1);
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
return false; // causes the HREF to not load a new page
|
|
});
|
|
|
|
$("a[name=get_names]").click(function() {
|
|
try {
|
|
$.getJSON(pymolhost+"/apply/pymol.cmd.get_names?type=objects&_callback=?", callback1);
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
return false; // causes the HREF to not load a new page
|
|
});
|
|
|
|
$("a[name=badload]").click(function() {
|
|
try {
|
|
$.getJSON(pymolhost+"/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb");
|
|
} catch (e) {
|
|
if (e.description == undefined) {
|
|
alert(e); //Firefox
|
|
} else {
|
|
alert(e.description); //Explorer
|
|
}
|
|
}
|
|
return false; // causes the HREF to not load a new page
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
<style text/css>
|
|
a.info {
|
|
text-decoration:underline;
|
|
background-color: transparent;
|
|
}
|
|
a{
|
|
text-decoration:none;
|
|
padding: 1px;
|
|
background-color: #dddddd
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h3>Web Services - Sample 13: Using jQuery with the PyMOL web server</h3>
|
|
|
|
<a href="javascript:void(0)" onclick="window.open('view-source:' + location.href)">view page source</a>
|
|
|
|
<a href="http://localhost:8083/apply/_quit?href">quit pymol</a>
|
|
<p>
|
|
|
|
<div id="debug">
|
|
</div>
|
|
|
|
PyMOL results will appear here
|
|
<div id="result" style="border-style: solid; padding: 10">
|
|
</div>
|
|
</p>
|
|
|
|
<p>
|
|
A simple
|
|
<A class=info HREF="http://jquery.com/" TARGET=_blank>jQuery</A>
|
|
and JSON function is $.getJSON. This function accepts a URL and the
|
|
name of a JavaScript function to call after the URL result arrives.
|
|
<pre>
|
|
<A HREF="javascript:$.getJSON('http://localhost:8083/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?', callback1)">load</A>
|
|
</pre>
|
|
causes this
|
|
<A HREF="javascript:$.getJSON('http://localhost:8083/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?', callback1)">load</A>
|
|
</A>
|
|
link to appear.
|
|
The callback1 function simply places the result into the black-border box
|
|
above. You can view this callback1 function by
|
|
using the "view page source" link above.
|
|
</p>
|
|
<p>Next, let's
|
|
<A HREF="javascript:$.getJSON('http://localhost:8083/apply/pymol.cmd.delete?name=pept&_callback=?', callback1)">delete</A>
|
|
</A>
|
|
this object and show another common way of using jQuery.
|
|
<p>
|
|
This html snippet
|
|
<pre>
|
|
<a href="javascript:void(0)" name=load>load</a>
|
|
</pre>
|
|
defines a
|
|
<a href="javascript:void(0)" name=load>load</a>
|
|
link that is much simpler,
|
|
putting the responsibilty on the jQuery $("a[name=load]").click property
|
|
to define how to handle this link.
|
|
This definition occurs in the jQuery $(document).ready function
|
|
<pre>
|
|
$(document).ready(function() {
|
|
|
|
$("a[name=load]").click(function() {
|
|
try {
|
|
$.getJSON(host+"/apply/pymol.cmd.load?filename=$PYMOL_PATH/test/dat/pept.pdb&_callback=?", callback1);
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
return false; // causes the HREF to not load a new page
|
|
});
|
|
});
|
|
</pre>
|
|
The full source can
|
|
be seen by following the "view page source" link above.
|
|
</p>
|
|
<p>
|
|
Other links can be defined in a similar way, for example to
|
|
<a href="javascript:void(0)" name=get_names>get object names</a>
|
|
or to
|
|
<a href="javascript:void(0)" name=delete>delete</a> the object we loaded.
|
|
</p>
|
|
<p>
|
|
Sample16 shows how you can construct complex URL's containing multiple
|
|
pymol commands. These URL strings can be used in the $.getJSON function
|
|
shown above.
|
|
</p>
|
|
<p><b>jQuery and cross-domain scripting</b></p>
|
|
<p>
|
|
This document came from
|
|
<script>document.write(document.URL)</script>
|
|
as shown in the URL location bar of this browser.
|
|
The jQuery requests are made to the PyMOL server at
|
|
<script>document.write(pymolhost)</script>
|
|
This is a cross-domain request that violates the same-origin policy.
|
|
But jQuery uses a workaround called cross-domain scripting with JSONP
|
|
that allows a callback to process any response from the PyMOL server.
|
|
In order to illustrate the necessity of a callback in this situation,
|
|
click on this link to get an error alert.
|
|
<br>
|
|
<a href="javascript:void(0)" name=badload>badload</a>
|
|
</p>
|
|
|
|
|
|
|
|
<!-- the only purpose of this IFRAME is to launch PyMOL via the PWG
|
|
-- helper mechanism -->
|
|
|
|
<iframe src="start8083.pwg" name=pwglaunch
|
|
width="0" height="0" frameborder="0"
|
|
marginheight="0" marginwidth="0"
|
|
scrolling="auto"></iframe>
|
|
|
|
</body>
|
|
</html>
|