0

2つの異なるボタンクリックで実行される2つの関数に2つのForm.Requestがあります

ここにフィドルがあります 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

MootoolsのForm.RequestはClass.Occludeを継承します。http：//mootools.net/docs/more/Class/Class.Occludeを参照してください。

ただし、Class.Occludeは、複数のオブジェクトが作成されて同じDOM要素に適用されるのを防ぎます。つまり、シングルトンのように機能するため、最初に実行new Form.Request(adminform, ...)すると、Form.Requestの新しいインスタンスが返されます。

ただし、2回目new Form.Request(adminform, ...)に前のオブジェクトを呼び出すと、代わりに返されます。

「キャッシュのクリア」または「送信」の最初にクリックされたものがオブジェクトを開始するものになるため、フィドルは実際にこれを非常によく示しています。2回目はオプションを破棄し、古いオブジェクトを返すだけです。

したがって、これを解決するには2つの方法があります。

  1. Form.Requestを作成しますが、オプションを使用してイベントハンドラーを設定しないでください。ただし
    adminsend.removeEvents('complete'); adminsend.addEvent('complete', ....)
    、新しいイベントハンドラーを適用する前に、古いイベントハンドラーを削除することを忘れないでください。それ以外の場合は、ますます多くのイベントハンドラーを適用します。

  2. 2つの「ボタン」があるので、2つのフォームを作成します。これにより、意味的にもはるかに正確になります。

于 2012-10-26T19:02:06.570 に答える