symfony & jQueryties and separations

Massimiliano Arione

May, 14th 2011

About me

• 2001 PHP• 2004 PEAR• 2007 symfony• 2009 agile

symfony

jQuery

MVC

CPB

Behavior

• progressive enhancement

• AJAX

PROGRESSIVE ENHANCEMENT:THE WRONG WAY

sfFormExtraPlugin:• sfWidgetFormJQueryDate• sfWidgetFormJQueryAutocomplet

er• 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 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 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 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

sf 1.0: Javascript helper sf 1.4: sfJqueryPlugin

<?phpecho link_to_remote('...');echo jq_link_to_remote('...');

AJAX: THE GOOD WAY

1.code as if Javascript wouldn't exist

2.write your jQuery functions in the big $().ready() function

3.do little adaptions to your controller

4.write another view (tipically a JSON one)

AJAX: THE GOOD WAY

1.code as if Javascript wouldn't exist

2.write your jQuery functions in the big $().ready() function

3.do little adaptions to your controller

4.write another view (tipically a JSON one)

AJAX: THE GOOD WAY

1.code as if Javascript wouldn't exist

2.write your jQuery functions in the big $().ready() function

3.do little adaptions to your controller

4.write another view (tipically a JSON one)

AJAX: THE GOOD WAY

1.code as if Javascript wouldn't exist

2.write your jQuery functions in the big $().ready() function

3.do little adaptions to your controller

4.write another view (tipically a JSON one)

IN PRACTICE: LINK

<?php// in the view echo 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 $span = $(a).parents('li').find('span.qty');  var newqty = parseInt($span.text(), 10) + 1;  $span.empty().append(newqty);  $('span#total').empty();  $('span#total').append(result.total);};

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

echo json_encode($arr);

<?php// in the controller // 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

joind.in/talk/view/3034