YASB – Yet Another Symfony Blog

June 13, 2007

Followup: Creating rich GUIs with Javascript in Symfony

Filed under: Browsers, Javascript, PHP — Krof Drakula @ 11:08 am

Well, I’ve written up a short summary of ideas relating to handling Javascript files in relation to requests, not it’s time to evaluate them.

First thing I’ve noticed with the different ways of injecting Javascript into the response is the order by which the files are loaded, the problem being dependency. If you’re using a library such as jQuery (or any other for that matter), the order by which the JS files are loaded is crucial. I usually force jQuery to use the noConflict mode by calling jQuery.noConflict() in a separate file (to keep the original library file intact in case of upgrades and updates) and loading it after jQuery. That’s done in the general view.yml file on the app-level configuration.

But when I try to add an action-specific JS to the mix, things start getting hairy – when you call $this->getResponse()->addJavascript(), it adds Javascripts to the beginning of the list of JS files, before the view.yml gets a chance to add its own. In this case, you’re limited to adding JS files via a module-level view.yml file by specifying the view to which you want to append the JS.

This is different when handling components – imagine having, say, a countdown timer written in Javascript. If you’d like to include it in several places but don’t want to handle the dependencies, then there’s a foolproof way of handling those – simply include the dependencies using $this->getResponse()->addJavascript(). This time, the components get rendered AFTER the main view, so including JS files this time adds them to the end of the list, after the main view’s files have been added.

The good thing about the latter is that you never have to worry about changing any view.yml files after including the component anywhere in your main views. That lends itself to building self-contained, no-fuss plugins using components, which, in the context of this article, could be HTML widgets, like calendars, calculators, AJAX comment boxes, shoutboxes, etc.

Anyways, hope this insight helps. Now for some midday coffee.

3 Comments

  1. Hi

    I have problem with own js scripts. In /web/js/ I have jquery file and my own file with script. jQuery is loaded globaly in /apps/config/view.yml and my own script is loaded on module level in /apps/module/config/view.yml And it doesn’t work correct. I use Firebug and jQuery and my own script looks like loaded correctly, but my scripts doesn’t work. But if I paste my js script into template all works perfect. It’s strange because I don’t paste jQuery into template ind it works.

    So do you know how to load own raw javascript files?

    Comment by PHP programmer — July 26, 2008 @ 3:17 pm

  2. I’ve never had a problem loading up my Javascript files – but it seems to me you’re trying to use scripts without having the appropriate resources when executing. There can be a number of reasons, most of which I can’t really discount due to lack of input, but I’d check the following:

    • make sure the script tags are loaded in the correct order. Having your JS files load after the main library scripts is crucial. Have a look at the resulting head script tags and make sure they’re loaded in the correct order. If not, trace my post for possible gotchas.

    • Symfony is bundled with Prototype and can override jQuery’s $ function when using Javascript helpers – use “jQuery.” instead or wrap your functions inside (function($) { / your code */ })(jQuery);

    • if your script is executing when pasting it in the template, make sure that upon execution, the DOM elements are already parsed into the DOM model. Basically, you don’t want to modify the DOM until it is ready. If you have standalone statements like $(”div.hidden”).hide(); try wrapping the whole code block inside

    $(function() { /* … */ });

    That’s shorthand for $(document).ready(function() { /* … */ });. Without it, the DOM elements you’re trying to manipulate don’t exist yet when the code executes (in the case of having a bare statement in a script inside the head).

    If all else fails, feel free to contact me at krof dot drakula at gmail dot com.

    Comment by Krof Drakula — July 26, 2008 @ 3:37 pm

  3. I have made one website sometime ago and facing same problem but i have solve this error

    Comment by Web Redesign Services — July 27, 2009 @ 12:28 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress