Question

I have 2 Form.Request in 2 functions that are executed on 2 different buttons clicks

here is fiddle
http://jsfiddle.net/RtxXe/38/

seems like I did not set the events in right order in my functions since they are mixing up the responses. if you hit Clear cache and than Send you still get response from clear cache and vice versa. Unless you reload the page and click again you cant get the right response for each button as it should be .

Since this is not my original form and *I can only change it with js * , i added the clear cache button with new Element. I cant figure out as to why is this happening and any help is appreciated.

this is original html:

<div id="toolbar">
  <ul>
    <li id="adminsubmit"><a href="javascript:;">Send</a></li>
  </ul>
</div>
<div id="response"></div>
<form action="http://www.scoobydoo.com/cgi-bin/scoobysnack" method="post" name="editform" id="myform">
  <fieldset>
    <!-- form elements go here -->
  </fieldset>
  <input type="hidden" name="task" value="">
</form>

​ and here is js:

    var AdminForm = {
    start: function() {
        var toolbar = $$('#toolbar ul');
        var addbtn2 = new Element('li', {
            'id': 'cache',
            'class': 'button',
            html: '<a href="javascript:;">Clear Cache</a>'
        });
        addbtn2.inject(toolbar[0], 'top');
        var btn1  = $('adminsubmit').getElement('a');
        var btn2  = $('cache').getElement('a');


        btn1.addEvent('click', function(event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            AdminForm.formChange();
        });

        btn2.addEvent('click', function(event) {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            AdminForm.clearCache();
        });
    },
    formChange: function() {

        var adminform = $('myform');
        var target = $('response');
        var adminsend = new Form.Request(adminform, target, {
            onSend: function() {
                target.set('html', 'formChange sending');
            },
            onComplete: function() {
                target.set('html', 'formChange sent');
            }
        });
        adminsend.send();
    },


    clearCache: function() {

        var adminform = $('myform');
        var target = $('response');
        var clearingcahe = new Form.Request(adminform, target, {
            onSend: function() {
                target.set('html', 'clearCache sending');
            },
            onComplete: function() {
                target.set('html', 'clearCache sent');
            }
        });
        clearingcahe.send();
    }
}
window.addEvent('domready', AdminForm.start);​

Answer 1

The Form.Request in Mootools inherits Class.Occlude, see http://mootools.net/docs/more/Class/Class.Occlude

But the Class.Occlude will prevent that several Objects are created and applied to the same DOM Element. That is, it works like a singleton, so the first time you do new Form.Request(adminform, ...) it will return a new instance of Form.Request.

However, the second time you call new Form.Request(adminform, ...) the previous object will be returned instead.

Your fiddle actually demonstrates this very good, because the first one that is clicked of “Clear Cache” or “Send” will be the one that initiates the object. The second time it will discard your options and just return the old object.

So there are two ways to solve this:

1. Create the Form.Request but don’t set the event handlers through the options but through
   adminsend.removeEvents('complete'); adminsend.addEvent('complete', ....)
   Don’t forget to remove the old event handlers before applying the new! otherwise you will just apply more and more eventhandlers.

2. There are two “buttons” so make two forms, which would be much more semantically correct as well.