Question

我在2个函数中有2个Form.Request，它们通过2个不同的按钮点击执行

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

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

由于这不是我原来的形式而且* 我只能用js * 更改它，我添加了带有新元素的clear cache按钮。我无法弄清楚为什么会发生这种情况并且感谢任何帮助。

这是原创的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);

Answer 1

Mootools中的Form.Request继承了Class.Occlude，请参阅http://mootools.net/docs/more/Class/Class.Occlude

但Class.Occlude将阻止创建多个对象并将其应用于同一DOM元素。也就是说，它的工作方式类似于单例，因此第一次执行new Form.Request(adminform, ...)时，它将返回Form.Request的新实例。

但是，第二次调用new Form.Request(adminform, ...)时，将返回上一个对象。

你的小提琴实际上证明了这一点非常好，因为点击“清除缓存”或“发送”的第一个将是启动对象的那个。第二次它将丢弃您的选项并返回旧对象。

所以有两种方法可以解决这个问题：

创建Form.Request，但不要通过选项设置事件处理程序，而是通过
adminsend.removeEvents('complete'); adminsend.addEvent('complete', ....)
在应用新事件之前不要忘记删除旧的事件处理程序！否则您将只应用越来越多的事件处理程序。
有两个“按钮”，所以制作两种形式，在语义上也更正确。

在多个Form.Request mootools上混合了ajax响应

1 个答案: