JQuery UIダイアログに変数を渡す

Question

PHPを使用してレコードを削除しています。私は、アクションを確認するためにJQueryのUIダイアログを使用したいが、リダイレクトURL関数に変数（私のRecordID）を渡す方法、またはURLにwindow.location.hrefをアクセスさせる方法を知らない。

$("#confirm").dialog({ 
resizable: false, 
autoOpen: false, 
modal: true, 
buttons: { 
    'OK': function() { 
      window.location.href = 'url and myvar??'; 
     $(this).dialog("close"); 
     }, 
    'Cancel': function() { 
     $(this).dialog("close"); 
     } 
    } 
}); 


$("#delete").click(function() { 
    $("#confirm").dialog("open").html ("Are U Sure?"); 
    return false; 
}); 

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a> 

これを行うには良い方法はありますか？

Answer 1

クリック時にダイアログの設定を変更したいとします（この場合、[OK]ボタンの動作）。あなたのために、あなたはそれらのすべてが醜い（イモ）多くのソリューションを持っています。 、

$("#delete").click(function(ev) { 
    ev.preventDefault(); // preventDefault should suffice, no return false 
    var href = $(this).attr("href"); 
    var dialog = $("<div>Are you sure?</div>"); 

    $(dialog).dialog({ 
     resizable: false, 
     autoOpen: true, 
     modal: true, 
     buttons: { 
      'OK': function() { 
       window.location = href; 
       $(this).dialog("close"); 
      }, 
      'Cancel': function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: { 
      $(this).remove(); 
     } 
    }); 
}); 

それとも、より良いあなたはそれを再利用できるように、関数に確認ダイアログをカプセル化し、そのような：私は、このようなものをその場でダイアログを生成し、それが使用された後、それを破壊アドバイスう：その後、

function confirmDialog(msg) { 
    var dialog = $("<div>"+msg+"</div>"); 
    var def = $.Deferred(); 

    $(dialog).dialog({ 
     resizable: false, 
     autoOpen: true, 
     modal: true, 
     buttons: { 
      'OK': function() { 
       def.resolve(); 
       $(this).dialog("close"); 
      }, 
      'Cancel': function() { 
       def.reject(); 
       $(this).dialog("close"); 
      } 
     }, 
     close: { 
      $(this).remove(); 
     } 
    }); 
    return def.promise(); 
} 

、あなたが確認rを確保するために、ダイアログを閉じる前に、繰延オブジェクトが拒否または解決されたかどうかを確認する必要がありますので、

confirmDialog("are your sure?").done(function() { 
    window.location = $(this).attr("href"); 
}).fail(function() { 
    // cry a little 
}); 

のようにそれを使用します終了時に排出されます（「キャンセル」ボタンを押すだけではありません）。これは、def.state（）=== "pending"条件で行うことができます。あなたはあなたのためのデータを格納する.DATA（）メソッドを使用して試すことができますhttp://api.jquery.com/category/deferred-object/

Answer 2

：延期のjqueryの詳細については

。

：変数を渡すために、この答え例えば Passing data to a jQuery UI Dialog

を見てみましょう、あなたはダイアログ

$("#dialog_div") 
.data('param_1', 'whateverdata') 
.dialog("open"); 

を開く前に、それは、データ機能を使用して保存することができますすることは次に、あなたがすることによってこれを取り戻すことができます

var my_data = $("#dialog_div").data('param_1') 

Answer 3

GETを使用してアクションを削除する必要はありませんが、そのようにしたい場合は、各リンクにdata-record-id属性があるようにjQueryで$ .dataを使用することをお勧めします。次に、リンクの1つをクリックすると、ダイアログがポップアップし、確認されると、リンクがURLに追加され、リダイレクトされます。 例：

$(function(){ 
    $(".deleteLink").click(function(){ 
     var id = $(this).data("record-id"); 
     var myHref = $(this).attr('href'); 
     $("#confirmDialog").dialog({ 
      buttons:{ 
      "Yes": function() 
       { 
        window.location.href = myHref + id; 
       } 
      } 
     }); 
    }); 

}）。近く

<a class="deleteLink" data-record-id="1">Delete</a> 
... 
<div id="confirmDialog"> 
    <p>Are you sure?</p> 
</div>