Wednesday, February 28th, 2007

Symfony Unobtrusive JavaScript Plug-In

Category: jQuery, PHP

<>p>François Zaninotto has been talking about a new Unobtrusive JavaScript Plug-In for symfony.

Simple Example

  1. <div id="foobar">
  2.   I'm here !
  3. </div>
  4. < ?php UJS("$('#foobar').css('display', 'none')") ?>

How it is generated

  1. < ?php UJS_write('<a href="#" onclick="$(\'#foobar\').toggle();return false;">click me') ?>
  2. <div id="foobar">
  3.   I'm here !
  4. </div>
  5. < ?php UJS_change_style('#foobar', 'display:none') ?>

this becomes…

  1. <span style="display: none" class="UJS_placeholder" id="UJS_0"></span>
  2. <div id="foobar">
  3.   I'm here !
  4. </div>
  5. ...
  6. <script>
  7. //  < ![CDATA[
  8. $().ready(function(){
  9.    $('#UJS_0').after('<a href="#" onclick="$(\'#foobar\').toggle();return false;">click me');
  10.     $('#UJS_0').remove();
  11.     $('#foobar').css('display', 'none');
  12.  })
  13. //  ]]>
  14. </script>

Related Content:

  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...
  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...

Posted by Dion Almaer at 11:15 am
12 Comments

+++--
3.7 rating from 48 votes

12 Comments »

Comments feed TrackBack URI

Nowhere on the Symfony site does it mention the fact that this plugin relies on jQuery. Come on guys, credit where it’s due.

Comment by Dean Edwards — February 28, 2007

“This implementation uses JQuery as the underlying JavaScript framework, but the same could be achieved with Prototype.”

Comment by Dustin Whittle — February 28, 2007

@Dustin – I’ve looked and I still can’t find the text you quoted. Perhaps you should make your credits clearer?

Comment by Dean Edwards — February 28, 2007

Dean,
It’s the last phrase in the Introduction section in the Trace page for the plugin.

Still, seeing that it’s still alpha, I’ll wait a while before trying it out.

Comment by Gonzalo — February 28, 2007

@Dean – I am referencing the last sentence of the introduction paragraph on the trac plugin page.

Comment by Dustin Whittle — February 28, 2007

OK, I missed it. Still, a link would be good. :-)

Comment by Dean Edwards — February 28, 2007

How is this “Unobtrusive” It inserts a bunch of JS code into the middle of the HTML body.

Comment by Alex — February 28, 2007

Well it’s unobtrusive because the page is still completely functional without the Javascript. Unobtrusiveness has nothing to do with including javascript in the body. Anyway it would be unpragmatic to try to place all your JS in external files.

Comment by Florin — March 1, 2007

lol

Comment by noname — March 1, 2007

@Florin, I always thought that word for what you are talking about is “degradable”. Check dictionary for meaning of the word “unobtrusive” : http://dictionary.reference.com/browse/unobtrusive

With frameworks like jQuery it is so easy to keep all javascripts in external files and I don’t understand why it is unpragmatic.

Comment by sopel — March 2, 2007

Dean,
It’s the last phrase in the Introduction section in the Trace page for the plugin.

Still, seeing that it’s still alpha, I’ll wait a while before trying it out.

Comment by newkon — July 5, 2007

I’ve tryed the sfJqueryPlugin from http://trac.symfony-project.com/wiki/sfJqueryPlugin wich is supposed to replace Javascript helper with the same helpers using jQuery, so no need to use prototype anymore, and it works very good

Comment by Sebastien F — October 9, 2007

Leave a comment

You must be logged in to post a comment.