Darren Beale's Web Log

Symfony and AJAX

—

I've been playing with the AJAX support in Symfony this weekend and I'm blown away by how easy it is.

Today I put together a detailed/summary view switcher for a list of items coming from a database with a (script.aculo.us) fade in/out effect and I didn't need to write one line of JavaScript. Now that's what I'm talking about.

Here's a summary of what I did, with example code:

Everything applies to the 'list' action belonging to the 'bar' module. The view displays either detailed or summary view for a paginated list of records coming from the database.

In my view file (app/module/templates/listSuccess.php) I add:

[php][/php]

A quick reload and I can see that the libraries have been loaded:

[html]

[/html]

My complete template looks like:

[php]

<div style="border: 1px dashed #00F; height 100px;getAttribute('viewMode') == 'detail') ? “” : “display: none;”; ?>” id=”detail”>

Detail View

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nulla augue, rhoncus in, ornare ac, vestibulum vitae, turpis. Suspendisse lacinia, odio at ornare suscipit, quam tellus dictum orci, eget egestas nibh sapien in enim. Nulla sed est nec lorem consectetuer adipiscing. Vivamus aliquam est ultricies ipsum. Duis et lacus. Nam venenatis sem sit amet justo. Donec pellentesque sodales felis. Nulla suscipit consequat arcu. Ut mollis turpis sit amet orci. Curabitur mauris massa, euismod eget, fringilla vel, interdum a, justo. Donec sed augue. Donec augue lacus, ullamcorper in, ultrices a, rhoncus sed, diam. Fusce nunc magna, porta eget, varius a, faucibus varius, est. Integer euismod dignissim mi. Aenean accumsan lectus non purus. Quisque ultrices sapien vitae sapien. Etiam tincidunt tellus et odio. Morbi pellentesque. Proin pharetra sem at massa.

<div style="border: 1px dashed #F00; height 100px;getAttribute('viewMode') == 'detail') ? “display: none;” : “”; ?>” id=”summary”>

Summary View

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nulla augue, rhoncus in, ornare ac, vestibulum vitae, turpis. Suspendisse lacinia, odio at ornare suscipit, quam tellus dictum orci, eget egestas nibh sapien in enim. Nulla sed est nec lorem consectetuer adipiscing. Vivamus aliquam est ultricies ipsum. Duis et lacus. Nam venenatis sem sit amet justo. Donec pellentesque sodales felis. Nulla suscipit consequat arcu. Ut mollis turpis sit amet orci. Curabitur mauris massa, euismod eget, fringilla vel, interdum a, justo. Donec sed augue. Donec augue lacus, ullamcorper in, ultrices a, rhoncus sed, diam. Fusce nunc magna, porta eget, varius a, faucibus varius, est. Integer euismod dignissim mi. Aenean accumsan lectus non purus. Quisque ultrices sapien vitae sapien. Etiam tincidunt tellus et odio. Morbi pellentesque. Proin pharetra sem at massa.

[/php]

and the module's controller looks like:

[php]getUser()->hasAttribute('viewMode'))
{
$this->getUser()->setAttribute('viewMode', 'detail');
}
}

/**
* @desc Called by AJAX when clicking on the [Detail|Summary] view link.
* This allows us to 'remember' the view that the user they have chosen
*/
public function executeSetmode()
{
$this->getUser()->setAttribute('viewMode', $this->getRequestParameter(“mode”));
// if javascript is disabled we need to re-direct back to the listing
$this->redirect(“bar”);
}

}
?>[/php]

So when we click on the detail/summary link we want to set a session variable so that the application remembers the view mode. To do this this the template specifies an AJAX call using the link_to_remote() JavaScript helper it then, by using the 'complete' parameter, executes the javascript methods. The visual_effect() calls are Symfony's javascript helpers and they do the script.aculo.us fades between the two content windows, note the chaining. The latter part of the 'complete' parameter are additional direct javascript calls to Prototype methods so we can swap the navigation links to remove the link for the active view mode.

Like any self-respecting developer I wanted to ensure that the code would work with scripting turned off. Now this was the only part of the excersise where I had to do a bit of digging. In the excellent Symfony documentation under JavaScript helpers there is mention of the if_javascript() method, e.g.:

[php]

You have JavaScript enabled.

You don't have JavaScript enabled.

[/php]

This seemed a bit cumbersome to me so after some further digging into the API I noticed the $options_html() array for link_to_remote() . Using this I pass the URL so the href gets populated (normally it's just a #) and as the last item within 'complete' I add a return false; so with JavaScript enabled the link is not followed. Finally in my controller for setmode action I add the redirect. Now, even with javascript disabled, it all works albeit with a page reload.

I've still plenty to learn with Symfony but I can see that now I'm over the worst of the learning curve I'm going to start really enjoying it from here on in.

Comments

2 responses to “Symfony and AJAX”

  1. Alex Ezell Avatar
    Alex Ezell

    No link to an example page? Aarrggh!

    Seriously though, I have bouncing back and forth about whether I should jump into the learning curve for CakePHP or Symfony for several projects on the horizon.

    Something like this has me leaning toward Symfony.

  2. What’s cooking at Tech-Recipes » Blog Archive » Happy birthday symfony

    […] search was quickly and richly rewarded. I found lots of glowing references for the symfony framework. Symfony is so much more than what I was looking for, […]