0

我在 2 个函数中有 2 个 Form.Request，这些函数在 2 个不同的按钮单击时执行

这是小提琴 http://jsfiddle.net/RtxXe/38/

似乎我没有在我的函数中按正确的顺序设置事件，因为它们混淆了响应。如果您点击清除缓存而不是发送，您仍然会从清除缓存中获得响应，反之亦然。除非您重新加载页面并再次单击，否则您无法获得每个按钮应有的正确响应。

由于这不是我的原始表单并且 *我只能使用 js * 更改它，我添加了带有新元素的清除缓存按钮。我不知道为什么会发生这种情况，感谢您的帮助。

这是原始的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>

这里是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);​
4

1 回答 1

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.

于 2012-10-26T19:02:06.570 回答