Skip to content
This repository
Browse code

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...
commit ab70b8ffdfbb4d82bfcfb61fec15e84edcff1071 1 parent 6a1d0c5
authored
51  Docs/Forms/Form.Request.md
Source Rendered
@@ -42,6 +42,23 @@ Form.Request and Form.Validator {#Form-Request:Form-Validator}
42 42
 
43 43
 *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.
44 44
 
  45
+Form.Request Method: setTarget {#Form-Request:setTarget}
  46
+--------------------------------------
  47
+
  48
+Changes the target that the instance will update with the Request response.
  49
+
  50
+### Syntax
  51
+
  52
+	myFormRequest.setTarget(newTarget);
  53
+
  54
+### Arguments
  55
+
  56
+1. newTarget - (*mixed*) An Element or the string id of an Element to update with the response.
  57
+
  58
+### Returns
  59
+
  60
+* (*object*) - This instance of [Form.Request][]
  61
+
45 62
 Form.Request Method: send {#Form-Request:send}
46 63
 --------------------------------------
47 64
 
@@ -81,6 +98,39 @@ Attaches the Form.Request to the form (enabling the ajax). Note that this is don
81 98
 
82 99
 * (*object*) - This instance of [Form.Request][]
83 100
 
  101
+Type: Element {#Element}
  102
+==========================
  103
+
  104
+Extends the [Element][] Type with a reference to its [Form.Request][] instance and a method to create one.
  105
+
  106
+Element Method: formRequest {#Element:formRequest}
  107
+-------------------------------------
  108
+
  109
+Creates a new instance of [Form.Request][] and calls its *send* method.
  110
+
  111
+### Syntax
  112
+
  113
+	$(element).formRequest(update, options);
  114
+
  115
+### Arguments
  116
+
  117
+* update - (*mixed*) An Element or the string id of an Element to update with the response.
  118
+* options - (*object*) a key/value set of options. See [Form.Request:options][].
  119
+
  120
+### Returns
  121
+
  122
+* (*element*) This Element.
  123
+
  124
+### Example
  125
+
  126
+	$(element).formRequest($('myDiv'), { requestOptions: {useSpinner: false } });
  127
+
  128
+Element property: form.request {#Element:form.request}
  129
+------------------------------------------------
  130
+
  131
+### Syntax
  132
+
  133
+	myForm.retrieve('form.request'); //the instance of Form.Request for the element
84 134
 
85 135
 [Chain]: /core/Class/Class.Extras#Chain
86 136
 [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
88 138
 [Class.Occlude]: /more/Class/Class.Occlude
89 139
 [Form.Request]: #Form-Request
90 140
 [Form.Validator]: /more/Forms/Form.Validator#Form-Validator
  141
+[Element]: /core/Type/Element
5  Source/Forms/Form.Request.Append.js
@@ -54,11 +54,11 @@ Form.Request.Append = new Class({
54 54
 						}
55 55
 					}).adopt(kids);
56 56
 				}
57  
-				container.inject(this.update, this.options.inject);
  57
+				container.inject(this.target, this.options.inject);
58 58
 				if (this.options.requestOptions.evalScripts) Browser.exec(javascript);
59 59
 				this.fireEvent('beforeEffect', container);
60 60
 				var finish = function(){
61  
-					this.fireEvent('success', [container, this.update, tree, elements, html, javascript]);
  61
+					this.fireEvent('success', [container, this.target, tree, elements, html, javascript]);
62 62
 				}.bind(this);
63 63
 				if (this.options.useReveal){
64 64
 					container.set('reveal', this.options.revealOptions).get('reveal').chain(finish);
@@ -71,6 +71,7 @@ Form.Request.Append = new Class({
71 71
 				this.fireEvent('failure', xhr);
72 72
 			}.bind(this)
73 73
 		});
  74
+		this.attachReset();
74 75
 	}
75 76
 
76 77
 });
80  Source/Forms/Form.Request.js
@@ -52,37 +52,40 @@ if (!window.Form) window.Form = {};
52 52
 
53 53
 		property: 'form.request',
54 54
 
55  
-		initialize: function(form, update, options){
  55
+		initialize: function(form, target, options){
56 56
 			this.element = document.id(form);
57 57
 			if (this.occlude()) return this.occluded;
58  
-			this.update = document.id(update);
59 58
 			this.setOptions(options);
60  
-			this.makeRequest();
61  
-			if (this.options.resetForm){
62  
-				this.request.addEvent('success', function(){
63  
-					Function.attempt(function(){
64  
-						this.element.reset();
65  
-					}.bind(this));
66  
-					if (window.OverText) OverText.update();
67  
-				}.bind(this));
68  
-			}
  59
+			this.setTarget(target);
69 60
 			this.attach();
70 61
 		},
71 62
 
  63
+		setTarget: function(target){
  64
+			this.target = document.id(target);
  65
+			if (!this.request) {
  66
+				this.makeRequest();
  67
+			} else {
  68
+				this.request.setOptions({
  69
+					update: this.target
  70
+				});
  71
+			}
  72
+			return this;
  73
+		},
  74
+
72 75
 		toElement: function(){
73 76
 			return this.element;
74 77
 		},
75 78
 
76 79
 		makeRequest: function(){
77 80
 			this.request = new Request.HTML(Object.merge({
78  
-					update: this.update,
  81
+					update: this.target,
79 82
 					emulation: false,
80 83
 					spinnerTarget: this.element,
81 84
 					method: this.element.get('method') || 'post'
82 85
 			}, this.options.requestOptions)).addEvents({
83 86
 				success: function(tree, elements, html, javascript){
84 87
 					['complete', 'success'].each(function(evt){
85  
-						this.fireEvent(evt, [this.update, tree, elements, html, javascript]);
  88
+						this.fireEvent(evt, [this.target, tree, elements, html, javascript]);
86 89
 					}, this);
87 90
 				}.bind(this),
88 91
 				failure: function(){
@@ -92,6 +95,18 @@ if (!window.Form) window.Form = {};
92 95
 					this.fireEvent('failure', arguments);
93 96
 				}.bind(this)
94 97
 			});
  98
+			this.attachReset();
  99
+		},
  100
+
  101
+		attachReset: function(){
  102
+			if (this.options.resetForm){
  103
+				this.request.addEvent('success', function(){
  104
+					Function.attempt(function(){
  105
+						this.element.reset();
  106
+					}.bind(this));
  107
+					if (window.OverText) OverText.update();
  108
+				}.bind(this));
  109
+			}
95 110
 		},
96 111
 
97 112
 		attach: function(attach){
@@ -174,40 +189,17 @@ if (!window.Form) window.Form = {};
174 189
 
175 190
 	});
176 191
 
177  
-	Element.Properties.formRequest = {
178  
-
179  
-		set: function(){
180  
-			var opt = Array.link(arguments, {options: Type.isObject, update: Type.isElement, updateId: Type.isString}),
181  
-				update = opt.update || opt.updateId,
182  
-				updater = this.retrieve('form.request');
183  
-			if (update){
184  
-				if (updater) updater.update = document.id(update);
185  
-				this.store('form.request:update', update);
186  
-			}
187  
-			if (opt.options){
188  
-				if (updater) updater.setOptions(opt.options);
189  
-				this.store('form.request:options', opt.options);
190  
-			}
191  
-			return this;
192  
-		},
193  
-
194  
-		get: function(){
195  
-			var opt = Array.link(arguments, {options: Type.isObject, update: Type.isElement, updateId: Type.isString}),
196  
-				update = opt.update || opt.updateId;
197  
-			if (opt.options || update || !this.retrieve('form.request')){
198  
-				if (opt.options || !this.retrieve('form.request:options')) this.set('form.request', opt.options);
199  
-				if (update) this.set('form.request', update);
200  
-				this.store('form.request', new Form.Request(this, this.retrieve('form.request:update'), this.retrieve('form.request:options')));
201  
-			}
202  
-			return this.retrieve('form.request');
203  
-		}
204  
-
205  
-	};
206  
-
207 192
 	Element.implement({
208 193
 
209 194
 		formUpdate: function(update, options){
210  
-			this.get('formRequest', update, options).send();
  195
+			var fq = this.retrieve('form.request');
  196
+			if (!fq) {
  197
+				fq = new Form.Request(this, target, options);
  198
+			} else {
  199
+				if (update) fq.setTarget(document.id(update));
  200
+				if (options) fq.setOptions(options).makeRequest();
  201
+			}
  202
+			fq.send();
211 203
 			return this;
212 204
 		}
213 205
 
16  Tests/Forms/Form.Request.html
@@ -17,6 +17,12 @@
17 17
 	</div>
18 18
 </div>
19 19
 
  20
+<div style="position: relative; margin-top: 10px">
  21
+	<div id="update2" style="padding: 10px; width: 200px; border: 1px solid black; height: 100px; overflow:hidden;">
  22
+		<a id="update2link">If you click this link, the first form should submit and update this box.</a>
  23
+	</div>
  24
+</div>
  25
+
20 26
 <script src="/depender/build?require=More/Form.Request,More/Spinner"></script>
21 27
 <script type="text/javascript">
22 28
 	new Form.Request($('test'), $('update'), {
@@ -30,4 +36,14 @@
30 36
 			url: '/ajax_html_echo/'
31 37
 		}
32 38
 	});
  39
+	$('update2link').addEvent('click', function(){
  40
+		$('test').formUpdate('update2', {
  41
+			extraData: {
  42
+				html: 'Success!'
  43
+			},
  44
+			requestOptions: {
  45
+				spinnerTarget: $('update2')
  46
+			}
  47
+		});
  48
+	});
33 49
 </script>

0 notes on commit ab70b8f

Please sign in to comment.
Something went wrong with that request. Please try again.