13

わかりました、私はたくさんの RIA/AJAX を行っており、DIV である "きれいな" カスタム確認ボックスを作成する必要があります (組み込みの JavaScript 確認ではありません)。実行を一時停止して、実行を再開または停止する前に条件を受け入れるか拒否する機会をユーザーに与える方法を判断するのに苦労しています。（彼らの答えによる）

だから、私が扱っているロジックの一般的な流れは次のとおりです。

  1. ユーザーがドロップダウンからアイテムを選択し、ボタンをクリックします。
  2. ボタンのクライアント側の JavaScript イベントハンドラーで、ドロップダウンで選択したアイテムの一連の条件 (これがキー) を確認する必要があります。
  3. これらの条件により、確認がまったく表示されないか、一部の条件のみが true と評価される可能性があります。つまり、続行する前に、条件を受け入れるか拒否するかをユーザーに尋ねる必要があります。一度に 1 つの確認のみを表示する必要があります。

ロジックを示すには:

function buttonEventHandler() {

if (condition1) {
  if(!showConfirmForCondition1) // want execution to pause while waiting for user response.
     return; // discontinue execution
}

if (condition2) {
  if (!showConfirmForCondition2) // want execution to pause while waiting for user response.

     return; // discontinue execution
}

if (condition3) {
  if (!showConfirmForCondition3) // want execution to pause while waiting for user response.

     return; // discontinue execution
}

...  
}

誰かが以前にこの課題に対処し、解決策を見つけたことがあれば、助けていただければ幸いです。注として、私はMS AjaxおよびjQueryライブラリも使用していますが、この問題のライブラリに既に含まれている可能性のある機能は見つかりませんでした。

4

6 に答える 6

7

私がこれをした方法：

  1. ボタンを使用して独自の確認ダイアログ ボックスを作成します。「はい」と「いいえ」としましょう。
  2. ダイアログ ボックスをトリガーする関数を作成しますconfirmBox(text, callback)。
  3. 「はい」および「いいえ」ボタン - 「はい」 - callback(true)、「いいえ」 - でイベントをバインドしますcallback(false)。

  4. 関数を呼び出すときは、次の構文を使用します。

    confirmBox("Are you sure", function(callback){
    if (callback) {
        // do something if user pressed yes
    } 
    else {
        // do something if user pressed no
    }
});
于 2010-08-17T12:35:25.670 に答える
7

残念ながら、「確認」ダイアログや「警告」ダイアログで一時停止するのと同じ方法で Javascript ランタイムを一時停止することはできません。DIV でこれを行うには、コードを複数のチャンクに分割し、カスタム確認ボックスのイベント ハンドラーでコードの次のセクションを呼び出す必要があります。

Narrative Javascriptなど、Javascript に「継続」サポートを導入するプロジェクトがいくつかあるので、単一のコード ブロックで機能させることに本当に熱心な場合は、それを調べることができます。

于 2008-12-11T01:12:26.093 に答える
1

これを試して、JavaScript クライアント関数に「this」オブジェクトを渡し、カスタム確認ダイアログを開始しますが、常にfalse を返して、ポストバックが発生しないようにします。ただし、処理機能を終了する前に、ポストバックをトリガーする関連情報を手動でカスタム確認ボックスの [はい] ボタンにコピーします。

于 2008-12-11T02:40:46.027 に答える
0

私の場合、目標は、customConfirmユーザーが.NetRepeaterの各行に埋め込まれた削除リンクをクリックするたびにボックスを表示することでした。

ユーザーが特定の行の削除リンクをクリックするたびに、カスタム確認機能が呼び出されます。ここで、confirm関数内で、新しいボックスのレンダリングに加えて、次の2つのことを行う必要がありました。

// obtain the element(we will call it targetObject) that triggered the event

targetObject = (event.target==undefined ? event.srcElement : event.target);

// include a call to _doPostBack in the onclick event of OK/YES button ONLY

(targetObject.href!=undefined){ eval(targetObject.href); } else{ _doPostBack(targetObject.name,''); // it is assumed that name is available

上記のif/else構文は私の場合に関係します。__doPostBack主なことは、イベントオブジェクトと関数を使用して、一時停止と継続性の確認をシミュレートできることを知っていることです。

于 2009-01-23T17:30:11.667 に答える
0

ポールが言ったように...これは私にとってはうまくいきます（ASP.NETを使用していると思いますが、そうでない場合は簡単に書き直すことができます）：

function BeforeDelete(controlUniqueId) {
    confirmPopup('question...?', function() { __doPostBack(controlUniqueId, ''); });
    return false;
}

function confirmPopup(message, okCallback) {
    $('#popup-buttons-confirm').click(okCallback);
    // set message
    // show popup
}
于 2009-07-16T12:06:10.713 に答える
0

私の Fiddle モーダル アラート ボックスをチェックしてください: http://jsfiddle.net/katiabaer/UXM9y/33/ with JqueryUI modal

   showAlert = function (msg, header, callback) {
      var mydiv = $("<div id='mydiv'> </div>");
      mydiv.alertBox({
          message: msg,
          header: header,
          callback: callback
      });

  },

  $('#show').click(function () {
      var m = $('#message').val();
      var h = $('#header').val();
      var callback = function () {
          alert("I can do anything here");
      }
      showAlert(m, h, callback);

  });

  $.widget("MY.alertBox", {
      options: {
          message: "",
          header: "",
          callback: ''
      },

      _create: function () {
          var self = this;
          self.callback = self.options.callback;

          self.container = $(".alert-messagebox");
          var header = self.container.find(".alert-header");
          header.html(self.options.header);

          var message = self.container.find(".alert-message");
          message.html(self.options.message);

          var closeButton = self.container.find("button.modal-close-button");
          closeButton.click(function () {
              self.close();
          });

          self.show();
      },

      show: function () {
          var self = this;
          self.container.modal({
              maxWidth: 500
          });
      },

      close: function () {

          if (this.callback != null) {
              this.callback();
              $.modal.close();
              return;
          }
          $.modal.close();

      },

      destroy: function () {
          $.Widget.prototype.destroy.call(this);
      }

  });
于 2013-08-19T14:37:08.250 に答える