Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit 92da0e1a3e5b04d95951562dc8dc6000ed92d938 2 parents 6a1d0c5 + c81e6e4
@arian arian authored
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,6 +98,39 @@ 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
@@ -88,3 +138,4 @@ Attaches the Form.Request to the form (enabling the ajax). Note that this is don
[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
123 Source/Forms/Form.Request.js
@@ -52,21 +52,24 @@ 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.setOptions(options)
+ .setTarget(target)
+ .attach();
+ },
+
+ setTarget: function(target){
+ this.target = document.id(target);
+ if (!this.request){
+ this.makeRequest();
+ } else {
+ this.request.setOptions({
+ update: this.target
+ });
}
- this.attach();
+ return this;
},
toElement: function(){
@@ -74,52 +77,62 @@ if (!window.Form) window.Form = {};
},
makeRequest: function(){
+ var self = this;
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);
- }.bind(this),
+ self.fireEvent(evt, [self.target, tree, elements, html, javascript]);
+ });
+ },
failure: function(){
- this.fireEvent('complete', arguments).fireEvent('failure', arguments);
- }.bind(this),
+ self.fireEvent('complete', arguments).fireEvent('failure', arguments);
+ },
exception: function(){
- this.fireEvent('failure', arguments);
- }.bind(this)
+ self.fireEvent('failure', arguments);
+ }
});
+ return this.attachReset();
},
- attach: function(attach){
- if (attach == null) attach = true;
- var method = attach ? 'addEvent' : 'removeEvent';
+ attachReset: function(){
+ if (!this.options.resetForm) return this;
+ this.request.addEvent('success', function(){
+ Function.attempt(function(){
+ this.element.reset();
+ }.bind(this));
+ if (window.OverText) OverText.update();
+ }.bind(this));
+ return this;
+ },
+ attach: function(attach){
+ var method = (attach != false) ? 'addEvent' : 'removeEvent';
this.element[method]('click:relay(button, input[type=submit])', this.saveClickedButton.bind(this));
var fv = this.element.retrieve('validator');
if (fv) fv[method]('onFormValidate', this.onFormValidate);
else this.element[method]('submit', this.onSubmit);
+
+ return this;
},
detach: function(){
- this.attach(false);
- return this;
+ return this.attach(false);
},
//public method
enable: function(){
- this.attach();
- return this;
+ return this.attach();
},
//public method
disable: function(){
- this.detach();
- return this;
+ return this.detach();
},
onFormValidate: function(valid, form, event){
@@ -146,10 +159,11 @@ if (!window.Form) window.Form = {};
},
saveClickedButton: function(event, target){
- if (!this.options.sendButtonClicked || !target.get('name')) return;
- this.options.extraData[target.get('name')] = target.get('value') || true;
+ var targetName = target.get('name');
+ if (!targetName || !this.options.sendButtonClicked) return;
+ this.options.extraData[targetName] = target.get('value') || true;
this.clickedCleaner = function(){
- delete this.options.extraData[target.get('name')];
+ delete this.options.extraData[targetName];
this.clickedCleaner = function(){};
}.bind(this);
},
@@ -174,43 +188,16 @@ 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){
+ var fq = this.retrieve('form.request');
+ if (!fq) {
+ fq = new Form.Request(this, update, options);
+ } else {
+ if (update) fq.setTarget(update);
+ if (options) fq.setOptions(options).makeRequest();
}
-
- };
-
- Element.implement({
-
- formUpdate: function(update, options){
- this.get('formRequest', update, options).send();
- return this;
- }
-
+ 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>
Please sign in to comment.
Something went wrong with that request. Please try again.