yui の送信ボタンとディスパッチアクション

StackOverflow https://stackoverflow.com/questions/1944355

  •  20-09-2019
  •  | 
  •  

質問

私はプロジェクトに YUI 2.7.0 と Struts を使用しており、2 つの送信ボタンのあるフォームを持っています。1 つは保存用で、もう 1 つは削除用です。フォームは DispatchAction に送信されます。onclick リスナーを正常に追加しましたが、問題は、リスナーが実行される前にフォームが送信されることです。フォームを送信する前にディスパッチパラメータを設定する必要があります。どうすればいいでしょうか？以下は私がこれまでに持っているものです:

<form name="adminUserForm" method="post" action="manage_user.do">
  <input type="hidden" id="dispatch" name="dispatch" value="unspecified"/>
  <!-- other form fields here -->
  <input type="submit" value="Save User" id="saveUser">
  <input type="submit" value="Delete User" id="deleteUser">
</form>
<script type="text/javascript"> 
  function confirmDelete(msg)
  {
    if (confirm(msg))
    {
      return setDispatchMethod("delete");
    }
    else
      return false;
  }
  function setDispatchMethod(methodName)
  {
    dispatchField = document.getElementById("dispatch");
    dispatchField.value = methodName
    return true;
  }
  var onClickSaveUser = function (e)
  {
    return setDispatchMethod('save');
  };
  var onClickDeleteUser = function (e)
  {
    return confirmDelete('Are you sure you want to delete the user?');
  };
  new YAHOO.widget.Button("deleteUser",   {onclick: {fn: onClickDeleteUser }});
  new YAHOO.widget.Button("saveUser",     {onclick: {fn: onClickSaveUser   }});
</script>
役に立ちましたか？

解決

問題は、Yahoo のボタン ウィジェットのコードがクリック イベントを処理し、その中でプログラムによってフォームを送信していることです。彼らのイベント ハンドラーはあなたのイベント ハンドラーよりも先に呼び出されるため、フォームはあなたのイベント ハンドラーが呼び出される前に送信されます。

以下にいくつかのアイデアを示します (いずれも機能します)。

方法1

クリック イベントの代わりにマウスダウン イベントを処理します (クリック前にマウスダウンが発生します)。

var deleteUserButton = new YAHOO.widget.Button("deleteUser");
deleteUserButton.on("mousedown", onClickDeleteUser);

var deleteUserButton = new YAHOO.widget.Button("saveUser");
deleteUserButton.on("mousedown", onClickSaveUser);

//Using this, you can easily stop the form from submitting
//by using YAHOO's event utility (by adding this code, you
//will prevent the click event from firing as well).

YAHOO.util.Event.preventDefault(e);

方法 2

type=submit (デフォルト) の代わりに type=link を使用します。type = submit の場合にのみフォームを送信します (フォームが依然として単独で送信されるかどうかを確認するのに十分なテストはしていません。手動で form.submit() を呼び出す必要がある場合があります)。

new YAHOO.widget.Button("deleteUser", { type: 'link', onclick: { fn: onClickDeleteUser} });
new YAHOO.widget.Button("saveUser", { type: 'link', onclick: { fn: onClickSaveUser} });

方法 3

コードを見ると、フォームを送信するためにクリックされたボタン (そのボタンのみ) の名前を含む隠しフィールドが作成されていることがわかりました。input タグには name 属性が必要ですが、input タグには name 属性がないため、追加する必要があります。次に、サーバー上で、その非表示フィールドの値 (value 属性) を確認するだけです。

これらの方法のいずれを使用する場合でも、フォームの送信を停止するにはこれを使用する必要があります。

YAHOO.util.Event.preventDefault(e);

他のヒント

ここでは簡単なソリューションです。

<form>
    <input type="submit" name='dispatch' value="Save User" id="saveUser">
    <input type="submit" name='dispatch' value="Delete User" id="deleteUser">
</form>

あなたが隠し入力を削除することができます。

と最初のボタンがクリックされた場合は、あなたのディスパッチ要求変数は、「Saveユーザ」に設定されます。

または第二がクリックされている「ユーザの削除」

この質問は数年古いですが、私はまだYUI 2.9.0を使用してプロジェクトを持っていると私はちょうど同じ問題に走ったので、私は他のケースの誰かが同じジャムで自分自身を見つけるの私の解決策を共有しましょう。

この問題について注目に値するいくつかのこと。まず、あなたのクリックハンドラが呼び出される前に、YUI 2.9.0ボタンのクリックハンドラがフォームを送信するガブリエルが記述問題は、少なくともIE9を通じて、IE上の問題ではありません。少なくともFF12通じFireFoxの上、問題が発生します。私はそれはまた、私はYUIのボタンのクリックハンドラでIEのための特別なケースのように見えるものを見るクロム、Safariでの問題、そして最もすべてではないが、他のブラウザと同様になります疑います。

また、私はガブリエルが提案ソリューションのいずれかを好きではなかったです。リンクボタンを使用すると、マウスダウンハンドラは、クリックのユーザ・インタフェースのセマンティクスの一部を失う使用して、私は私のsubmitボタンに適用されていたすべてのカスタムスタイルを無効にし、何らかの理由YUIボタンの元の名前のトラックを失っていた私は、送信ボタンを与えましたあるいは、少なくとも、それはサーバ側に掲示値に現れていませんでした。ガブリエルのリンクボタンの精神では、しかし、私は、デフォルトでは提出していない入力ボタンと送信ボタンを交換し、その後、自分自身を隠し入力を追加し、フォームを送信します：

...

<form id='form'>
    <input type="button" value="&gt;" id="start_survey">

...

function start_survey (p_oEvent, p_aArgs) {
    var input = document.createElement ('input');
    input.type = 'hidden';
    input.name = this.get ('name');
    input.value = '&gt;'

    var form = YAHOO.Dom.get ('form');
    form.appendChild (input);
    form.submit();
}

new YAHOO.widget.Button ("start_survey", {onclick: {fn: start_survey}});

...

最後に、YUIはクリックでフォームを送信され、さらに別の解決策は、単にフォームのその後行く提出または停止させ、あなたがする必要がある何、イベントを提出し、イベントターゲットは、あなたのボタンであるかどうかをチェックキャッチするべきであるので、それは、必要に応じています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top