AJAX/Modal Functionality: 0 Lines of Javascript, 200% More Chaos Magic

Profile picture

Tags: ctools, jquery, panels

While attending DrupalCampNYC7 this past weekend at NYU Poly, one of the most eye-popping demos I saw was by Roger López, showing off some functionality hiding in the Chaos Tools Suite to empower you to create awesome AJAX functionality, including modal dialogs/forms, without writing a single line of javascript. You can read Roger's presentation notes here, which I strongly recommend.

Needless to say, I was immediately jazzed by the possibilities of a clean programmatic mechanism for handling data exchanges of this nature. It's complex work, and doing it on a one-off basis is tricky and prone to error. This is why we're all so lucky to be in the same coding community as Merlinofchaos: not only do we get killer apps like Views, we get the infrastructure he writes "for himself" that goes along with it!

I was also sort of surprised/chagrined that I'd been working on Panels all year long and never known about this wondrous gem of an API. But that's a problem I know how to solve: I thought, "hey, this should be a sample module included with ctools by default."

So, on the plane from LaGuardia to New Orleans (where I'm presenting on Friday at Do It With Drupal), I took my own stab at it. This isn't a lot more code than Roger presented, but I cleaned up the namespace and used a few more of the ctools functions.

The sample module shows how to perform simple operations like text replacements, table manipulation, and a modal login form. I'd love to hear other use-cases that would be worthwhile to include in a sample module (chime in on the issue thread). I'm also looking forward to digging in further to add new ctools_ajax/modal commands, so if you've got any great ideas let me know.

It's a great time to be a Chaos Wizard!

Comments

Josh, thanks for the kind words. I must say that CTools has really opened my eyes to a better developer experience and I'm glad to see some of it seeping into drupal 7.

If you're interested, the dialog demo I showed at camp is up at http://drupal.org/project/dialog.

Thanks Roger and Josh.
I will take a deeper look but I've tried both demo's and looks nice. I tried with JS disabled and Josh's module doesn't degrade gracefully, at least in Firefox.

Add comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <br/> <br /> <p> <img> <blockquote> <i> <b> <u>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Client Testimonial

I love working with Chapter Three. They are THE Drupal experts and have helped 7x7 and California Home+Design with everything from troubleshooting sticky bugs to designing and building out entire sites. They understand both our editorial and business needs and have delivered top-notch products that satisfy both.

Jennifer Pollock, Online Managing Editor, 7x7 and California Home + Design

Drupalcon SF 2010