[Summary view] [Print] [Text view]

   1  /*
   2  ---
   3  
   4  script: Form.Request.js
   5  
   6  name: Form.Request
   7  
   8  description: Handles the basic functionality of submitting a form and updating a dom element with the result.
   9  
  10  license: MIT-style license
  11  
  12  authors:
  13    - Aaron Newton
  14  
  15  requires:
  16    - Core/Request.HTML
  17    - /Class.Binds
  18    - /Class.Occlude
  19    - /Spinner
  20    - /String.QueryString
  21    - /Element.Delegation
  22  
  23  provides: [Form.Request]
  24  
  25  ...
  26  */
  27  
  28  if (!window.Form) window.Form = {};
  29  
  30  (function(){
  31  
  32      Form.Request = new Class({
  33  
  34          Binds: ['onSubmit', 'onFormValidate'],
  35  
  36          Implements: [Options, Events, Class.Occlude],
  37  
  38          options: {
  39              //onFailure: $empty,
  40              //onSuccess: #empty, //aliased to onComplete,
  41              //onSend: $empty
  42              requestOptions: {
  43                  evalScripts: true,
  44                  useSpinner: true,
  45                  emulation: false,
  46                  link: 'ignore'
  47              },
  48              sendButtonClicked: true,
  49              extraData: {},
  50              resetForm: true
  51          },
  52  
  53          property: 'form.request',
  54  
  55          initialize: function(form, update, options) {
  56              this.element = document.id(form);
  57              if (this.occlude()) return this.occluded;
  58              this.update = document.id(update);
  59              this.setOptions(options);
  60              this.makeRequest();
  61              if (this.options.resetForm) {
  62                  this.request.addEvent('success', function(){
  63                      $try(function(){ this.element.reset(); }.bind(this));
  64                      if (window.OverText) OverText.update();
  65                  }.bind(this));
  66              }
  67              this.attach();
  68          },
  69  
  70          toElement: function() {
  71              return this.element;
  72          },
  73  
  74          makeRequest: function(){
  75              this.request = new Request.HTML($merge({
  76                      update: this.update,
  77                      emulation: false,
  78                      spinnerTarget: this.element,
  79                      method: this.element.get('method') || 'post'
  80              }, this.options.requestOptions)).addEvents({
  81                  success: function(tree, elements, html, javascript){
  82                      ['complete', 'success'].each(function(evt){
  83                          this.fireEvent(evt, [this.update, tree, elements, html, javascript]);
  84                      }, this);
  85                  }.bind(this),
  86                  failure: function(){
  87                      this.fireEvent('complete', arguments).fireEvent('failure', arguments);
  88                  }.bind(this),
  89                  exception: function(){
  90                      this.fireEvent('failure', arguments);
  91                  }.bind(this)
  92              });
  93          },
  94  
  95          attach: function(attach){
  96              attach = $pick(attach, true);
  97              method = attach ? 'addEvent' : 'removeEvent';
  98              
  99              this.element[method]('click:relay(button, input[type=submit])', this.saveClickedButton.bind(this));
 100              
 101              var fv = this.element.retrieve('validator');
 102              if (fv) fv[method]('onFormValidate', this.onFormValidate);
 103              else this.element[method]('submit', this.onSubmit);
 104          },
 105  
 106          detach: function(){
 107              this.attach(false);
 108              return this;
 109          },
 110  
 111          //public method
 112          enable: function(){
 113              this.attach();
 114              return this;
 115          },
 116  
 117          //public method
 118          disable: function(){
 119              this.detach();
 120              return this;
 121          },
 122  
 123          onFormValidate: function(valid, form, e) {
 124              //if there's no event, then this wasn't a submit event
 125              if (!e) return;
 126              var fv = this.element.retrieve('validator');
 127              if (valid || (fv && !fv.options.stopOnFailure)) {
 128                  if (e && e.stop) e.stop();
 129                  this.send();
 130              }
 131          },
 132  
 133          onSubmit: function(e){
 134              var fv = this.element.retrieve('validator');
 135              if (fv) {
 136                  //form validator was created after Form.Request
 137                  this.element.removeEvent('submit', this.onSubmit);
 138                  fv.addEvent('onFormValidate', this.onFormValidate);
 139                  this.element.validate();
 140                  return;
 141              }
 142              if (e) e.stop();
 143              this.send();
 144          },
 145  
 146          saveClickedButton: function(event, target) {
 147              if (!this.options.sendButtonClicked) return;
 148              if (!target.get('name')) return;
 149              this.options.extraData[target.get('name')] = target.get('value') || true;
 150              this.clickedCleaner = function(){
 151                  delete this.options.extraData[target.get('name')];
 152                  this.clickedCleaner = $empty;
 153              }.bind(this);
 154          },
 155  
 156          clickedCleaner: $empty,
 157  
 158          send: function(){
 159              var str = this.element.toQueryString().trim();
 160              var data = $H(this.options.extraData).toQueryString();
 161              if (str) str += "&" + data;
 162              else str = data;
 163              this.fireEvent('send', [this.element, str.parseQueryString()]);
 164              this.request.send({data: str, url: this.element.get("action")});
 165              this.clickedCleaner();
 166              return this;
 167          }
 168  
 169      });
 170  
 171      Element.Properties.formRequest = {
 172  
 173          set: function(){
 174              var opt = Array.link(arguments, {options: Object.type, update: Element.type, updateId: String.type});
 175              var update = opt.update || opt.updateId;
 176              var updater = this.retrieve('form.request');
 177              if (update) {
 178                  if (updater) updater.update = document.id(update);
 179                  this.store('form.request:update', update);
 180              }
 181              if (opt.options) {
 182                  if (updater) updater.setOptions(opt.options);
 183                  this.store('form.request:options', opt.options);
 184              }
 185              return this;
 186          },
 187  
 188          get: function(){
 189              var opt = Array.link(arguments, {options: Object.type, update: Element.type, updateId: String.type});
 190              var update = opt.update || opt.updateId;
 191              if (opt.options || update || !this.retrieve('form.request')){
 192                  if (opt.options || !this.retrieve('form.request:options')) this.set('form.request', opt.options);
 193                  if (update) this.set('form.request', update);
 194                  this.store('form.request', new Form.Request(this, this.retrieve('form.request:update'), this.retrieve('form.request:options')));
 195              }
 196              return this.retrieve('form.request');
 197          }
 198  
 199      };
 200  
 201      Element.implement({
 202  
 203          formUpdate: function(update, options){
 204              this.get('formRequest', update, options).send();
 205              return this;
 206          }
 207  
 208      });
 209  
 210  })();