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;};