Hi!

I am using a lot of hand written jscript codes due to the required behavior not found in any javascript framework. I've created my Objects in distinct files, although some of them are quite small ( <1kb ). So to make it fast, I've written a filter class that actually parses the files found in the /js directories having *.js suffix. It does not only parse them together but removes whitespaces, comments, indentations so the sum filesize gets a bit compressed. The filter also includes the final file into the response so there is no need to include any *.js ( inside /js ) in a template.

<?php
 
    class JavascriptParser extends sfFilter
    {
      public function execute($filterChain)
      {
        $filterChain->execute();
 
 
        $fp = fopen( "js/compiled.js", "w" );
 
        JavascriptParser::getJSFiles( "js", $fp );
 
        fclose ( $fp );
 
        $response = $this->getContext()->getResponse();
        $content = $response->getContent();
        if (false !== ($pos = strpos($content, '</head>')))
        {
          $html = "<script type='text/javascript' src='/js/compiled.js'></script>";
 
          if ($html)
          {
            $response->setContent(substr($content, 0, $pos).$html.substr($content, $pos));
          }
        }
 
      }
 
      public function getJSFiles( $dir, &$fp )
      {
        $hDir = opendir( $dir );
        while( ( $filename = readdir( $hDir ) ) !== false )
        {
            if ( is_dir( $filename ) )
            {
            }
            else if ( is_dir( $dir."/".$filename ) )
                JavascriptParser::getJSFiles( $dir."/".$filename, $fp );                
            else if ( strpos( $filename, ".js" ) !== false && $filename != "compiled.js" )
            {
                $tmpFile = fopen( $dir."/".$filename, "r" );
                $data = fread( $tmpFile, filesize( $dir."/".$filename ) );
 
                $data = preg_replace( "'\/\*.*?\*\/'si", "", $data  );
                $data = preg_replace( "'//.*?\n'si", "", $data );
                $data = preg_replace( "'[ \t]+'", " ", $data );
 
                fwrite( $fp, " \n".$data );
                fclose( $tmpFile );
            }
        }
        closedir( $hDir );  
      }
    }
 
?>
 

The same should be done with *.css files, since they are even smaller and loading many small files takes much more time then loading one big.

Best Regards

I figured I'd post this little helper for using the tabbed pane JS from http://webfx.eae.net/dhtml/tabpane/tabpane.html in your templates.

Simply download the JS package from the site above and place it in your web/js folder. I chose to move the css files from the JS folder to my CSS folder, but you can do whatever you like.

tabsHelper.php

<?php
/**
 * Helper for Javascript Tabbed Panes
 * 
 * Example Usage
 * <code>
 *  <?php use_helper('tabs') ?>
 *  <?php tabMainJS("tp1","tabPane1", "tabPage1", 'General');?>
 *            This is text of tab 1. This is text of tab 1. This is text of tab 1. 
 *      <?php tabPageOpenClose("tp1", "tabPage2", 'Security');?>
 *            This is text of tab 2. This is text of tab 2. This is text of tab 2. 
 *  <?php tabInit();?>
 * </code>
 * 
 * @package    Helpers
 * @author     Jason Ibele
 * @version    SVN: $Id: tabsHelper.php 4 2006-07-19 14:00:47Z jason.ibele $
 */
 
$response = sfContext::getInstance()->getResponse();
$response->addJavascript('tab/tabpane.js');
$response->addStylesheet('tab/tab.webfx.css');
 
/**
 * Opens a new TabPane object and creates first tab
 *
 * @param string $mid         JavaScript variable name to use for webFXTabPane object
 * @param string $id          Main container div ID
 * @param string $page_id     Name for div ID, each needs to be unique
 * @param string $H2_title    The title for the tab
 * @param string $main_class  Optional class name for main Div (note this must match original class definitions)
 * @param string $page_class  Optional class name for page Div (note this must match original class definitions)
 */
function tabMainJS($mid, $id, $page_id, $H2_title, $main_class='tab-pane', $page_class='tab-page')
{
  echo '<div class="'.$main_class.'" id="'.$id.'">'."\n\t";
  echo '<script type="text/javascript">'."\n\t";
  echo $mid.' = new WebFXTabPane( document.getElementById( "'.$id.'" ) );'."\n\t";
  echo '</script>'."\n\t";
  echo '<div class="'.$page_class.'" id="'.$page_id.'">'."\n\t";
  echo '<h2 class="tab">'.$H2_title.'</h2>'."\n\t";
  echo '<script type="text/javascript">'.$mid.'.addTabPage( document.getElementById( "'.$page_id.'" ) );</script>'."\n";
}
 
