Posted on Jan 1, 2009

sfJqueryWidgetsPlugin

The sfJqueryWidgetsPlugin is a symfony plugin that adds two jquery widgets to the list of available widgets bundled in the framework.

The two widgets are:

  • Drop down list that fires an Ajax request upon DOM event.
  • Sortable list that fires an Ajax request upon change.
Installation
  1. Install the Plugin
    <code>$ symfony plugin:install sfJqueryWidgetsPlugin
    
  2. Clear Your Cache
    <code>$ symfony cc
    
  3. Publish Plugins Assets
    <code>$ symfony plugin:publish-assets
    
Usage
sfWidgetFormPropelSelectAjax

Consider that you want in the admin generator for example to fetch subcategories of a certain category using ajax. You already have in the form the drop down list that shows a list of categories, what is missing is the ajax request fired upon change of the drop down list. Normally the ajax request is sent to an action that fetches the subcategories of the selected category and maybe displays them also in a drop down list.

Usage

We need to change the type of widget used to display the category drop down list from sfWidgetFormPropelSelect to sfWidgetFormPropelSelectAjax

  $this->widgetSchema['category'] = new sfWidgetFormPropelSelectAjax(array(
    'model' => 'Category',
    'method' => 'getName',
    'url' => 'test/ajax'
  ));

As you can see in the above snippet we simply specify the model to be used for fetching the records to be displayed in the drop down list, next we specify the method used to display the text in the drop down list, and lastly we specify the url to which the
ajax request is sent to.

In the action test/ajax you can fetch the id of the selected category from the request parameter id

sfWidgetFormPropelJQuerySortable

This is a really cool and effective widget, it allows sorting of a list of models and it’s so easy to use.

Usage
  $this->widgetSchema['categories'] = new sfWidgetFormPropelJQuerySortable(array(
    'model' => 'Category',
    'url' => 'section/new',
  ));

In the action section/new you can fetch the sorted list using the request parameter id

For a complete list of parameters and examples please refer to the phpdocs included in he plugin

4 Comments

  • German Rumm says:

    Hi! I modified your JQuerySortable code a bit, it now accepts ‘extra_data’ parameter/option (default: empty array). Thought I might want to take a look and maybe include it in your plugin.

    I removed ‘change’ callback from JS, and modified ‘data’ option of .ajax call.

    JS now looks like this:

    $html .= sprintf(<<<EOF

    jQuery(‘#%s’).sortable({
    start:
    function(e, ui)
    {
    %s
    },
    stop:
    function(e, ui)
    {
    jQuery.ajax({
    type: ‘POST’,
    dataType: ‘html’,
    url: ‘%s’,
    data: jQuery.param(%s) + ‘&’ + jQuery(this).sortable(‘serialize’),
    %s
    });
    }
    });

    EOF
    ,
    $this->getOption(‘list_id’),
    $this->getOption(‘start’),
    sfContext::getInstance()->getController()->genUrl($this->getOption(‘url’)),
    json_encode($this->getOption(‘extra_data’)),
    $optional
    );

  • German Rumm says:

    I’m using sortable to reorder associated objects from parent object form. So I needed a way to send parent id to the action that supposed to save new ordering.

  • @German Rumm: Tell you what? why don’t join me in developing the plugin. Just register in symfony-project.com website and request to join the sfJqueryWidgetsPlugin team.

  • German Rumm says:

    Ok, sent an application :)