How can I dynamically reload a portion of my web page with webMathematica?

The first step is to write an MSP that generates the desired graphic image. When using this method, it is important that the returned image is actually a GIF image and not a reference to an image in the cache. This can be accomplished by wrapping the expression with DisplayString and then using MSPReturn to make sure that a GIF image is returned. The following is a sample Mathlet that can be used to generate a simple plot when passed two arguments, a minimum and maximum, for the plot range.

<%Mathlet MSPReturn[DisplayString[MSPBlock[{$$min, $$max}, MSPShow[Plot[Sin[x], {x, $$min, $$max}], "GIF"], "image/gif"] %>

In the HTML file, you must then write a JavaScript function that grabs the output of the MSP and replaces the default GIF image with the GIF image returned by the MSP. The following JavaScript function can be used.

<script language="JavaScript"> function showPlot() { var a, b; var q; var m = "URL to the MSP that generates the output"; a = document.forms.sample.min.value; b = document.forms.sample.max.value; q = (m + "?min=" + escape(a) + "&max=" + escape(b)); document.images.default.src = q; return false; } </script>

Next, you will need to have a default image that will be a placeholder for the dynamically-created GIF image returned by the MSP. This default image should be the same size as the image that the MSP will return. The example that follows assumes that the image is in the same directory as the HTML file and that it is called default.gif.

Within the same HTML file (called Sample.html here), you will need a form and an image tag that refers to the default image. Below is a simple example that can be used.

<form action="Sample" name="sample" method="post" onSubmit="showPlot();return false;"> Enter the minimum and maximum plot range for the Plot:<br> <br> <input type="text" name="min" width=5 value="0">Minimum <br> <input type="text" name="max" width=5 value="2 Pi">Maximum <br> <br> <input type="button" name="btnSubmit" value="Plot" onClick="showPlot();"> </form> <br> <img src="default.gif" NAME="default" BORDER="0">

To get the example to work, simply use your web browser to load the HTML file and assuming that JavaScript is enabled in your browser, the example should work.