Permalink
Browse files

Fixes #557 - Element.set/get for Form.Request no longer work in 1.3

https://mootools.lighthouseapp.com/projects/24057/tickets/557

* Removed set/get props since they just don't make sense if you can't pass more than one argument.
* Updated the Element method formRequest to work without them.
* Made it possible to reassign the target for the Form.Request at any point.
* Added demo of this behavior.
* Added docs for the Element method and the stored reference.
  • Loading branch information...
1 parent 6a1d0c5 commit ab70b8ffdfbb4d82bfcfb61fec15e84edcff1071 @anutron anutron committed Apr 9, 2011
Showing with 106 additions and 46 deletions.
  1. +51 −0 Docs/Forms/Form.Request.md
  2. +3 −2 Source/Forms/Form.Request.Append.js
  3. +36 −44 Source/Forms/Form.Request.js
  4. +16 −0 Tests/Forms/Form.Request.html
View
51 Docs/Forms/Form.Request.md
@@ -42,6 +42,23 @@ Form.Request and Form.Validator {#Form-Request:Form-Validator}
*Form.Request* integrates with [Form.Validator][] to prevent the ajax being sent if the validation fails. It retrieves the *Form.Validator* instance from the form, so all that is required is that you instantiate the *Form.Validator* before you instantiate the instance of *Fudpate*. If the instance of *Form.Validator* has the *stopOnFailure* option set to *true* (the default) then *Form.Request* will not send the ajax request if the validator fails.
+Form.Request Method: setTarget {#Form-Request:setTarget}
+--------------------------------------
+
+Changes the target that the instance will update with the Request response.
+
+### Syntax
+
+ myFormRequest.setTarget(newTarget);
+
+### Arguments
+
+1. newTarget - (*mixed*) An Element or the string id of an Element to update with the response.
+
+### Returns
+
+* (*object*) - This instance of [Form.Request][]
+
Form.Request Method: send {#Form-Request:send}
--------------------------------------
@@ -81,10 +98,44 @@ Attaches the Form.Request to the form (enabling the ajax). Note that this is don
* (*object*) - This instance of [Form.Request][]
+Type: Element {#Element}
+==========================
+
+Extends the [Element][] Type with a reference to its [Form.Request][] instance and a method to create one.
+
+Element Method: formRequest {#Element:formRequest}
+-------------------------------------
+
+Creates a new instance of [Form.Request][] and calls its *send* method.
+
+### Syntax
+
+ $(element).formRequest(update, options);
+
+### Arguments
+
+* update - (*mixed*) An Element or the string id of an Element to update with the response.
+* options - (*object*) a key/value set of options. See [Form.Request:options][].
+
+### Returns
+
+* (*element*) This Element.
+
+### Example
+
+ $(element).formRequest($('myDiv'), { requestOptions: {useSpinner: false } });
+
+Element property: form.request {#Element:form.request}
+------------------------------------------------
+
+### Syntax
+
+ myForm.retrieve('form.request'); //the instance of Form.Request for the element
[Chain]: /core/Class/Class.Extras#Chain
[Events]: /core/Class/Class.Extras#Events
[Options]: /core/Class/Class.Extras#Options
[Class.Occlude]: /more/Class/Class.Occlude
[Form.Request]: #Form-Request
[Form.Validator]: /more/Forms/Form.Validator#Form-Validator
+[Element]: /core/Type/Element
View
5 Source/Forms/Form.Request.Append.js
@@ -54,11 +54,11 @@ Form.Request.Append = new Class({
}
}).adopt(kids);
}
- container.inject(this.update, this.options.inject);
+ container.inject(this.target, this.options.inject);
if (this.options.requestOptions.evalScripts) Browser.exec(javascript);
this.fireEvent('beforeEffect', container);
var finish = function(){
- this.fireEvent('success', [container, this.update, tree, elements, html, javascript]);
+ this.fireEvent('success', [container, this.target, tree, elements, html, javascript]);
}.bind(this);
if (this.options.useReveal){
container.set('reveal', this.options.revealOptions).get('reveal').chain(finish);
@@ -71,6 +71,7 @@ Form.Request.Append = new Class({
this.fireEvent('failure', xhr);
}.bind(this)
});
+ this.attachReset();
}
});
View
80 Source/Forms/Form.Request.js
@@ -52,37 +52,40 @@ if (!window.Form) window.Form = {};
property: 'form.request',
- initialize: function(form, update, options){
+ initialize: function(form, target, options){
this.element = document.id(form);
if (this.occlude()) return this.occluded;
- this.update = document.id(update);
this.setOptions(options);
- this.makeRequest();
- if (this.options.resetForm){
- this.request.addEvent('success', function(){
- Function.attempt(function(){
- this.element.reset();
- }.bind(this));
- if (window.OverText) OverText.update();
- }.bind(this));
- }
+ this.setTarget(target);
this.attach();
},
+ setTarget: function(target){
+ this.target = document.id(target);
+ if (!this.request) {
+ this.makeRequest();
+ } else {
+ this.request.setOptions({
+ update: this.target
+ });
+ }
+ return this;
+ },
+
toElement: function(){
return this.element;
},
makeRequest: function(){
this.request = new Request.HTML(Object.merge({
- update: this.update,
+ update: this.target,
emulation: false,
spinnerTarget: this.element,
method: this.element.get('method') || 'post'
}, this.options.requestOptions)).addEvents({
success: function(tree, elements, html, javascript){
['complete', 'success'].each(function(evt){
- this.fireEvent(evt, [this.update, tree, elements, html, javascript]);
+ this.fireEvent(evt, [this.target, tree, elements, html, javascript]);
}, this);
}.bind(this),
failure: function(){
@@ -92,6 +95,18 @@ if (!window.Form) window.Form = {};
this.fireEvent('failure', arguments);
}.bind(this)
});
+ this.attachReset();
+ },
+
+ attachReset: function(){
+ if (this.options.resetForm){
+ this.request.addEvent('success', function(){
+ Function.attempt(function(){
+ this.element.reset();
+ }.bind(this));
+ if (window.OverText) OverText.update();
+ }.bind(this));
+ }
},
attach: function(attach){
@@ -174,40 +189,17 @@ if (!window.Form) window.Form = {};
});
- Element.Properties.formRequest = {
-
- set: function(){
- var opt = Array.link(arguments, {options: Type.isObject, update: Type.isElement, updateId: Type.isString}),
- update = opt.update || opt.updateId,
- updater = this.retrieve('form.request');
- if (update){
- if (updater) updater.update = document.id(update);
- this.store('form.request:update', update);
- }
- if (opt.options){
- if (updater) updater.setOptions(opt.options);
- this.store('form.request:options', opt.options);
- }
- return this;
- },
-
- get: function(){
- var opt = Array.link(arguments, {options: Type.isObject, update: Type.isElement, updateId: Type.isString}),
- update = opt.update || opt.updateId;
- if (opt.options || update || !this.retrieve('form.request')){
- if (opt.options || !this.retrieve('form.request:options')) this.set('form.request', opt.options);
- if (update) this.set('form.request', update);
- this.store('form.request', new Form.Request(this, this.retrieve('form.request:update'), this.retrieve('form.request:options')));
- }
- return this.retrieve('form.request');
- }
-
- };
-
Element.implement({
formUpdate: function(update, options){
- this.get('formRequest', update, options).send();
+ var fq = this.retrieve('form.request');
+ if (!fq) {
+ fq = new Form.Request(this, target, options);
+ } else {
+ if (update) fq.setTarget(document.id(update));
+ if (options) fq.setOptions(options).makeRequest();
+ }
+ fq.send();
return this;
}
View
16 Tests/Forms/Form.Request.html
@@ -17,6 +17,12 @@
</div>
</div>
+<div style="position: relative; margin-top: 10px">
+ <div id="update2" style="padding: 10px; width: 200px; border: 1px solid black; height: 100px; overflow:hidden;">
+ <a id="update2link">If you click this link, the first form should submit and update this box.</a>
+ </div>
+</div>
+
<script src="/depender/build?require=More/Form.Request,More/Spinner"></script>
<script type="text/javascript">
new Form.Request($('test'), $('update'), {
@@ -30,4 +36,14 @@
url: '/ajax_html_echo/'
}
});
+ $('update2link').addEvent('click', function(){
+ $('test').formUpdate('update2', {
+ extraData: {
+ html: 'Success!'
+ },
+ requestOptions: {
+ spinnerTarget: $('update2')
+ }
+ });
+ });
</script>

0 comments on commit ab70b8f

Please sign in to comment.