Another use of an remote scripting no less beneficial then doing calculations and lookups is replacing a portion of a page's content with blocks of static content. The handleResponse code snippets presented earlier used the innerHTML property to do just this. A reasonable person might have expected this to be the first demonstration. Ah, how devious some minds are.

Default Initial Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Click on any link in the following list and the content in the box on the right will change.

You might ask, Why not just use a visible iframe? Of course, that's the purpose of iframes. However, notice that the division receiving the data changes height automatically something an iframe won't do. Okay, it can be done, and I have code to do that around somewhere. But this size change doesn't required complex code.

The division receiving the data could have a static height if that fits the design. And, overflow can be set to auto so scroll bars will be available.

On a side note, the division that contains the new content is wrapped in a floated division. This is partly to address the IE 5 box model bug. By setting the width attribute of one element and setting the padding and border values of the other element, the displayed size is the same across browsers. Using the extra division also reduces the distracting flash some browsers have when the content loads.

Let's look at an example of a return page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>HTML Include Sample 1</title>
    <script type="text/javascript">
        function returnCall() {
             var handle = null;
            if (parent!=self) {
                 if (this.frameElement) {
                    handle = this.frameElement;
                } else if (parent.document.getElementById("iframe")) {
                    handle = parent.document.getElementById("iframe");
                } else {
                    alert("Out of luck");
                }
                if (handle) {
                    handle.callBack(document.getElementById("data-wrapper").innerHTML);
                }
            }
        }
        window.onload = returnCall;
    </script>
</head>
<body>
<div id="data-wrapper">
    <p> data </p>
</div></body></html>";

We use the innerHTML property to extract the html as a string with all the markup intact, and the following handleResponse moves the string data into the target's innerHTML converting it back to markup.

function handleResponse() {
    if (HTTPObj.readyState == 4 || HTTPObj.readyState == "complete") {
        if (HTTPObj.status == 200) {
            var id = (HTTPObj.targetId) ? HTTPObj.targetId : HTTPTarget;
            var targ = document.getElementById(id);
            targ.innerHTML = HTTPObj.responseText;
        } else if (HTTPObj.readyState != "complete" {
            /* This branch is only valid when used with the xmlHttpRequest
             * object. Then readyState will be a number. With iframes,
             * IE triggers the onreadystatechange event before
             * we're ready and would display this alert.
             */
             alert(HTTPObj.status + ": " + HTTPObj.status.Text);
        }
    }
} //eof handleResponse