My first jQuery UI widget.
The JQuery UI dialog is awesome. What I ended up doing most with it was taking a hyperlink or form on the page, and unobtrusive-style making it so a click on that hyperlink (or submit on that form) would not cause a page reload, but would instead load the destination in a jQuery UI Dialog.
This isn’t ‘ajax’ exactly, it’s more ajah (HTML rather than XML), so let’s call it ajaxy.
This isn’t too hard to do, but after doing it several times, and realizing the edge and exceptional cases to be taken care of, I decided to abstract the pattern into a widget of its own. One tricky thing the widget does is, after you’ve loaded a dialog, all (or some) hyperlinks or forms in the loaded content can easily be similarly ajaxyDialog-ified.
ajaxyDialog widget will:
- Magically change the hyperlinks or forms of your choice to load their destination/results in a jquery UI dialog set up with options of your choice. Forms will be sumbitted with the http method they use.
- Change mouse pointer to load-style when loading, and back to auto when done.
- Remove the first h1,h2,etc (or custom selector) from loaded content, and make it the Dialog title. Can be turned off.
- Handle .ajax load errors by displaying an error in the dialog, or with a custom callback
- Gives you a callback to prevent load after examining the xhr response or returned content
- Make hyperlinks and forms in the loaded content also ajaxDialog-ified. You can turn off this behavior or supply a custom selector for forms and hyperlinks to apply ajaxDialog to.
- Gives you methods and callbacks and options you’d want for a well-behaved flexible widget.
note modal restriction: Right now, ajaxyDialog insists on creating only modal dialogs. It will re-use the same div container and dialog widget for all ajaxyDialogs on a page. This met my actual use cases (I think the times when a modeless dialog in a web page are appropriate UI are pretty rare), and it is somewhat more complicated to make things work efficiently with modeless dialogs. However, the widget could be expanded to handle modeless at a later date.