ajaxyDialog: a jquery ui widget to make links or forms open destination in a jquery ui dialog

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.

One thought on “ajaxyDialog: a jquery ui widget to make links or forms open destination in a jquery ui dialog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s