W3Counter 4.0: AJAX in Symfony is a Breeze

I’ve gotta say, reproducing the AJAX effects from W3Counter within symfony was much easier than expected. It took only a few minutes to master and the code practically wrote itself.

Using a pre-built framework for this project is saving me time all over the place and producing code I’m not ashamed to share. Several of the reports W3Counter provides have “drill down” features, including the web browser stats which I completed rewriting today. The browsers are listed grouped by the family (Firefox, Internet Explorer, etc). Each row can be expanded to “drill down” to the stats for particular versions of that browser family.

W3Counter right now uses about 40 lines of JavaScript to accomplish this effect, from initializing and sending the XMLHttpRequest to modifying various div contents and parsing the response.

Version 3 with Symfony required no extra coding at all. I simply filled out the parameters for Symfony’s link_to_remote() helper function in the template, and out comes a link which toggles the visibility of the table row, issues the XMLHttpRequest for the cell contents, fills it in when it comes back, and even runs a Script.aculo.us effect upon completion.

echo link_to_remote(image_tag('icons/magnifier_zoom_in.png', array('alt' => 'View By Version')),
array(
'url' => '@browser_drilldown' . $params,
'update' => array('success' => 'expand_cell_' . $i),
'complete' => "Element.show('expand_row_" . $i . "')"
));

The best part is that there was no extra coding required to write the code which responds to the request. It’s just a standard action within my module like any page of the application. Symfony automatically recognizes the request came from an XMLHttpRequest, and skips decorating the template with the layout before sending the response back to the page. Talk about easy.

One task remains… I almost forgot to handle the case when a user tries to expand a row after their session has timed out. You can see the default result below: Symfony redirects the request to my auth module which returns its login screen right into the middle of my page. I’ll fix that up tomorrow.