モーダルダイアログの確認結果を呼び出し関数に戻すにはどうすればいいですか？

mvcページにjquery UIダイアログを追加しました。ダイアログが開かれた後、ダイアログが（）または（）の場合は、bool値をキャッチする必要があります。モーダルダイアログの確認結果を呼び出し関数に戻すにはどうすればいいですか？

これまでのところ、私は別の答えで述べたようにコールバックを追加しようとしましたが、その値を$('#escalation').on('click', '.delete', function (evt)に戻す方法がわからないので、リダイレクトを行うことができます。

質問：

がどのように私はjQueryのUIのモーダルダイアログボックスから関数を呼び出すにはbool値を返す渡すことができますか？

擬似コード：

これは、以下の函数の実行の私の意図した流れです：ボタンのクリックで開い

1.Callダイアログ。

2.ユーザーがモーダルダイアログで「OK」または「キャンセル」を選択したかどうかによって、真または偽が返されます。

3.ボタンのクリックイベントに返された結果がfalseの場合、ダイアログを閉じます。それ以外の場合はwindow.location.href = RedirectTo;コードを呼び出します。

コード：

ダイアログマークアップ -

      <div id="dialog-confirm" title="Delete Selected Record?"> 
           <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This record will be permanently deleted.</p> <p>Are you sure?</p> 
          </div>

jQueryのスクリプト -

<script> 
    var baseUri = '@Url.Content("~")'; 

    $(document).ready(function() { 
     $('#escalation').DataTable({ 
      "order": [[6, "desc"]] 
     }); 


     $('#escalation').on('click', '.delete', function (evt) { 
      var cell = $(evt.target).closest("tr").children().first(); 
      var EscalationID = cell.text(); 
      var RedirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + EscalationID; 


      ////open dialog 
      evt.preventDefault(); 
      $("#dialog-confirm").dialog("open"); 

      //Need to call this code if the dialog result callback equals true 
      window.location.href = RedirectTo; 

      //Otherwise do nothing..close dialog 

     }); 


     //Dialog opened here, not sure how to pass back the boolean values 
     //to the delete click function above 
     $("#dialog-confirm").dialog({ 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       "Confirm": function() { 
        callback(true); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
        callback(false); 
       } 
      } 
     }); 


    }); 
</script>

出典

2016-05-19 Brian J

ジャストボタンのクリックハンドラ内のターゲット・コードを記述するか、フラグを設定し、$(".selector").on("dialogclose", function(event, ui) {});を使用イベントハンドラを使用してフラグの状態を確認します。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery-ui.min.js"></script> 
<script> 
$(function() { 
    var baseUri = "http://localost"; 
    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     modal: true, 
     resizable: false, 
     width: 450, 
     open: function() { 
      $(this).data("state", ""); 
     }, 
     buttons: { 
      "OK": function() { 
       $(this).data("state", "confirmed").dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    $(".btn").click(function() { 
     var escalationId = $(this).data("escalation-id"); 
     var redirectTo = baseUri + "/EscalationHistory/DeleteEscalation?EscalationID=" + escalationId; 
     // Use "bind" instead "on" if jQuery < 1.7 
     $("#dialog-confirm").dialog("open").on("dialogclose", function(event, ui) { 
      if ($(this).data("state") == "confirmed") { 
       location.replace(redirectTo); 
      } 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
<button class="btn" data-escalation-id="123">Delete 123</button> 
<button class="btn" data-escalation-id="124">Delete 124</button> 
<div id="dialog-confirm" style="display:none">Are you sure?</div> 
</body> 
</html>

しかし、IMOでは、ボタンクリックハンドラでコードを直接書くのが理想的です。

出典

2016-05-19 17:27:53 Vagharsh

この場合、フラグをどのように使用するかの例を挙げることはできますか？ –

更新された回答を参照してください。 – Vagharsh

モーダルダイアログの確認結果を呼び出し関数に戻すにはどうすればいいですか？

答えて

関連する問題