Simple Ajax requests with cfWheels and jQuery

Someone asked me via email today – I would like to know how to include a Partial dynamically based on a link/button click;

Well, I thought I’d rustle up the simplest way of doing this I could think of.

This example has three parts to it: an Ajax.cfc controller, an index.cfm file and a _time.cfm partial. I’m assuming you’ve got the index.cfm and _time.cfm files in /views/ajax/ and the controller file will live in /controllers/Ajax.cfc

I’ve included two ways of essentially doing the same thing: one renders the partial (which is what the emailer asked for), but depending on what you want to get back, renderWith() can be really useful too, and saves you having to create a partial just to return something simple like a string.

So what’s going on is:

  1. jQuery looks for the class “callremotedata” and takes over its “click” event
  2. It stops the a tag from firing as a normal request
  3. It takes the href value from the a tag
  4. Then fires an ajax request and replaces the HTML in #result with the html returned from the Ajax.cfc controller

Gridmanager.js 0.3.1 released

Another huge set of changes, mainly the introduction of stackable & sortable editable regions, and  full LESS themeing support.
Give it a go here: http://neokoenig.github.io/jQuery-gridmanager/demo/

Changelog:

New style of editable regions which are stackable/editable/deletable
Added: default editable region button
Added: Theming using LESS
Default, light & dark themes now available
Large visual cleanup
Fixed: remoteURL now posts as proper key/value pair
Added: initMarkup() to autowrap non commented markup
Added: editableRegionEnabled & autoEdit options
Added: additional filterCallback option which runs on init();

Gridmanager.js 0.3.0 released

A pretty big set of changes in this one.

A massive thanks to Percy Brea for his input in moving Gridmanager.js forward, and thanks to all those who have got in touch with bug fixes and ideas!

What’s new?

  • Nested row & column support & new add nested row button
  • Added ability to add custom controls on rows & columns (with your own callbacks)
  • Added Custom column classes in addition to row classes
  • RTE’s are now attached to their own editable regions within columns
  • Responsive class support added
  • Responsive class layout mode added
  • Font Awesome now the icon default
  • Documentation now available at http://neokoenig.github.io/jQuery-gridmanager/docs