/**
 * Closes and existing pane div and opens a new one with required JS
 *
 * @param string $mid         JavaScript variable to use for webFXTabPane object
 * @param string $page_id     Name for div ID, each needs to be unique
 * @param string $H2_title    The title for the tab
 * @param string $page_class  Optional class name for page Div (note this must match original class definitions)
 */
function tabPageOpenClose($mid, $page_id, $H2_title, $page_class='tab-page')
{
  echo '</div>'."\n\t";
  echo '<div class="'.$page_class.'" id="'.$page_id.'">'."\n\t";
  echo '<h2 class="tab">'.$H2_title.'</h2>'."\n\t";
  echo '<script type="text/javascript">'.$mid.'.addTabPage( document.getElementById( "'.$page_id.'" ) );</script>'."\n";
}
 
/**
 * Initiates the javascript for tabs and closes the remaining divs
 *
 * @param string $mid    JavaScript variable to use for webFXTabPane object
 * @param string $n      selected index of tab you want to force as set
 */
function tabInit($mid='', $n='')
{
  echo "\t".'</div>'."\n\t";
  echo '<script type="text/javascript">'."\n\t";
  echo 'setupAllTabs();'."\n\t";
 
  if($n){ // n = selected index of tab you want to force as set
    echo $mid.'.setSelectedIndex('.$n.');';
  }
 
  echo '</script>'."\n";
  echo '</div>'."\n";
}
 
?>

template

<?php use_helper('tabs') ?>
 
 
 
 
 
<!-- open the first tab -->
<?php tabMainJS("tp1","tabPane1", "tabPage1", 'General');?><!-- General is the name of the tab -->
 
          This is text of tab 1. This is text of tab 1. This is text of tab 1. 
 
 
<!-- second tab -->     
    <?php tabPageOpenClose("tp1", "tabPage2", 'Security');?> <!-- Security is the name of the tab -->
 
          This is text of tab 2. This is text of tab 2. This is text of tab 2. 
 
 
<!-- third tab -->      
    <?php tabPageOpenClose("tp1", "tabPage3", 'Example');?> <!-- Example is the name of the tab -->
 
          This is text of tab 3. This is text of tab 3. This is text of tab 3.
 
 
<!-- close tabs and initiate the JS -->
<?php tabInit();?>

I've found it annoying to set the show and hide commands on each remote request. So I've used this to define it globally:

/*
 * Defines the indicator globally
 */ 
Ajax.Responders.register({
  onCreate: function() { Element.show('indicator'); },
  onComplete: function() { Element.hide('indicator'); }
});
 

If you want to hide the Web Debug Details/Menus but also want to have quick access when you need it.

Then this could help you. Just copy this in a js file or print it in your layout:

/*
 * HIDE WEB DEBUG DETAILS ON LAUNCH
 */
Event.observe(window, 'load', function(){
    // check if web debug is on
    if ($('sfWebDebugBar'))
        sfWebDebugToggleMenu();
});

http://www.symfony-project.com/trac/ticket/540

Helper to work with http://tooltip.crtx.org Tooltip.js library (small js library that is using prototype and script.aculo.us, and so is the perfect match for symfony).

You will need to put that file into /helper/ directory, and put Tooltip.js (which you can get at the above-mentioned url) to the /sf/js/prototype/ directory.

Example of usage:

<?php use_helper('Tooltip') ?>
 
<?php echo tooltips_js('autoMoveToCursor=false showEvent=click', 'appear=true blindDown=true', 'blindUp=true', array('style.position' => 'absolute'), array('style.position' => 'absolute')) ?> 
 
<div id="some_id">some text</div>
 
<?php echo tooltip_div('some_id', 'css_class', array('style' => 'visibility: hidden'))?>
  Tooltip text.
</div>

Code is "phpdocumentor ready".

TooltipHelper.php as follows

<?php
 
require_once(sfConfig::get('sf_symfony_lib_dir').'/helper/JavascriptHelper.php');
 
 
/*
 * This file is part of the symfony package.
 * (c) 2006 Dmitry Parnas <parnas@rock.zp.ua>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
 
/**
 * TooltipsHelper.
 *
 * @package    symfony
 * @subpackage helper
 * @author     Dmitry Parnas <parnas@rock.zp.ua>
 * @version    
 */
 
