Navigating in an IE Modal Dialog

Internet Explorer has a nice feature where a new window can be opened modally using the window.showModalDialog function, meaning that the page that opened it cannot be accessed until the new window is closed. This can be useful in many situations.

However, the main limitation of IE Modal Dialogs (other than being non-standard), is that any hyperlink clicked in a modal dialog causes another, non modal, dialog to be opened, rather than opening the page linked to in the same window, as would happen in a normal pop up window.

The key to solving this problem is to note that a modal dialog only opens another window when a GET request is made, not when a POST request is made. However, an anchor tag automatically causes a GET request, so the solution is to:

1. Catch the click on each anchor tag, cancel it,
2. Submit a dynamically created FORM element, with it’s method set to ‘POST’ and it’s action set to the URL of the link clicked.

While it is possible to put a listener on each anchor tag to achieve this, such an approach will not scale well. Instead, place a listener on the body tag. The example below is done using methods from the Dojo Ajax Toolkit, since that the toolkit I use the most, but you can of course use whatever methods you like to achieve the same result:

<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.body(), “onclick”, function(evt) {
if(evt.target.tagName != “A”) {return true;}
dojo.stopEvent(evt);
var form = document.createElement(”form”);
form.setAttribute(”target”, window.name ? window.name : “SrPopUp”);
form.setAttribute(”action”, url);
form.setAttribute(”method”,”POST”);
document.appendChild(form);
form.submit();
return false;
});
});
</script>

This method assumes that you have control over the content of the page being shown in the modal dialog. It would also make sense to add a similar listener to the body tag for key events, as a user can trigger an anchor tag by tabbing to it and hitting enter.

Thanks to Danny Goodman and Steiner Overbeck Cook for coming up with this solution.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

A dojo.storage IE-native module

The Dojo Ajax toolkit contains a module called dojo.storage which can be used to store large amounts of non-cookie-based data on the client side. This can be useful for all manner of reasons, which you can read in Brad Neuberg’s announcement on his blog.

dojo.storage uses a very high-level API that hides the details of how exactly the storage is implemented. This is necessary because each browser forces an application to store it’s data in completely different ways. Because of this, the primary storage mechanism used in dojo.storage is Adobe Flash. Flash allows you to store up to 100K of data per page (more that 100K if you allow it), however, while Flash has a very impressive install base of over 95% of all browsers, this unfortunately is not 100%.

Because of this lack of full coverage, the WhatWG storage provider was written, which provides native storage support in Firefox 2 without Flash.

This leaves poor feeble Internet Explorer out in the cold however. So, to fix this, I’ve written a dojo.storage module that supports client side data storage in Internet Explorer. It is based on native capabilities in IE 5+ described here. I’ve submitted it as a patch to Dojo, and hopefully it’ll make it into the build over the next couple of weeks.

For those who can’t wait (and are wise in the ways of Subversion), you can download the patch from http://www.skynet.ie/~sos/misc/BrowserStorage_0.4.2.patch which you can apply to the nightly code. It was created against the 0.4.2 build. Note that this is probably not the exact code that should make it into the build, as the review process may change it slightly. However, I have tested this with IE6 and IE7, and it seems to work pretty much flawlessly.

Update: It seems that the patch was submitted too late for the 0.4.2 release, so for people who’d like to use the IEStorageProvider  with the 0.4.2 release, you can apply the patch above, or download the dojo/src/storage.js and /dojo/src/storage/browser.js files. Make sure to put them in the /src and /src/storage folders respectively.

All comments/feedback/bug reports welcome, just add a comment to this post.