Mixedup Ajax響應

Question

我有2 Form.Request在2個函數是在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);​ 

Answer 1

的Form.Request在MooTools的繼承Class.Occlude，看到http://mootools.net/docs/more/Class/Class.Occlude

但是Class.Occlude會阻止創建幾個對象並將其應用於該對象相同的DOM元素。也就是說，它就像一個單身人士，所以你第一次做new Form.Request(adminform, ...)它會返回一個Form.Request的新實例。

但是，您第二次撥打new Form.Request(adminform, ...)則會返回上一個對象。

你的小提琴實際上證明了這一點非常好，因爲第一個被點擊「清除緩存」或「發送」的將是啓動對象的那個。第二次它會放棄你的選擇，只是返回舊的對象。

因此，有兩種方法來解決這個問題：

1. 創建Form.Request但不通過選項設置的事件處理程序，而是通過
   adminsend.removeEvents('complete'); adminsend.addEvent('complete', ....)
   不要忘記刪除舊的事件處理程序在應用新的！否則你只會應用越來越多的事件處理程序。

2. 有兩個「按鈕」，所以可以製作兩種形式，這在語義上也是正確的。