/*
   Helpers to work with Tooltip.js [http://tooltip.crtx.org]
 */
 
 
/**
 * Builds open div tag ready with inforamtion for Tooltip.js
 *
 * Example:
 * <code>
 *   <?php echo tooltip_div('my_element_id', 'css_class_for_it', array('style' => 'visibility: hidden')) ?>
 * </code>
 *
 * @param string HTML id of the element this tooltip is for
 * @param css_class CSS class to skin tooltip in (if not default)
 * @param array Other attributes for the tag. You can also pass string suitable for _parse_attributes()
 *
 * @return string An HTML div string
 *
 */
function tooltip_div($element_id, $css_class = '', $options = array())
{                                                                                                                       
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript('/sf/js/prototype/prototype');
  $response->addJavascript('/sf/js/prototype/effects');
  $response->addJavascript('/sf/js/prototype/Tooltip');
 
  $options = _parse_attributes($options);
 
  $options['class'] = $css_class.' tooltip for_'.$element_id;
 
  return tag('div', $options, true);
}
 
 
 
/**
 * Builds script that sets optional settings for tooltips on the page.
 *
 * Example:
 * <code>
 *   <?php echo tooltips_js('autoMoveToCursor=false showEvent=click', 'appear=true blindDown=true', 'blindUp=true', array('style.position' => 'absolute'), array('style.position' => 'absolute')) ?>
 * </code>
 *
 * @param array Tooltip.js settings. You can also pass string suitable for _parse_attributes()   
 * @param array Ordered list of script.aculo.us effects you want to apply during tooltip show process. You can also pass string suitable for _parse_attributes()
 * @param array Ordered list of script.aculo.us effects you want to apply during tooltip hide process. You can also pass string suitable for _parse_attributes()
 * @param array Other settings for tooltip show process. You can also pass string suitable for _parse_attributes()
 * @param array Other settings for tooltip hide process. You can also pass string suitable for _parse_attributes()
 *
 * @return string An HTML script string.
 *
 */
function tooltips_js($options = array(), $show_effects = array(), $hide_effects = array(), $show_options = array(), $hide_options = array())
{
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript('/sf/js/prototype/prototype');
  $response->addJavascript('/sf/js/prototype/effects');
  $response->addJavascript('/sf/js/prototype/Tooltip');
 
 
  $options      = _parse_attributes($options);
  $show_effects = _parse_attributes($show_effects);
  $hide_effects = _parse_attributes($hide_effects);
  $show_options = _parse_attributes($show_options);
  $hide_options = _parse_attributes($hide_options);
 
  $code = '';
 
  foreach($options as $key => $value)
  {
    $value = _method_option_to_s($value);
 
    $value = (is_bool($value)) ? ($value === false) ? 'false' : 'true' : $value;
 
    $code .= '  Tooltip.'.$key.' = '.$value."\n";
  }
 
  $code .= _build_functions('show', $show_effects, $show_options);
  $code .= _build_functions('hide', $hide_effects, $hide_options);
 
  return javascript_tag($code);
}
 
 
function _build_functions($type, $effects = array(), $options = array())
{
  $code = '';
 
  if($effects) // there is no reason to build showMethod if there is no effects defined
  {
    $code .= '  Tooltip.'.$type.'Method = function (tooltip, options)'."\n";
    $code .= '  {'."\n";
 
    foreach($effects as $key => $value)
    {
      $code .= '    Effect.'.ucfirst($key).'(tooltip, options)'."\n";
    }
 
    if($options)
    {
      foreach($options as $key => $value)
      {
        $value = _method_option_to_s($value);
 
        $value = (is_bool($value)) ? ($value === false) ? 'false' : 'true' : $value;
 
        $code .= '    tooltip.'.$key.' = '.$value."\n";
      }
    }
 
    $code .= '  }'."\n";
 
    return $code;
  }
 
}
 
?>

This JavaScript code registers a change detection mechanism in every form field and notifies the user about unsaved changes. No changes need to be applied to existing modules/actions. Additionaly, the TinyMCE helper can be changed in order to detect changes there as well.

Only requirement: the links for leaving the page need to be in a container with id "header". This can of course be changed.

Add this to the head of the page (or to an external js-file):

var changesDetected = false;
 
/**
 * Registers a change detection mechanism that notifies users about unsaved changes whenever they click on a link.
 */
