Skip to content

Commit

Permalink
Fixes #557 - Element.set/get for Form.Request no longer work in 1.3
Browse files Browse the repository at this point in the history 
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
@anutron
anutron committed Apr 9, 2011
1 parent 6a1d0c5 commit ab70b8f
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 46 deletions.
51 changes: 51 additions & 0 deletions Docs/Forms/Form.Request.md
View file
Expand Up @@ -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}
--------------------------------------

Expand Down Expand Up @@ -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
5 changes: 3 additions & 2 deletions Source/Forms/Form.Request.Append.js
View file
Expand Up @@ -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);
Expand All @@ -71,6 +71,7 @@ Form.Request.Append = new Class({
this.fireEvent('failure', xhr);
}.bind(this)
});
this.attachReset();
}

});
80 changes: 36 additions & 44 deletions Source/Forms/Form.Request.js
View file
Expand Up @@ -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(){
Expand All @@ -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){
Expand Down Expand Up @@ -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;
}

Expand Down
16 changes: 16 additions & 0 deletions Tests/Forms/Form.Request.html
View file
Expand Up @@ -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'), {
Expand All @@ -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.