Jquery UIダイアログで「確認」ダイアログを実装する方法は？
Queryいjavascript:alert()ボックスを置き換えるために、JQuery UIダイアログを使用しようとしています。私のシナリオでは、アイテムのリストがあり、各アイテムの隣に、アイテムごとに「削除」ボタンがあります。擬似HTMLのセットアップは次のようになります。
<ul>
<li>ITEM <a href="url/to/remove"> <span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
<li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>
<div id="confirmDialog">Are you sure?</div>
JQパートでは、ドキュメントの準備ができたら、まずdivを必要なボタンのあるモーダルダイアログに設定し、削除する前に「a」を確認するように設定します。
$("ul li a").click(function() {
// Show the dialog
return false; // to prevent the browser actually following the links!
}
OK、ここに問題があります。初期化中、ダイアログは誰（アイテム）が起動するのか、またアイテムID（！）も起動しません。ユーザーがまだ[はい]を選択した場合、リンクをたどって削除するために、これらの確認ボタンの動作を設定するにはどうすればよいですか？
同じ問題を解決する必要がありました。これを機能させるための鍵は、確認機能を使用するリンクのdialogイベントハンドラーでclickを部分的に初期化する必要があることです（複数のリンクに使用する場合）。これは、リンクのターゲットURLを確認ボタンクリックのイベントハンドラーに挿入する必要があるためです。どのリンクに確認動作が必要かを示すためにCSSクラスを使用しました。
これは、例に適したように抽象化された私のソリューションです。
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
CSSクラス（私の例ではconfirmLink）を使用してリンクを生成できれば、これでうまくいくと思います。
コードを含む jsfiddle を次に示します。
完全な開示のために、この特定の問題に数分を費やし、 この質問 に対して同様の回答を提供したことに注意します。
Paulの答えは、クリックイベントでダイアログがインスタンス化された後にオプションを設定する方法が間違っていたため、うまくいきませんでした。ここに働いていた私のコードがあります。ポールの例と一致するように調整していませんが、いくつかの要素の名前が異なるため、猫のひげの違いにすぎません。あなたはそれを解決できるはずです。修正は、クリックイベントのボタンのダイアログオプションのセッターにあります。
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
bgiframe: true,
width: 500,
height: 200,
autoOpen: false
});
$(".lb").click(function(e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog").dialog('option', 'buttons', {
"Confirm" : function() {
window.location.href = theHREF;
},
"Cancel" : function() {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
});
この投稿がもともと私が正しい道を下ろしたので、これが他の誰かを助けることを願っています、私は修正を投稿した方が良いと思いました。
Jquery ui確認ダイアログ用に独自の関数を作成しました。ここにコードがあります
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; Word-wrap: break-Word;">' + dialogText + '</div>').dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: {
OK: function () {
if (typeof (okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function () {
if (typeof (cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
これをコードで使用するには、次のように書くだけです
myConfirm('Do you want to delete this record ?', function () {
alert('You clicked OK');
}, function () {
alert('You clicked Cancel');
},
'Confirm Delete'
);
続ける。
これが私の解決策です。誰にも役立つことを願っています。コピーペーストではなく、オンザフライで書かれているので、間違いを許してくれます。
$("#btn").on("click", function(ev){
ev.preventDefault();
dialog.dialog("open");
dialog.find(".btnConfirm").on("click", function(){
// trigger click under different namespace so
// click handler will not be triggered but native
// functionality is preserved
$("#btn").trigger("click.confirmed");
}
dialog.find(".btnCancel").on("click", function(){
dialog.dialog("close");
}
});
個人的に私はこのソリューションを好む:)
編集：申し訳ありません。私は本当に詳細に説明する必要があります。私の意見ではエレガントなソリューションだからです。ユーザーが最初に確認する必要があるボタンをクリックすると、イベントはキャンセルされます。確認ボタンをクリックすると、解決策はリンククリックをシミュレートするのではなく、確認ダイアログがない場合にトリガーされるはずの元のボタンで同じネイティブjqueryイベント（クリック）をトリガーすることです。唯一の違いは、異なるイベントネームスペース（この場合は「確認済み」）であり、確認ダイアログが再び表示されないようにします。その後、jqueryネイティブメカニズムが引き継ぐことができ、物事は期待どおりに実行できます。もう1つの利点は、ボタンとハイパーリンクに使用できることです。私は十分に明確だったと思います。
私が試しただけで動作するシンプルで短いソリューション
$('.confirm').click(function() {
$(this).removeClass('confirm');
$(this).text("Sure?");
$(this).unbind();
return false;
});
次に、リンクにclass = "confirm"を追加するだけで機能します。
私はこれが古い質問であることを知っていますが、MVC4でHTML5 データ属性 を使用した私のソリューションです：
<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
Are you sure about this?
</div>
JSコード：
$("#dialog").dialog({
modal: true,
autoOpen: false,
buttons: {
"Confirm": function () {
window.location.href = $(this).data('url');
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#TheIdOfMyButton").click(function (e) {
e.preventDefault();
$("#dialog").dialog("open");
});
これでいいの？
$("ul li a").click(function(e) {
e.preventDefault();
$('#confirmDialog').show();
var delete_path = $(this).attr('href');
$('#confirmDialog a.ok').unbind('click'); // just in case the cancel link
// is not the only way you can
// close your dialog
$('#confirmDialog a.ok').click(function(e) {
e.preventDefault();
window.location.href = delete_path;
});
});
$('#confirmDialog a.cancel').click(function(e) {
e.preventDefault();
$('#confirmDialog').hide();
$('#confirmDialog a.ok').unbind('click');
});
上記のように。以前の投稿は私を正しい軌道に乗せました。これは私がやった方法です。アイデアは、テーブル内のすべての行の隣に画像を置くことです（データベースからPHPスクリプトによって生成されます）。画像がクリックされると、ユーザーはURLにリダイレクトされ、その結果、jQuery UIダイアログ内でクリックされたレコードに関連するデータを表示しながら、適切なレコードがデータベースから削除されます。
JavaScriptコード：
$(document).ready(function () {
$("#confirmDelete").dialog({
modal: true,
bgiframe: true,
autoOpen: false
});
});
function confirmDelete(username, id) {
var delUrl = "/users/delete/" + id;
$('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
$('#confirmDelete').dialog('option', 'buttons', {
"No": function () {
$(this).dialog("close");
},
"Yes": function () {
window.location.href = delUrl;
}
});
$('#confirmDelete').dialog('open');
}
ダイアログdiv：
<div id="confirmDelete" title="Delete User?"></div>
画像リンク：
<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>
この方法で、PHPループ値をダイアログボックスに渡すことができます。唯一の欠点は、GETメソッドを使用して実際にアクションを実行することです。
これはどう：
$("ul li a").click(function() {
el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
draggable:true,
modal: true,
buttons: { "Ok": function() {
el.parent().remove();
$(this).dialog("close"); } }
});
$("#confirmDialog").dialog("open");
return false;
});
私はこのhtmlでそれをテストしました：
<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>
Li要素全体が削除され、必要に応じて調整できます。
（2016年3月22日の時点で、リンク先のページのダウンロードは機能しません。デベロッパーがすばらしいプラグインであるため、ある時点で修正する場合のために、ここにリンクを残します。元の投稿は次のとおりです。代わりに、実際に機能するリンク： jquery.confirm 。）
ニーズには単純すぎるかもしれませんが、これを試すことができます jQuery confirm plugin 。使い方は本当に簡単で、多くの場合に仕事をします。
私は自分でこれに遭遇し、解決策を見つけました。これはここでのいくつかの答えに似ていますが、実装方法が少し異なります。 JavaScriptの多くの部分やプレースホルダーdivがどこか好きではありませんでした。汎用的なソリューションが必要でした。それは、使用するたびにJavaScriptを追加することなくHTMLで使用できます。ここに私が思いついたものがあります（これにはjquery uiが必要です）：
Javascript：
$(function() {
$("a.confirm").button().click(function(e) {
e.preventDefault();
var target = $(this).attr("href");
var content = $(this).attr("title");
var title = $(this).attr("alt");
$('<div>' + content + '</div>'). dialog({
draggable: false,
modal: true,
resizable: false,
width: 'auto',
title: title,
buttons: {
"Confirm": function() {
window.location.href = target;
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
});
そして、HTMLでは、javascriptの呼び出しや参照は必要ありません。
<a href="http://www.google.com/"
class="confirm"
alt="Confirm test"
title="Are you sure?">Test</a>
Title属性はdivコンテンツに使用されるため、ユーザーはボタンの上にカーソルを置くことで確認の質問を取得することもできます（これがタイルのtitle属性を使用しなかった理由です）。確認ウィンドウのタイトルは、altタグのコンテンツです。 javascriptスニペットは、一般化された.jsインクルードに含めることができます。クラスを適用するだけで、かなりの確認ウィンドウが表示されます。
Evalを使用するのは嫌いですが、状況によっては多くの問題を引き起こすことなく、最も簡単な方法のように思えました。 javascript settimeout関数に似ています。
<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
<p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: false,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
eval(callback)
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
}
function do_function(params){
console.log('approved');
}
</script>
注：コメントするのに十分な担当者はいませんが、Homerとechoで強調されているように、ASPXページでのポストバックの問題を解決するのにBineGの答えは完全に機能します。敬意を表して、動的ダイアログを使用したバリエーションを以下に示します。
$('#submit-button').bind('click', function(ev) {
var $btn = $(this);
ev.preventDefault();
$("<div />").html("Are you sure?").dialog({
modal: true,
title: "Confirmation",
buttons: [{
text: "Ok",
click: function() {
$btn.trigger("click.confirmed");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]
}).show();
});
すぐに使用できるJQuery UIは、このソリューションを提供します。
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
} );
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
これをさらにカスタマイズするには、JQuery関数の名前を指定し、パラメーターとして表示するテキスト/タイトルを渡します。
私はこの質問が古いことを知っていますが、確認ダイアログを使用しなければならなかったのはこれが初めてでした。これが最短の方法だと思います。
$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
var conBox = confirm("Are you sure ?");
if(conBox){
// Do what you have to do
}
else
return;
});
気に入ってくれるといいな ：）
ここにたくさんの良い答えがあります;）ここに私のアプローチがあります。 eval（）の使用法に似ています。
function functionExecutor(functionName, args){
functionName.apply(this, args);
}
function showConfirmationDialog(html, functionYes, fYesArgs){
$('#dialog').html(html);
$('#dialog').dialog({
buttons : [
{
text:'YES',
click: function(){
functionExecutor(functionYes, fYesArgs);
$(this).dialog("close");
},
class:'green'
},
{
text:'CANCEL',
click: function() {
$(this).dialog("close");
},
class:'red'
}
]
});
}
そして、使用法は次のようになります。
function myTestYesFunction(arg1, arg2){
alert("You clicked YES:"+arg1+arg2);
}
function toDoOrNotToDo(){
showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}
個人的には、これは多くのASP.Net MVCアプリケーションの多くのビューで繰り返される要件と考えています。
そのため、モデルクラスと部分ビューを定義しました。
using Resources;
namespace YourNamespace.Models
{
public class SyConfirmationDialogModel
{
public SyConfirmationDialogModel()
{
this.DialogId = "dlgconfirm";
this.DialogTitle = Global.LblTitleConfirm;
this.UrlAttribute = "href";
this.ButtonConfirmText = Global.LblButtonConfirm;
this.ButtonCancelText = Global.LblButtonCancel;
}
public string DialogId { get; set; }
public string DialogTitle { get; set; }
public string DialogMessage { get; set; }
public string JQueryClickSelector { get; set; }
public string UrlAttribute { get; set; }
public string ButtonConfirmText { get; set; }
public string ButtonCancelText { get; set; }
}
}
そして私の部分的な見解：
@using YourNamespace.Models;
@model SyConfirmationDialogModel
<div id="@Model.DialogId" title="@Model.DialogTitle">
@Model.DialogMessage
</div>
<script type="text/javascript">
$(function() {
$("#@Model.DialogId").dialog({
autoOpen: false,
modal: true
});
$("@Model.JQueryClickSelector").click(function (e) {
e.preventDefault();
var sTargetUrl = $(this).attr("@Model.UrlAttribute");
$("#@Model.DialogId").dialog({
buttons: {
"@Model.ButtonConfirmText": function () {
window.location.href = sTargetUrl;
},
"@Model.ButtonCancelText": function () {
$(this).dialog("close");
}
}
});
$("#@Model.DialogId").dialog("open");
});
});
</script>
そして、ビューで必要になるたびに、@ Html.Partialを使用します（JQueryが定義されるようにセクションスクリプトで使用しました）。
@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})
秘Theは、確認ダイアログを必要とする要素に一致するJQueryClickSelectorを指定することです。私の場合、すべてのアンカーはクラスSyLinkDeleteを持ちますが、それは識別子、異なるクラスなどである可能性があります。私にとっては次のリストでした。
<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
<img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>
ASP.NET Gridview（コマンドのGridViewコントロールビルド）内のリンクボタンで使用するためにこれを探していたので、ダイアログの[確認]アクションは、実行時にGridviewコントロールによって生成されたスクリプトをアクティブにする必要があります。これは私のために働いた：
$(".DeleteBtnClass").click(function (e) {
e.preventDefault();
var inlineFunction = $(this).attr("href") + ";";
$("#dialog").dialog({
buttons: {
"Yes": function () {
eval(inlineFunction); // eval() can be harmful!
},
"No": function () {
$(this).dialog("close");
}
}
});
});
上記の別のバリエーションでは、コントロールが2つの異なるhtmlコントロールとして表示される「asp：linkbutton」または「asp：button」のどちらであるかをチェックします。私にはうまく機能しているようですが、広範囲にテストしていません。
$(document).on("click", ".confirm", function (e) {
e.preventDefault();
var btn = $(this);
$("#dialog").dialog('option', 'buttons', {
"Confirm": function () {
if (btn.is("input")) {
var name = btn.attr("name");
__doPostBack(name, '')
}
else {
var href = btn.attr("href");
window.location.href = href;
}
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
});
$("#dialog").dialog("open");
});
$("ul li a").live('click', function (e) {
e.preventDefault();
$('<div></div>').appendTo('body')
.html('<div><h6>Are you sure about this?</h6></div>')
.dialog({
modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
width: 'auto', modal: true, resizable: false,
buttons: {
Confirm: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
window.location.reload();
},
No: function () {
$(this).dialog("close");
}
},
Cancel: function (event, ui) {
$(this).remove();
}
});
return false;
});
非常に人気のあるトピックであり、グーグルは「jqueryダイアログでどのイベントがクリックされたかを閉じる」クエリでこれを見つけます。私のソリューションは、YES、NO、ESC_KEY、Xイベントを適切に処理します。ダイアログがどのように破棄されても、コールバック関数が呼び出されるようにします。
function dialog_YES_NO(sTitle, txt, fn) {
$("#dialog-main").dialog({
title: sTitle,
resizable: true,
//height:140,
modal: true,
open: function() { $(this).data("retval", false); $(this).text(txt); },
close: function(evt) {
var arg1 = $(this).data("retval")==true;
setTimeout(function() { fn(arg1); }, 30);
},
buttons: {
"Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
"No": function() { $(this).data("retval", false); $(this).dialog("close"); }
}
});
}
- - - -
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
alert("Dialog retval is " + status);
});
ブラウザを新しいURLにリダイレクトしたり、関数retvalで何か他のことを実行したりするのは簡単です。