function registerChangeDetection() {
    /**
     * Notifies user about unsaved changes
     */
    function notifyAboutChanges(e) {
        if(changesDetected){
            //My choice: modal dialog using modalbox (http://www.wildbit.com/labs/modalbox/)
            //Modalbox.show('<div class=\'warning\'><p>Before continuing, you need to save you changes.</p> <input type=\'button\' value=\'Ignore changes\' onclick=\'changesDetected=false;Modalbox.hide()\' style=\'color: #999\' /> <input type=\'button\' value=\'OK\' onclick=\'Modalbox.hide()\' /></div>',  {title: 'Warning', width: 300});
            //Alternative:
            alert('Before continuing, you need to save your changes.');
            return false;
        }
    }
 
    /* Add change detection to every form field */
    if(document.forms.sf_admin_edit_form != null) {
        var elements = Form.getElements(document.forms.sf_admin_edit_form);
        elements.each(function(item) {
            item.onchange = function(e) { changesDetected = true; }
        });
    }
 
    /* Add an onclick handler to every link in the container with id "header" */
    var links = $$('#header a');
    links.each(function(item) {
        if(!(item.onclick instanceof Function)) { //Avoid overwriting existing onclick handlers
            item.onclick = notifyAboutChanges;
        }
    });
}
 

Register the change detection in the body tag:

<body onload="registerChangeDetection()">
 

I also modified the sfRichTextEditorTinyMCE helper in order to use TinyMCE 3 (currently beta). Here is the code relevant to change detection to be put into TinyMCE.init({...}) (Go to http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor/onChange for more information):

setup: function(ed) {
    var i = 0;
    ed.onChange.add(function(ed, l) {
        if(i == 0) i++ //Ignore the first change
        else changesDetected = true;
    });
}
 

If you're like me and prefer to code your own Unobtusive Javascript, you'll probably find this snippet handy. It will search through your project's /web/js folder for any .js files that match the current Symfony action.

For example, the snippet/new action would look for /web/js/snippet/snippet.js and /web/js/snippet/new.js, and add them to the response if either exist.

You can also define an optional subfolder within /web/js where you want the filter to look (i.e. "backend").

The Code

<?php
 
/**
 * Looks for Javascript files based on current action/module and adds them to
 * the current response object.
 * 
 * Add this filter to the end of your filter chain in filters.yml, after the 
 * execution filter:
 * 
 * <code>
 *     rendering: ~
 *     web_debug: ~
 *     security:  ~
 *     
 *     # generally, you will want to insert your own filters here
 *     
 *     cache:     ~
 *     common:    ~
 *     flash:     ~
 *     execution: ~
 *     
 *     auto_javascript_include:
 *       class: myAutoJavascriptIncludeFilter
 * </code>
 *
 * @package     Automatic Javascript Include (AJI)
 * @subpackage  filter
 * @author      Kris Wallsmith <kris [dot] wallsmith [at] gmail [dot] com>
 * @version     SVN: $Id$
 * @copyright   Have at it ...
 */
class myAutoJavascriptIncludeFilter extends sfFilter
{
    /**
     * Include external Javascript files based on last action called.
     * 
     * This kicks in on the way back down the filter chain, so we're sure to
     * catch the last action. Looks through the web/js folder for files that
     * match the naming syntax and adds them to the response. 
     * 
     * You can specify a subfolder of the web/js folder for the filter to 
     * search in app.yml.
     * 
     * @author  Kris Wallsmith <kris [dot] wallsmith [at] gmail [dot] com>
     * @see     sfConfig::get('app_aji_subfolder')
     * @param   sfFilterChain $filterChain
     */
    public function execute($filterChain)
    {
        $filterChain->execute();
 
        $sf_context  = sfContext::getInstance();
        $sf_response = $sf_context->getResponse();
        $sf_web_dir  = sfConfig::get('sf_web_dir');
 
        $module = $sf_context->getModuleName();
        $action = $sf_context->getActionName();
 
        $sub_folder = sfConfig::get('app_aji_subfolder');
        if($sub_folder && $sub_folder{0} != '/') $sub_folder = '/' . $sub_folder;
 
        $fmt = '/js%s/%s/%s.js';
 
        $mod_mod_js = sprintf($fmt, $sub_folder, $module, $module);
        $mod_act_js = sprintf($fmt, $sub_folder, $module, $action);
 
        if(file_exists($sf_web_dir . $mod_mod_js)) $sf_response->addJavascript($mod_mod_js);
        if(file_exists($sf_web_dir . $mod_act_js)) $sf_response->addJavascript($mod_act_js);
    }
}
 
