[Sommaire] [Imprimer]

   1  <?php
   2  /**
   3   *  File containing the JavaScriptHelper class and support functions
   4   *
   5   *  (PHP 5)
   6   *
   7   *  @package PHPonTrax
   8   *  @version $Id: javascript_helper.php 229 2006-07-18 11:20:04Z john $
   9   *  @copyright (c) 2005 John Peterson
  10   *
  11   *  Permission is hereby granted, free of charge, to any person obtaining
  12   *  a copy of this software and associated documentation files (the
  13   *  "Software"), to deal in the Software without restriction, including
  14   *  without limitation the rights to use, copy, modify, merge, publish,
  15   *  distribute, sublicense, and/or sell copies of the Software, and to
  16   *  permit persons to whom the Software is furnished to do so, subject to
  17   *  the following conditions:
  18   *
  19   *  The above copyright notice and this permission notice shall be
  20   *  included in all copies or substantial portions of the Software.
  21   *
  22   *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  23   *  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  24   *  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  25   *  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  26   *  LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  27   *  OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  28   *  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  29   */
  30  
  31  /**
  32   *  @todo Document this class
  33   *  @package PHPonTrax
  34   */
  35  class JavaScriptHelper extends Helpers {
  36  
  37      /**
  38       * 
  39       *
  40       */
  41      function __construct() {
  42          parent::__construct();
  43          $this->javascript_callbacks = is_array($GLOBALS['JAVASCRIPT_CALLBACKS']) ? $GLOBALS['JAVASCRIPT_CALLBACKS'] : array('uninitialized', 'loading', 'loaded', 'interactive', 'complete', 'failure', 'success');    
  44          $this->ajax_options = array_merge(array('before', 'after', 'condition', 'url', 'asynchronous', 'method', 'insertion', 'position', 'form', 'with', 'update', 'script'), $this->javascript_callbacks);
  45          $this->javascript_path = dirname(__FILE__).'/javascripts';
  46  
  47      }
  48  
  49      protected function options_for_javascript($options) {
  50          $javascript = array();
  51          if(is_array($options)) {
  52              $javascript = array_map(create_function('$k, $v', 'return "{$k}:{$v}";'), array_keys($options), array_values($options));
  53              sort($javascript);
  54          }
  55          return '{' . implode(', ', $javascript) . '}';
  56      }
  57      
  58      private function array_or_string_for_javascript($option) {
  59          if(is_array($option)) {
  60              $js_option = "['" . implode('\',\'', $option) . "']";
  61          } elseif (!is_null($option)) {
  62              $js_option = "'{$option}'";
  63          }
  64          return $js_option;
  65      }
  66      
  67      private function options_for_ajax($options) {
  68          $js_options = $this->build_callbacks($options);    
  69          $js_options['asynchronous'] = ($options['type'] != 'synchronous') ? "true" : "false";
  70          if($options['method']) {
  71              $js_options['method'] = $this->method_option_to_s($options['method']);
  72          }
  73          if($options['position']) {
  74              $js_options['insertion'] = "Insertion." . Inflector::camelize($options['position']);
  75          }
  76          $js_options['evalScripts'] = $options['script'] ? $options['script'] : "true";
  77          
  78          if($options['form']) {
  79              $js_options['parameters'] = "Form.serialize(this)";
  80          } elseif($options['submit']) {
  81              $js_options['parameters'] = "Form.serialize(document.getElementById('{$options['submit']}'))";
  82          } elseif($options['with']) {
  83              $js_options['parameters'] = $options['with'];
  84          }
  85          return $this->options_for_javascript($js_options);
  86      }
  87      
  88      private function method_option_to_s($method) {
  89          return ((is_string($method) && !strstr($method, "'")) ? "'{$method}'" : $method);
  90      }
  91      
  92      private function build_observer($klass, $name, $options = array()) {
  93          if($options['update']) {
  94              if(!$options['with']) {
  95                  $options['with'] = 'value';
  96              }
  97          }
  98          $callback = $this->remote_function($options);
  99          $javascript  = "new {$klass}('{$name}', ";
 100          if($options['frequency']) {
 101              $javascript .= "{$options['frequency']}, ";
 102          }
 103          $javascript .= "function(element, value) {";
 104          $javascript .= "{$callback}})";
 105          return $this->javascript_tag($javascript);
 106      }
 107      
 108      private function build_callbacks($options) {
 109          $callbacks = array();
 110          foreach($options as $callback => $code) {
 111              if(in_array($callback, $this->javascript_callbacks)) {
 112                  $name = 'on' . Inflector::capitalize($callback);
 113                  $callbacks[$name] = "function(request){{$code}}";
 114              }
 115          }
 116          return $callbacks;
 117      }
 118      
 119      private function remove_ajax_options($options) {
 120          if(is_array($options)) {
 121              $GLOBALS['ajax_options'] = $this->ajax_options;
 122              foreach($options as $option_key => $option_value) {
 123                  if(!in_array($option_key, $this->ajax_options)) {
 124                      $new_options[$option_key] = $option_value;  
 125                  }  
 126              } 
 127              if(is_array($new_options)) {
 128                  $options = $new_options; 
 129              }           
 130          }    
 131          return $options;    
 132      }
 133         
 134      # Returns a link that'll trigger a javascript $function using the 
 135      # onclick handler and return false after the fact.
 136      #
 137      # Examples:
 138      #   link_to_function("Greeting", "alert('Hello world!')")
 139      #   link_to_function(image_tag("delete"), "if confirm('Really?'){ do_delete(); }")
 140      function link_to_function($name, $function, $html_options = array()) {
 141          return $this->content_tag("a", $name, array_merge(array('href' => "#", 'onclick' => "{$function}; return false;"), $html_options));
 142      }
 143      
 144      # Returns a link to a remote action defined by <tt>$options['url']</tt> 
 145      # (using the url_for() format) that's called in the background using 
 146      # XMLHttpRequest. The result of that request can then be inserted into a
 147      # DOM object whose id can be specified with <tt>$options['update']</tt>. 
 148      # Usually, the result would be a partial prepared by the controller with
 149      # render_partial. 
 150      #
 151      # Examples:
 152      #  link_to_remote("Delete this post", array("update" => "posts", array("url" => array(":action" => "destroy", ":id" => $post->id)))
 153      #  link_to_remote(image_tag("refresh"), array("update" => "emails", "url" => array(":action" => "list_emails")))
 154      #  link_to_remote(image_tag("refresh"), array("update" => "emails", "url" => "/posts/list_emails"))
 155      #
 156      # You can also specify a hash for <tt>$options['update']</tt> to allow for
 157      # easy redirection of output to an other DOM element if a server-side error occurs:
 158      #
 159      # Example:
 160      #  link_to_remote("Delete this post", array(
 161      #      "url" => array(":action" => "destroy", ":id" => $post->id),
 162      #      "update" => array("success" => "posts", "failure" => "error")
 163      #      ))
 164      #
 165      # Optionally, you can use the <tt>$options['position']</tt> parameter to influence
 166      # how the target DOM element is updated. It must be one of 
 167      # <tt>before</tt>, <tt>top</tt>, <tt>bottom</tt>, or <tt>after</tt>.
 168      #
 169      # By default, these remote requests are processed asynchronous during 
 170      # which various JavaScript callbacks can be triggered (for progress indicators and
 171      # the likes). All callbacks get access to the <tt>request</tt> object,
 172      # which holds the underlying XMLHttpRequest. 
 173      #
 174      # To access the server response, use <tt>request.responseText</tt>, to
 175      # find out the HTTP status, use <tt>request.status</tt>.
 176      #
 177      # Example:
 178      #   link_to_remote($word, array(
 179      #       "url" => array(":action" => "undo", "n" => $word_counter ),
 180      #       "complete" => "undoRequestCompleted(request)"))
 181      #
 182      # The callbacks that may be specified are (in order):
 183      #
 184      # <tt>loading</tt>::       Called when the remote document is being 
 185      #                           loaded with data by the browser.
 186      # <tt>loaded</tt>::        Called when the browser has finished loading
 187      #                           the remote document.
 188      # <tt>interactive</tt>::   Called when the user can interact with the 
 189      #                           remote document, even though it has not 
 190      #                           finished loading.
 191      # <tt>success</tt>::       Called when the XMLHttpRequest is completed,
 192      #                           and the HTTP status code is in the 2XX range.
 193      # <tt>failure</tt>::       Called when the XMLHttpRequest is completed,
 194      #                           and the HTTP status code is not in the 2XX
 195      #                           range.
 196      # <tt>complete</tt>::      Called when the XMLHttpRequest is complete 
 197      #                           (fires after success/failure if they are present).,
 198      #                     
 199      # You can further refine <tt>success</tt> and <tt>failure</tt> by adding additional 
 200      # callbacks for specific status codes:
 201      #
 202      # Example:
 203      #   link_to_remote($word,
 204      #       "url" => array(":action" => "action"),
 205      #       "failure" => "alert('HTTP Error ' + request.status + '!')")
 206      #
 207      # A status code callback overrides the success/failure handlers if present.
 208      #
 209      # If you for some reason or another need synchronous processing (that'll
 210      # block the browser while the request is happening), you can specify 
 211      # <tt>$options['type'] = "synchronous"</tt>.
 212      #
 213      # You can customize further browser side call logic by passing
 214      # in JavaScript code snippets via some optional parameters. In
 215      # their order of use these are:
 216      #
 217      # <tt>confirm</tt>::      Adds confirmation dialog.
 218      # <tt>condition</tt>::    Perform remote request conditionally
 219      #                          by this expression. Use this to
 220      #                          describe browser-side conditions when
 221      #                          request should not be initiated.
 222      # <tt>before</tt>::       Called before request is initiated.
 223      # <tt>after</tt>::        Called immediately after request was
 224      #                          initiated and before <tt>:loading</tt>.
 225      # <tt>submit</tt>::       Specifies the DOM element ID that's used
 226      #                          as the parent of the form elements. By 
 227      #                          default this is the current form, but
 228      #                          it could just as well be the ID of a
 229      #                          table row or any other DOM element.
 230      function link_to_remote($name, $options = array(), $html_options = array()) {
 231          return $this->link_to_function($name, $this->remote_function($options), $html_options);
 232      }
 233      
 234      # Periodically calls the specified url (<tt>$options['url']</tt>) every <tt>options[:frequency]</tt> seconds (default is 10).
 235      # Usually used to update a specified div (<tt>$options['update']</tt>) with the results of the remote call.
 236      # The options for specifying the target with 'url' and defining callbacks is the same as link_to_remote().
 237      function periodically_call_remote($options = array()) {
 238          $frequency = $options['frequency'] ? $options['frequency'] : 10; # every ten seconds by default
 239          $code = "new PeriodicalExecuter(function() {" . $this->remote_function($options) . "}, {$frequency})";
 240          return $this->javascript_tag($code);
 241      }
 242      
 243      # Returns a form tag that will submit using XMLHttpRequest in the background instead of the regular 
 244      # reloading POST arrangement. Even though it's using JavaScript to serialize the form elements, the form submission 
 245      # will work just like a regular submission as viewed by the receiving side (all elements available in $_REQUEST).
 246      # The options for specifying the target with :url and defining callbacks is the same as link_to_remote().
 247      #
 248      # A "fall-through" target for browsers that doesn't do JavaScript can be specified with the :action/:method options on :html
 249      #
 250      #   form_remote_tag("html" => array("action" => url_for(":controller" => "some", ":action" => "place")))
 251      # The Hash passed to the 'html' key is equivalent to the options (2nd) argument in the FormTagHelper::form_tag() method.
 252      #
 253      # By default the fall-through action is the same as the one specified in the 'url' (and the default method is 'post').
 254      function form_remote_tag($options = array()) {
 255          $options['form'] = true;       
 256          if (!$options['html']) {
 257              $options['html'] = array();
 258          }
 259          $options['html']['onsubmit'] = $this->remote_function($options) . "; return false;";
 260          if($options['html']['action']) {
 261              $url_for_options = $options['html']['action'];
 262          } else {
 263              $url_for_options = url_for($options['url']);    
 264          }
 265          if(!$options['html']['method']) {
 266              $options['html']['method'] = "post";
 267          }
 268          return $this->tag("form", $options['html'], true);
 269      }
 270          
 271      # Returns a button input tag that will submit form using XMLHttpRequest in the background instead of regular
 272      # reloading POST arrangement. <tt>$options</tt> argument is the same as in <tt>form_remote_tag()</tt>
 273      function submit_to_remote($name, $value, $options = array()) {
 274          if(!isset($options['with'])) {
 275              $options['with'] = 'Form.serialize(this.form)';
 276          }
 277          if(!$options['html']) {
 278              $options['html'] = array();
 279          }
 280          $options['html']['type'] = 'button';
 281          $options['html']['onclick'] = $this->remote_function($options) . "; return false;";
 282          $options['html']['name'] = $name;
 283          $options['html']['value'] = $value;      
 284          return $this->tag("input", $options['html']);
 285      }
 286      
 287      # Returns a Javascript function (or expression) that'll update a DOM element according to the options passed.
 288      #
 289      # * <tt>content</tt>: The content to use for updating. Can be left out if using block, see example.
 290      # * <tt>action</tt>: Valid options are :update (assumed by default), :empty, :remove
 291      # * <tt>position</tt> If the :action is :update, you can optionally specify one of the following positions: :before, :top, :bottom, :after.
 292      #
 293      # Examples:
 294      #   javascript_tag(update_element_function(
 295      #         "products", :position => :bottom, :content => "<p>New product!</p>")) 
 296      #
 297      #    replacement_function = update_element_function("products") do 
 298      #     <p>Product 1</p>
 299      #     <p>Product 2</p>
 300      #    end 
 301      #   javascript_tag(replacement_function) 
 302      #
 303      # This method can also be used in combination with remote method call where the result is evaluated afterwards to cause
 304      # multiple updates on a page. Example:
 305      #
 306      #   # Calling view
 307      #    form_remote_tag(array("url" => array(":action" => "buy"), "complete" => evaluate_remote_response())) 
 308      #    all the inputs here...
 309      #
 310      #   # Controller action
 311      #   function buy() {
 312      #       $product = new Product;
 313      #       $this->product = $product->find(1);
 314      #   }
 315      #
 316      #   # Returning view
 317      #    update_element_function(
 318      #         "cart", array(":action" => "update", "position" => "bottom", 
 319      #         "content" => "<p>New Product: #{$product->name}</p>")) 
 320      #    update_element_function("status", array("binding" => $binding) do 
 321      #     You've bought a new product!
 322      #    end 
 323      #
 324      function update_element_function($element_id, $options = array(), $block = null) {   
 325          $content = $this->escape_javascript(($options['content'] ? $options['content'] : null));
 326          if(!is_null($block)) {
 327              $content = $this->escape_javascript($this->capture($block));
 328          }
 329          switch((isset($options['action']) ? $options['action'] : 'update')) {
 330              case 'update':
 331                  if($options['position']) {
 332                      $javascript_function = "new Insertion." . Inflector::camelize($options['position']) . "('{$element_id}','{$content}')";
 333                  } else {
 334                      $javascript_function = "$('{$element_id}').innerHTML = '{$content}'";
 335                  }
 336                  break;
 337              case 'empty':
 338                  $javascript_function = "$('{$element_id}').innerHTML = ''";
 339                  break;
 340              case 'remove':
 341                  $javascript_function = "Element.remove('{$element_id}')";
 342                  break;
 343              default:
 344                  $this->controller_object->raise("Invalid action, choose one of 'update', 'remove', 'empty'", "ArgumentError");
 345          }       
 346          $javascript_function .= ";\n";
 347          return ($options['binding'] ? $javascript_function . $options['binding'] : $javascript_function);
 348      }
 349      
 350      # Returns 'eval(request.responseText)' which is the Javascript function that form_remote_tag can call in :complete to
 351      # evaluate a multiple update return document using update_element_function calls.
 352      function evaluate_remote_response() {
 353          return "eval(request.responseText)";
 354      }
 355      
 356      
 357      /*
 358      # Returns the javascript needed for a remote function.
 359      # Takes the same arguments as link_to_remote.
 360      # 
 361      # Example:
 362      #   <select id="options" onchange="<?= remote_function(array("update" => "options", "url" => array(":action" => "update_options"))) ?>">
 363      #     <option value="0">Hello</option>
 364      #     <option value="1">World</option>
 365      #   </select>
 366      */
 367      function remote_function($options) {
 368          $javascript_options = $this->options_for_ajax($options);       
 369          $update = '';
 370          if(is_array($options['update'])) {
 371              $update  = array();
 372              if(isset($options['update']['success'])) {
 373                  $update[] = "success:'{$options['update']['success']}'";
 374              }
 375              if($options['update']['failure']) {
 376                  $update[] = "failure:'{$options['update']['failure']}'";
 377              }
 378              $update = '{' . implode(',', $update) . '}';
 379          } elseif($options['update']) {
 380              $update .= "'{$options['update']}'";
 381          }   
 382              
 383          $function  = empty($update) ? "new Ajax.Request(" : "new Ajax.Updater({$update}, ";
 384          $function .= "'" . url_for($options['url']) . "'";
 385          $function .= ", " . $javascript_options . ")";
 386          
 387          if($options['before']) {
 388              $function = "{$options['before']}; {$function}";
 389          }
 390          if($options['after']) { 
 391              $function = "{$function}; {$options['after']}";
 392          }
 393          if($options['condition']) {
 394              $function = "if ({$options['condition']}) { {$function}; }";
 395          }
 396          if($options['confirm']) {
 397              $function = "if (confirm('" . $this->escape_javascript($options['confirm']) . "')) { {$function}; }";
 398          }
 399          return $function;
 400      }
 401      
 402      # Includes the Action Pack JavaScript libraries inside a single <script> 
 403      # tag. The function first includes prototype.js and then its core extensions,
 404      # (determined by filenames starting with "prototype").
 405      # Afterwards, any additional scripts will be included in random order.
 406      #
 407      # Note: The recommended approach is to copy the contents of
 408      # action_view/helpers/javascripts/ into your application's
 409      # public/javascripts/ directory, and use javascript_include_tag() to 
 410      # create remote <script> links.
 411      function define_javascript_functions() {
 412          $javascript = '<script type="text/javascript">';
 413          
 414          # load prototype.js and all .js files
 415          $prototype_libs = glob($this->javascript_path.'/*.js');
 416          if(count($prototype_libs)) {
 417              rsort($prototype_libs);
 418              foreach($prototype_libs as $filename) { 
 419                  $javascript .= "\n" . file_get_contents($filename);
 420              }
 421          }
 422          
 423          return $javascript . '</script>';
 424      }
 425      
 426      # Observes the field with the DOM ID specified by +field_id+ and makes
 427      # an AJAX call when its contents have changed.
 428      # 
 429      # Required $options are:
 430      # <tt>url</tt>::       +url_for+-style options for the action to call
 431      #                       when the field has changed.
 432      # 
 433      # Additional options are:
 434      # <tt>frequency</tt>:: The frequency (in seconds) at which changes to
 435      #                       this field will be detected. Not setting this
 436      #                       option at all or to a value equal to or less than
 437      #                       zero will use event based observation instead of
 438      #                       time based observation.
 439      # <tt>update</tt>::    Specifies the DOM ID of the element whose 
 440      #                       innerHTML should be updated with the
 441      #                       XMLHttpRequest response text.
 442      # <tt>with</tt>::      A JavaScript expression specifying the
 443      #                       parameters for the XMLHttpRequest. This defaults
 444      #                       to 'value', which in the evaluated context 
 445      #                       refers to the new field value.
 446      #
 447      # Additionally, you may specify any of the options documented in
 448      # link_to_remote().
 449      function observe_field($field_id, $options = array()) {
 450          if($options['frequency'] > 0) {
 451              return $this->build_observer('Form.Element.Observer', $field_id, $options);
 452          } else {
 453              return $this->build_observer('Form.Element.EventObserver', $field_id, $options);
 454          }
 455      }
 456      
 457      # Like observe_field(), but operates on an entire form identified by the
 458      # DOM ID $form_id. $options are the same as observe_field(), except 
 459      # the default value of the <tt>with</tt> option evaluates to the
 460      # serialized (request string) value of the form.
 461      function observe_form($form_id, $options = array()) {
 462          if($options['frequency']) {
 463              return $this->build_observer('Form.Observer', $form_id, $options);
 464          } else {
 465              return $this->build_observer('Form.EventObserver', $form_id, $options);
 466          }
 467      }
 468      
 469      # Returns a JavaScript snippet to be used on the AJAX callbacks for starting
 470      # visual effects.
 471      #
 472      # This method requires the inclusion of the script.aculo.us JavaScript library.
 473      #
 474      # Example:
 475      #   link_to_remote("Reload", array("update" => "posts", 
 476      #         "url" => array(":action" => "reload"), 
 477      #         "complete" => visual_effect("highlight", "posts", array("duration" => 0.5)))
 478      #
 479      # If no element_id is given, it assumes "element" which should be a local
 480      # variable in the generated JavaScript execution context. This can be used
 481      # for example with drop_receiving_element:
 482      #
 483      #   drop_receving_element (...), "loading" => visual_effect("fade")
 484      #
 485      # This would fade the element that was dropped on the drop receiving element.
 486      #
 487      # You can change the behaviour with various options, see
 488      # http://script.aculo.us for more documentation.
 489      function visual_effect($name, $element_id = false, $js_options = array()) {
 490          $element = ($element_id ? "'{$element_id}'" : "element");
 491          if($js_options['queue']) {
 492              $js_options['queue'] = "'{$js_options['queue']}'";
 493          }
 494          return "new Effect." . Inflector::camelize($name) . "({$element}," . $this->options_for_javascript($js_options) . ");";
 495      }
 496      
 497      # Makes the element with the DOM ID specified by +element_id+ sortable
 498      # by drag-and-drop and make an AJAX call whenever the sort order has
 499      # changed. By default, the action called gets the serialized sortable
 500      # element as parameters.
 501      #
 502      # This method requires the inclusion of the script.aculo.us JavaScript library.
 503      #
 504      # Example:
 505      #    sortable_element("my_list", array("url" => array(":action" => "order"))) 
 506      #
 507      # In the example, the action gets a "my_list" array parameter 
 508      # containing the values of the ids of elements the sortable consists 
 509      # of, in the current order.
 510      #
 511      # You can change the behaviour with various options, see
 512      # http://script.aculo.us for more documentation.
 513      function sortable_element($element_id, $options = array()) {
 514          if(!$options['with']) {
 515              $options['with'] = "Sortable.serialize('{$element_id}')";
 516          }
 517          if(!$options['onUpdate']) {
 518              $options['onUpdate'] = "function(){" . $this->remote_function($options) . "}";
 519          }
 520          $options = $this->remove_ajax_options($options);
 521          foreach(array('tag', 'overlap', 'constraint', 'handle') as $option) {
 522              if($options[$option]) {
 523                  $options[$option] = "'{$options[$option]}'";
 524              }
 525          }
 526          
 527          if($options['containment']) {
 528              $options['containment'] = $this->array_or_string_for_javascript($options['containment']);
 529          }
 530          if($options['only']) {
 531              $options['only'] = $this->array_or_string_for_javascript($options['only']);
 532          }
 533          return $this->javascript_tag("Sortable.create('{$element_id}', " . $this->options_for_javascript($options) . ")");
 534      }
 535      
 536      # Makes the element with the DOM ID specified by $element_id draggable.
 537      #
 538      # This method requires the inclusion of the script.aculo.us JavaScript library.
 539      #
 540      # Example:
 541      #    draggable_element("my_image", array("revert" => true))
 542      # 
 543      # You can change the behaviour with various options, see
 544      # http://script.aculo.us for more documentation. 
 545      function draggable_element($element_id, $options = array()) {
 546          return $this->javascript_tag("new Draggable('{$element_id}', " . $this->options_for_javascript($options) . ")");
 547      }
 548      
 549      # Makes the element with the DOM ID specified by $element_id receive
 550      # dropped draggable elements (created by draggable_element).
 551      # and make an AJAX call  By default, the action called gets the DOM ID of the
 552      # element as parameter.
 553      #
 554      # This method requires the inclusion of the script.aculo.us JavaScript library.
 555      #
 556      # Example:
 557      #    drop_receiving_element("my_cart", array("url" => array(":controller" => "cart", ":action" => "add"))) 
 558      #
 559      # You can change the behaviour with various options, see
 560      # http://script.aculo.us for more documentation.
 561      function drop_receiving_element($element_id, $options = array()) {
 562          if(!$options['with']) {
 563              $options['with'] = "'id=' + encodeURIComponent(element.id)";
 564          }
 565          if(!$options['onUpdate']) {
 566              $options['onUpdate'] = "function(element){" . $this->remote_function($options) . "}";
 567          }
 568          $options = $this->remove_ajax_options($options);
 569          if($options['accept']) {
 570              $options['accept'] = $this->array_or_string_for_javascript($options['accept']);  
 571          }  
 572          if($options['hoverclass']) {
 573              $options['hoverclass'] = "'{$options['hoverclass']}'";
 574          }
 575          return $this->javascript_tag("Droppables.add('{$element_id}', " . $this->options_for_javascript($options) . ")");
 576      }
 577      
 578      # Escape carrier returns and single and double quotes for JavaScript segments.
 579      function escape_javascript($javascript) {
 580          return preg_replace('/\r\n|\n|\r/', "\\n",
 581                 preg_replace_callback('/["\']/', create_function('$m', 'return "\\{$m}";'),
 582                 (!is_null($javascript) ? $javascript : '')));
 583      }
 584      
 585      # Returns a JavaScript tag with the $content inside. Example:
 586      #   javascript_tag("alert('All is good')") => <script type="text/javascript">alert('All is good')</script>
 587      function javascript_tag($content) {
 588          return $this->content_tag("script", $this->javascript_cdata_section($content), array('type' => "text/javascript"));
 589      }
 590      
 591      function javascript_cdata_section($content) {
 592          return "\n//" . $this->cdata_section("\n{$content}\n//") . "\n";
 593      }
 594      
 595  }
 596  
 597  
 598  /**
 599    *  Avialble functions for use in views
 600    *  link_to_remote($name, $options = array(), $html_options = array())
 601    */
 602  function link_to_remote() {
 603      $javascript_helper = new JavaScriptHelper();
 604      $args = func_get_args();
 605      return call_user_func_array(array($javascript_helper, 'link_to_remote'), $args);
 606  }
 607  
 608  /**
 609    *  link_to_function($name, $function, $html_options = array())
 610    */
 611  function link_to_function() {
 612      $javascript_helper = new JavaScriptHelper();
 613      $args = func_get_args();
 614      return call_user_func_array(array($javascript_helper, 'link_to_function'), $args);
 615  }
 616  
 617  
 618  /**
 619    *  periodically_call_remote($options = array())
 620    */
 621  function periodically_call_remote() {
 622      $javascript_helper = new JavaScriptHelper();
 623      $args = func_get_args();
 624      return call_user_func_array(array($javascript_helper, 'periodically_call_remote'), $args);
 625  }
 626  
 627  /**
 628    *  form_remote_tag($options = array())
 629    */
 630  function form_remote_tag() {
 631      $javascript_helper = new JavaScriptHelper();
 632      $args = func_get_args();
 633      return call_user_func_array(array($javascript_helper, 'form_remote_tag'), $args);
 634  } 
 635  
 636  /**
 637    *  submit_to_remote($name, $value, $options = array())
 638    */
 639  function submit_to_remote() {
 640      $javascript_helper = new JavaScriptHelper();
 641      $args = func_get_args();
 642      return call_user_func_array(array($javascript_helper, 'submit_to_remote'), $args);
 643  } 
 644  
 645  /**
 646    *  update_element_function($element_id, $options = array(), $block = null)
 647    */
 648  function update_element_function() {
 649      $javascript_helper = new JavaScriptHelper();
 650      $args = func_get_args();
 651      return call_user_func_array(array($javascript_helper, 'update_element_function'), $args);
 652  } 
 653  
 654  /**
 655    *  evaluate_remote_response()
 656    */
 657  function evaluate_remote_response() {
 658      $javascript_helper = new JavaScriptHelper();
 659      $args = func_get_args();
 660      return call_user_func_array(array($javascript_helper, 'evaluate_remote_response'), $args);
 661  } 
 662  
 663  /**
 664    *  remote_function($options)
 665    */
 666  function remote_function() {
 667      $javascript_helper = new JavaScriptHelper();
 668      $args = func_get_args();
 669      return call_user_func_array(array($javascript_helper, 'remote_function'), $args);
 670  } 
 671  
 672  /**
 673    *  observe_field($field_id, $options = array())
 674    */
 675  function observe_field() {
 676      $javascript_helper = new JavaScriptHelper();
 677      $args = func_get_args();
 678      return call_user_func_array(array($javascript_helper, 'observe_field'), $args);
 679  } 
 680  
 681  /**
 682    *  observe_form($form_id, $options = array())
 683    */
 684  function observe_form() {
 685      $javascript_helper = new JavaScriptHelper();
 686      $args = func_get_args();
 687      return call_user_func_array(array($javascript_helper, 'observe_form'), $args);
 688  } 
 689  
 690  /**
 691    *  visual_effect($name, $element_id = false, $js_options = array())
 692    */
 693  function visual_effect() {
 694      $javascript_helper = new JavaScriptHelper();
 695      $args = func_get_args();
 696      return call_user_func_array(array($javascript_helper, 'visual_effect'), $args);
 697  } 
 698  
 699  /**
 700    *  sortable_element($element_id, $options = array())
 701    */
 702  function sortable_element() {
 703      $javascript_helper = new JavaScriptHelper();
 704      $args = func_get_args();
 705      return call_user_func_array(array($javascript_helper, 'sortable_element'), $args);
 706  } 
 707  
 708  /**
 709    *  draggable_element($element_id, $options = array())
 710    */
 711  function draggable_element() {
 712      $javascript_helper = new JavaScriptHelper();
 713      $args = func_get_args();
 714      return call_user_func_array(array($javascript_helper, 'draggable_element'), $args);
 715  }
 716  
 717  /**
 718    *  drop_receiving_element($element_id, $options = array()) 
 719    */
 720  function drop_receiving_element() {
 721      $javascript_helper = new JavaScriptHelper();
 722      $args = func_get_args();
 723      return call_user_func_array(array($javascript_helper, 'drop_receiving_element'), $args);
 724  }
 725  
 726  /**
 727    *  escape_javascript($javascript)
 728    */
 729  function escape_javascript() {
 730      $javascript_helper = new JavaScriptHelper();
 731      $args = func_get_args();
 732      return call_user_func_array(array($javascript_helper, 'escape_javascript'), $args);
 733  }
 734  
 735  /**
 736    *  javascript_tag($content)
 737    */
 738  function javascript_tag() {
 739      $javascript_helper = new JavaScriptHelper();
 740      $args = func_get_args();
 741      return call_user_func_array(array($javascript_helper, 'javascript_tag'), $args);
 742  }
 743  
 744  /**
 745    *  javascript_cdata_section($content)
 746    */
 747  function javascript_cdata_section() {
 748      $javascript_helper = new JavaScriptHelper();
 749      $args = func_get_args();
 750      return call_user_func_array(array($javascript_helper, 'javascript_cdata_section'), $args);
 751  }
 752  
 753  ?>