Graham,
I'm not sure what jpgraph is but the main question I think your asking doesn't seem to require knowledge of anything more than how to interact with the server without reloading the page. This is actually pretty simple. Let's say that you have a simple page already loaded in your browser and in that page is a form with a drop down list of image titles.
At this point no image is loaded for you to see; another thing you don't see is the hidden iframe which we'll title 'portal' since it'll be used as such.
Your form will need to have the target attribute set to portal in order for the data to go through it. Something like this:
<!--The hidden 'portal' iframe-->
<iframe style="width:0; height:0; display: none; position: absolute;" src="/empty.html" name="portal"></iframe>
<!--The form-->
<form name="imageChooser" method="GET" target="portal" action="/get_image.php">
<select name="id" onChange="javascript:this.submit();">
<option value="1">Image One</option>
<option value="2">Image Two</option>
</select>
</form>
<!--The area on the page to display the image or error messages--> <div id="imageBox"></div>
When the drop down value is changed it will submit the form to get_image.php in the hidden 'portal' frame instead of reloading the page. get_image.php will then return javascript that will be executed automatically by the browser when it loads in the invisible frame. In the event that the user chooses "Image One", the js returned could be something like this:
<script language="JavaScript">
window.parent.document.getElementById('imageBox').innerHTML="<img src=\"/images/1.png\" />";
</script>
This would effectively display the image you want in the div layer without reloading the page in a way that is visible to the user. Of course this could also display an error if the image id specified is not found in the database (or file system):
<script language="JavaScript">
window.parent.document.getElementById('imageBox').innerHTML="No image to display";
</script>
Hope this was helpful! -Joe
Graham Anderson wrote:
does anyone have or know of an example where:
user chooses values from a couple of drop down boxes dateabase is queries and gives the values to jpgraph jpgraph draws the image on the same html page
all the examples I have seen reload the whole page or go to a new page when jpgraph does its thing....
does an example like this exist ?