?>

You can pass aditional parameters to input_auto_complete_tag helper. By default, autocompleter pass only object-referer value. For aditional parameter you need use 'with' in $completion_options array. in view layer:

<
<?php echo object_input_tag($model, 'getFilter', array ('size' => 20, 'control_name' => 'filter',));?>
?php echo input_auto_complete_tag('field_to_search','','module/autocomplete', array('autocomplete'=>'off'),array('use_style'=>true,'with'=> " value+'&filter='+$('filter').value"))?>

you must put '" value' (with whitespace) because javascript fail (a little symfony bug). Aditional parameters must go after value.

in control layer:

 public function executeAutocomplete(){
    $search=$this->getRequestParameter('field_to_search');
    $filter=$this->getRequestParameter('filter');
....
}

now you can use field_to_search and filter to construct any query in model layer ans show this in AutocompleteSuccess.php view or another view that you define. this was tested in synfony version > 0.9. Check your version, and review your javascripthelper helper to verify if your input_auto_complete_tag helper supports 'with' option

What is worth noting in the snippet below is the usage of the 'onchange'=> remote_function( ... you can use the remote_function in many places to call other functions ... like in the "update", "complete" etc...

<div id="js_updating">Stand by..</div>
<?php echo form_tag('/module/action', 'method=get class=simpleForm') ?>
Please select the day:
<?php
echo input_date_tag('day', 'now', array('rich' => true, 'readonly'=>true, 'onchange'=> remote_function( array(
      'update'   => 'Area To Update (DIV TAG)',
      'url'      => 'MODULE/ACTION',
      'loading'  => "Element.show('js_updating')",
      'complete' => "Element.hide('js_updating')"
  ))));
 
?>
 
</form>

format a phone number with 7, 10, or 11 digits. also can convert phone number letters to numbers

lib/helpers/PhoneHelper.php

<?php 
 
function format_phone($phone = '', $convert = false, $trim = true)
{
    // If we have not entered a phone number just return empty
    if (empty($phone)) {
        return '';
    }
 
    // Strip out any extra characters that we do not need only keep letters and numbers
    $phone = preg_replace("/[^0-9A-Za-z]/", "", $phone);
 
    // Do we want to convert phone numbers with letters to their number equivalent?
    // Samples are: 1-800-TERMINIX, 1-800-FLOWERS, 1-800-Petmeds
    if ($convert == true) {
        $replace = array('2'=>array('a','b','c'),
                 '3'=>array('d','e','f'),
                     '4'=>array('g','h','i'),
                 '5'=>array('j','k','l'),
                                 '6'=>array('m','n','o'),
                 '7'=>array('p','q','r','s'),
                 '8'=>array('t','u','v'),                                '9'=>array('w','x','y','z'));
 
        // Replace each letter with a number
        // Notice this is case insensitive with the str_ireplace instead of str_replace 
        foreach($replace as $digit=>$letters) {
            $phone = str_ireplace($letters, $digit, $phone);
        }
    }
 
    // If we have a number longer than 11 digits cut the string down to only 11
    // This is also only ran if we want to limit only to 11 characters
    if ($trim == true && strlen($phone)>11) {
        $phone = substr($phone, 0, 11);
    }                        
 
    // Perform phone number formatting here
    if (strlen($phone) == 7) {
        return preg_replace("/([0-9a-zA-Z]{3})([0-9a-zA-Z]{4})/", "$1-$2", $phone);
    } elseif (strlen($phone) == 10) {
        return preg_replace("/([0-9a-zA-Z]{3})([0-9a-zA-Z]{3})([0-9a-zA-Z]{4})/", "($1) $2-$3", $phone);
    } elseif (strlen($phone) == 11) {
        return preg_replace("/([0-9a-zA-Z]{1})([0-9a-zA-Z]{3})([0-9a-zA-Z]{3})([0-9a-zA-Z]{4})/", "$1($2) $3-$4", $phone);
    }
 
    // Return original phone if not 7, 10 or 11 digits long
    return $phone;
}
 

In order to delay a page redirect with several seconds, I wrote this simple helper

<?php
  use_helper('Javascript');
 
  /**
   * Adds javascript code to delay a page redirect
   *
   * @param string 'module/action' or '@rule' of the action (same argument as url_for())
   * @param int time of delay in seconds. Default = 5
   * @return JavaScript tag for delayed page redirect
   */
  function delayed_redirect($internal_uri, $time = 5)
  {
    sfContext::getInstance()->getResponse()->addJavascript(sfConfig::get('sf_prototype_web_dir').'/js/prototype');
    $code = 'new PeriodicalExecuter(function() { location.href=\''.url_for($internal_uri).'\';}, '.$time.')';
 
    return javascript_tag($code);
  }
 

See http://www.symfony-project.com/book/1_0/07-Inside-the-View-Layer#Adding%20Your%20Own%20Helpers for information on how to add your own helper

If you are dealing with i18n and client side effects, you might need an equivalent for the format_number_choice() helper in Javascript. Here is a simplified version:

function format_number_choice(text_string, replace_hash, number) {
  pattern = new RegExp("\\["+number+"\\]\s?([^\|]*)");
 
  function replace_in_string(text_string, replace_hash) {
    for(var i in replace_hash)
     text_string = text_string.replace(new RegExp(i), replace_hash[i]); 
    return text_string;
  }
 
  matches=text_string.match(pattern);
  if(matches != null)
    return replace_in_string(matches[1], replace_hash);
  else {
    pattern = /\[else\]\s?([^\|]*)/;
    matches=text_string.match(pattern);
    if(matches != null)
      return replace_in_string(matches[1], replace_hash);
    else
      return "not found";
  }
}

Use it in your HTML code as follows:

<script language="JavaScript" type="text/javascript">
  document.write(format_number_choice("[0] No apple |[1] One Apple |[2] Two Apples |[else] Many Apples", {'Apple' : 'fruit'}, 0))
  document.write(format_number_choice("[0] No apple |[1] One Apple |[2] Two Apples |[else] Many Apples", [], 1))
  document.write(format_number_choice("[0] No apple |[1] One Apple |[2] Two Apples |[else] Many Apples", [], 2))
  document.write(format_number_choice("[0] No apple |[1] One Apple |[2] Two Apples |[else] Many Apples", [], 3))
</script>

This will output:

No fruit
One Apple
Two Apples
Many Apples

Now, just use enclose the first argument with the __() helper, and you have an internationalized format_number_choice() on the client side.

There are two multi-select box, the first one is parent list menu, the second one is child menu; when clicking item in first list, its submenu will appear in second list, then you can multi-select from 2nd list; and you can multi-select items in 1st list by clicking, double-click, ctrl+click, shift+click, all selected items in 1st list will display their children in 2nd list, all deselected items from 1st list will remove their children from 2nd list. This combo list can be used for select HOBBIES, TYPES, CATEGORIES etc.

*** in multiselSuccess.php:

<script type="text/javascript" src="/sf/js/prototype/prototype.js"></script>
<body onload="new Ajax.Request('/news/select/level/province', {asynchronous:true, evalScripts:false, onComplete:function(request, json){updateJSON(request,json,1)}}); return false;" >

*** in multiselSuccess.php:

<?php
            echo select_tag("province",options_for_select(Array(''=>'-Select-')),'multiple=multiple size=10  onmousedown=GetCurrentListValues(this); onchange=javascript:loadCity(\''.sfConfig::get('app_site_url').'news/select/level/city\',this)');
            echo select_tag('city[]',options_for_select(Array(''=>'-Select-')),'multiple=multiple size=10');
            ?>
            <div id=statusTxt></div>

*** in view.yml:

selectSuccess:
  has_layout: off

*** javascript can be written in multiselSuccess.php, or in another javascript file multiselSuccess.js: if written in a seperate file multiselSuccess.js, put it under PROJECT_NAME\web\js\, and in ...\apps\APPLICATION_NAME\config:

    javascripts:    [multiselSuccess.js ]

<script language="javascript">
<!--//
/**
 * ajax no refresh cascading 2-level menu
 *
 */
function loadCity(url,CONTROL) {                            //load city
 
    var strTmp=provinceChanged(CONTROL);                    //result format: +provinceId or -provinceId
    var provChg=strTmp.split(",");
    url=url+"/id/"+provChg[0];                              //provChg[0]: item value of first menu; url: /news/select/level/city/id/ItemValueOfFirstMenu
    new Ajax.Request(url, {asynchronous:true, evalScripts:false, onComplete:function(request, json){updateJSON(request,json,2,provChg[1])}});
    return false;
}
 
var arrOldValues;
function GetCurrentListValues(CONTROL){
    var strValues = "";
    strValues = GetSelectValues(CONTROL);
    arrOldValues = strValues.split(",")
}
 
function GetSelectValues(CONTROL){
    var strTemp = "";
    for(var i = 0;i < CONTROL.length;i++){
        if(CONTROL.options[i].selected == true){
            strTemp += "1,";
        }
        else{
            strTemp += "0,";
        }
    }
    return strTemp;
}
 
function provinceChanged(CONTROL){
    var strTemp = GetSelectValues(CONTROL);
    arrNewValues = strTemp.split(",");
    var sum=0;
    for(var i=0;i<arrNewValues.length-1;i++){
        sum+=eval(arrNewValues[i]);
        if (sum >= 2){                                      //more than 1 are selected
            break;
        }
        if (arrNewValues[i] == 1){                          //when this condition is met, sum must be 1
            var selectedPos=i;
        }
    }
 
    if (sum==0){                                            //deselect all by ^Click; remove all from 2nd menu
        provChg=""+",--";
    }
    else if (sum==1){                                       //only one selected, click or ctrl+click
        if (arrOldValues[selectedPos] == 0){                //if this selcted one wasn't selected before, just add;
                                                            //at this point,arrNewValues[selectedPos] must be 1
            removeOptionAll("city");
            provChg=CONTROL.options[selectedPos].value+",+";
        }
        else{               //if this selcted one was selected before, remove all others but keep selected of this one
            removeOptionAll("city");
            provChg=CONTROL.options[selectedPos].value+",+";        //???to simplify, just add, previously selected may be lost
        }
    }
    else{       //
        for(var i=0;i<arrNewValues.length-1;i++){
            if (arrNewValues[i] != arrOldValues[i]){
                if (arrNewValues[i]==1){                    //add a new province
 
                    provChg=CONTROL.options[i].value+",+";
                }
                else{                                       //remove a new province
                    provChg=CONTROL.options[i].value+",-";
                }
            }
        }
    }
    return provChg;
}
 
/**
 * ajax no refresh 2-level cascading menu
 *
 */
function addOption(objSelectNow,txt,val)
{
    //using W3C syntax add Options for SELECT
    var objOption = document.createElement("OPTION");
    objOption.text= txt;
    objOption.value=val;
    objSelectNow.options.add(objOption);
}
 
function addOptionGroup(selectId,optGroup)
{
    var objSelect = document.getElementsByTagName("SELECT");
    var objSelectNow = objSelect[selectId];
 
    if (selectId=="province"){
        objSelectNow.length = 1;
    }
        /// add Options group
        for (i=0; i<optGroup.length; i++)
        {
            addOption(objSelectNow, optGroup[i][1], optGroup[i][0]);
        }
 
}
 
 
function removeOptionGroup(selectId,optGroup)                   //optGroup: array of 2nd menu corresponding to deselected item of 1st menu; categoryId=>categoryName
{
    var objSelect = document.getElementsByTagName("SELECT");
    var objSelectNow = objSelect[selectId];
 
    for (i=0;i<objSelectNow.length;i++){
        if (objSelectNow.options[i].value==optGroup[0][0]){     //the first position to be removed
            var bgn=i;
            break;
        }
    }
 
    /// remove Options
    for (i=0;i<optGroup.length;i++){
        objSelectNow.options.remove(bgn);
    }
}
 
function removeOptionAll(selectId)
{
    var objSelect = document.getElementsByTagName("SELECT");
    var objSelectNow = objSelect[selectId];
    for (i=1;i<objSelectNow.options.length;){
        objSelectNow.options.remove(1);
    }
}
 
function updateJSON(request, json,level,operation){
    var responses = json;
    if (!json){
      //if you don't use the json tips then evaluate the renderedText instead
      var responses = eval('(' + request.responseText + ')');
    }
    if (level==1)                                       //for 1st menu
        addOptionGroup("province",responses);
    else if (level==2){                                 //for 2nd menu
        if (operation=="+"){
            addOptionGroup("city",responses);
        }
        else if (operation=="-"){
            removeOptionGroup("city",responses);
        }
        else if (operation=="--"){
            removeOptionAll("city");
        }
    }
}
 
-->
</script>

*** in actions.classs.php:

public function executeSelect(){
    /**
     * ajax no refresh 2-level cascading menu back-end
     *
     */
    //load data:
 
    $c=new Criteria();
    $c->add(CategoryPeer::PARENT_ID,NULL);                  //get contents for 1st menu
    $categories=CategoryPeer::doSelect($c);
    $parent="";
    if ($categories){
        $i=0;
        $parent='[';
        foreach ($categories as $category){
            $name=$category->getName();
            $id=$category->getId();
            $parent=$parent.'["'.$id.'","'.$name.'"],';     //format for 1st menu: [["1","German"],["2","France"],["3","Argentina"]]
 
            //retrive records whose parent_id is..
            $c=new Criteria();
            $c->add(CategoryPeer::PARENT_ID,$category->getId());
            $categories_sub=CategoryPeer::doSelect($c);
            $city[$id]='[';                                  //index of $city[] is category id; format of $city[]:[["48","Team1.Fr"],["49","Team2.Fr"],["50","Team3.Fr"],["51","Team4.Fr"],["52","Team5.Fr"]]
            foreach ($categories_sub as $category_sub){
                $city[$id]=$city[$id].'["'.$category_sub->getId().'","'.$category_sub->getName().'"],';
            }
            $city[$id]=rtrim($city[$id],",");
            $city[$id].=']';
            $i++;
        }
    }
    $parent=rtrim($parent,",");
    $parent.=']';
 
    $level=$this->getRequestParameter('level');
    if($level=="province"||$level==""){     //level=province, output contents for first menu
         $this->output=$parent;
    }
    else if($level=="city"){                //level=city, output contents for second menu
        $id=$this->getRequestParameter('id');
        $this->output=$city[$id];
    }
    else{                                   //false
        $this->output="error when getting data";
    }
    return sfView::SUCCESS;
}

*** in selectSuccess.php:

<?php
echo $output;
?>

function process(feeder, wrapper, method, content) {
    xmlhttp = getxmlhttp();
    if(method == "GET") {
        xmlhttp.open("GET", feeder,true);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                wrapper.innerHTML = xmlhttp.responseText;
            }
        }
 
        xmlhttp.send(null);
    } else {
        xmlhttp.open("POST", feeder, true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=iso-8859-1");
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                wrapper.innerHTML = xmlhttp.responseText;
                dumpingData();
                //toogleEditorMode('contenttext');
            }
        }
        xmlhttp.send(content);
    }
}
 
