JQuery tricks: using Greybox + form plugin for a modal dialog box
Back in the day of Internet Explorer 3 and Netscape 4, you would just use
window.open() for this. But for some reason,
the kids today are all excited about AJAX, DHTMLish gizmos; just looking at the plugins
available for the cool JQuery library, you've got Thickbox
and Tweenbox and
Slightly Thickerbox and Greybox
Redux. None of them seems to do exactly what I want, which is to create a dialog box that the user can interact with normally until he's done with it,
with a CGI that can report errors and present its form again and again as many times as needed to complete the transaction; and where, once done, the
dialog will close by itself, maybe triggering some neat page update based on the newly entered data.
Demo: Change password
How it works
Create a greybox (calling
$.GB_show()). The greybox has an iframe inside, which isn't much use. Remove that and replace it
with a plain old
DIV. Use the JQuery
load() method to load the CGI form into that DIV. Use the form plugin's
ajaxForm method to change the loaded CGI form's behaviour, so that instead of a regular submit, it gets submitted via AJAX
and loaded back into the greybox. Praise to all those callback hooks provided by
NOW, the problem is making sure that until a certain condition is met (i.e, the CGI script is "done"), it will keep reloading itself into
the dialog box (the div);
after callback lets you do it once, but I was confused how to keep reseting it.
This morning in the car park I finally unknotted my thinking: if the CGI isn't done, grab its output (all the HTML) and reload it into the dialog box,
ajaxForm on it again.
This is just a proof-of-concept, not an actual plugin or even a proper generic function. All the code is either in this page or in
form.js files included (all files are from the JQuery subversion repository). The source of the
CGI is here: demo.php.