symfony & jQueryties and separations

Massimiliano Arione

April, 26th 2011

About me

• 2001: PHP developer• 2006: GrUSP member• 2009: member of GrUSP steering committee • 2010: PUG Rome president :-)

symfony

jQuery

MVC

CPB

B 

oprogressive enhancementoAJAX

PROGRESSIVE ENHANCEMENT:THE WRONG WAY

sfFormExtraPlugin:• sfWidgetFormJQueryDate• sfWidgetFormJQueryAutocompleter• sfWidgetFormTextareaTinyMCE

PROGRESSIVE ENHACEMENT: THE GOOD WAY

Just use plain javascript!

AJAX: THE 4 STEPS

1. Javascript catches an interaction with user, or with other browser events

2. an XMLHttpRequest object send a request to server, without breaking the flow

3. an XML (or other format) is returned by server 4. Javascript decodes data from file and interacts

with page

AJAX: THE WRONG WAY

1.0 Javascript helper 1.4 sfJqueryPlugin

AJAX: THE GOOD WAY

1.code as if Javascript wouldn't exist2.write your jQuery functions in the big $().ready() function

3.do little adaptions to your controller4.write another view (tipically a JSON

one)

IN PRACTICE: LINK

<?phpecho link_to('+', 'cart_increase', $item)

$('div#cart a.increase').click(ajaxIncrease);

var ajaxIncrease = function(e) {  $.ajax({    url:     this.href + '?sf_format=json',    success: function(r) { increase(r, e.target); }  });  return false;};var increase = function(result, a) {  var $li = $(a).parents('li');  var $span = $li.find('span.quantity');  var oldq = parseInt($span.text(), 10);  var newq = oldq + 1;  $span.empty().append(newq);  $('span#total').empty();  $('span#total').append(result.total);};

<?php// cartIncreaseSuccess.json.phpuse_helper('Number'); $arr = array(  'total' => format_currency($sf_user->getCartTotal(), 'EUR'),);

echo json_encode($arr);

<?php// actions.class.phppublic function executeCartIncrease(sfWebRequest $request){  $this->product = $this->getRoute()->getProduct();  $this->getUser()->cartIncrease($this->product);  // was $this->redirect('@homepage');    $this->redirectUnless($request->isXmlHttpRequest(), '@homepage');}

IN PRACTICE: FORM

$('div#filters form').submit(ajaxFilter);

var ajaxFilter = function(e) {  var $form = $(this);  $.ajax({    type:    'POST',    url:     $form.attr('action') + '?sf_format=json',    data:    $form.serializeArray(),    success: showProducts  });  return false;};

Thanks!

Massimiliano Arione@garakkioblog.garak.it

github.com/garak/sfjqec