/***** USAGE
obj = document.getElementById('content');
process ("feeder.php?go="+obj.value, obj, "GET", "");
*****/

function getxmlhttp() {
    //Create a boolean variable to check for a valid IE instance.
    var xmlhttp = false;
 
    //Check if we are using IE.
    try {
        //If the javascript version is greater than 5.
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        //If not, then use the older active x object.
        try {
            //If we are using IE.
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            //Else we must be using a non-IE browser.
            xmlhttp = false;
        }
    }
 
    //If we are using a non-IE browser, create a JavaScript instance of the object.
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
 
    return xmlhttp;
}

function getxmlhttp() {
    //Create a boolean variable to check for a valid IE instance.
    var xmlhttp = false;
 
    //Check if we are using IE.
    try {
        //If the javascript version is greater than 5.
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        //If not, then use the older active x object.
        try {
            //If we are using IE.
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            //Else we must be using a non-IE browser.
            xmlhttp = false;
        }
    }
 
    //If we are using a non-IE browser, create a JavaScript instance of the object.
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
 
    return xmlhttp;
}
[/code/

For ergonomic and graphism reasons, I sometimes prefer to use link rather than buttons and/or button rather than links...

To do so, I created this small function :

<?php
# File : JsHelper.php
 
// use of "normal" Javascript Helper
use_helper('Javascript');
 
 
/*!
 * Create a link that submit the closest parent form
 *
 * @param $string    string : text to display
 * @param $options mixed : options to be pass to the tag
 * @return string                : HTML code for the link
 */
function link_to_submit( $string, $options = null )
{
  $func = ";var a=this.ancestors();for(var i in a){if(a[i].tagName=='FORM'){try{a[i].onsubmit();} catch(err){a[i].submit();}break;}}";
  return link_to_function( $string, $func, $options );
}
 
 
 
/*!
 * Create a button that act as a link
 *
 * @param $string    string : text to display in the button
 * @param $url         string : URL of the link
 * @param $options mixed : options to be pass to the tag
 * @return string                : HTML code for the link
 */
function button_to_link( $string, $url, $options = null