AJAX - The Complete Reference

(avery) #1

PART II


Chapter 9: Site and Application Architecture with Ajax 461


Internet Explorer will show the change, no item will be pushed to history and thus the back
functionality will not be fixed. To address this, we have to introduce a somewhat ugly hack.
If you recall from Chapter 2 and other discussions of iframes, when they are used for
transport, it is possible to create a history entry. That iframe effect wasn’t always desirable,
but here it might be quite useful. So to address Internet Explorer’s issues in our library, a
hidden iframe is added into the main document right away:

AjaxTCR.onLibraryLoad = function(){

/* add iframe fix */
if(navigator.userAgent.toLowerCase().indexOf("msie")>-1)
{
if (window.location.hash && window.location.hash.substring(1) !=
AjaxTCR.history._currentState)
var src = AjaxTCR.history._iframeSrc + "?hash=" +
window.location.hash.substring(1);
else
var src = AjaxTCR.history._iframeSrc + "?hash=";
document.write( '<iframe id="ieFix" src="' + src + '"
style="visibility:hidden;" width="1px" height="1px"></iframe>');
}
}
/* do any library load bindings */
AjaxTCR.onLibraryLoad();

You’ll note here two issues. First, we look at the current hash value of the document
that’s including the library because there may already be a value there. This could indicate
that a bookmark was set and followed that the state must be restored—more on that later.
Second, we note the private AjaxTCR.history._iframeSrc value which is blank.html.
This file must be in your directory to make this work. It doesn’t need anything in particular
in it, it just needs to exist.

NNOT EOTE If you are cringing because you see document.write() and not a DOM method here,
sorry to say this is the only way to make this scheme work because DOM-inserted iframes do not
add to the history.

The first thing the application must do is call the initialization function AjaxTCR
.history.init(callbackfunction). The callback function is specified for the actual
first page of the history. What this means is that, as the user moves through the history of
the application and then back up to the initial state, this function would be called. Other
pages in the history that are triggered by Ajax calls will simply use their normal success or
fail callbacks as the user moves around. If the initialization occurs on a URL that currently
includes a hash-marked value, the init() method will also examine this and see if it can
return them to any persisted state; it will run the callback function if this data cannot be
found. This will become a bit clearer when shown in an example.
Once the history system is initialized and an Ajax call is made, you need to decide if it
should be added to the history or not. Remember, some things may not be relevant to do so
with. Assuming it should be added, the first step is to create a special history object
containing an id value that will be used as the hashed value, optionally a title property
Free download pdf