Как реализовать диалог подтверждения в диалоге Jquery UI?

Question

Я пытаюсь использовать JQuery UI Dialog, чтобы заменить уродливое поле javascript:alert(). В моем сценарии у меня есть список элементов, и рядом с каждым из них у меня будет кнопка «удалить» для каждого из них. установка psuedo 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!
}

Хорошо, вот проблема. во время инициализации диалог не будет знать, кто (элемент) запустит его, а также идентификатор элемента (!). Как я могу настроить поведение этих кнопок подтверждения, чтобы, если пользователь все еще выбирал ДА, он перешел по ссылке, чтобы удалить его?

Answer 1

Я сам столкнулся с этим и получил решение, которое похоже на несколько ответов здесь, но реализовано несколько иначе. Мне не нравилось много кусочков JavaScript или местный тег div. Я хотел обобщенное решение, которое затем можно было бы использовать в HTML без добавления JavaScript для каждого использования. Вот что я придумал (для этого требуется 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, и просто применив класс, у вас появится симпатичное окно подтверждения.

Answer 2

Как бы мне не хотелось использовать eval, мне показалось, что это самый простой способ, не вызывающий много проблем в зависимости от различных обстоятельств. Похоже на функцию тайм-аута JavaScript.

<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>

Answer 3

Из коробки 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 и передав текст / заголовок, который вы хотите отобразить в качестве параметра.

Ссылка: https://jqueryui.com/dialog/#modal-confirmation

Answer 4

Здесь так много хороших ответов;) Вот мой подход. Похоже на использование 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']);
}

Answer 5

Очень популярная тема, и Google находит это для запроса "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.

Answer 6

Лично я вижу это как повторяющееся требование во многих представлениях многих приложений 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]"})

Хитрость заключается в том, чтобы указать JQueryClickSelector, который будет соответствовать элементам, для которых требуется диалог подтверждения. В моем случае все якоря с классом SyLinkDelete, но это может быть идентификатор, другой класс и т. Д. Для меня это был список:

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

Answer 7

Я знаю, что этот вопрос старый, но я впервые использовал диалог подтверждения. Я думаю, что это самый короткий способ сделать это.

$(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;
});

надеюсь тебе понравится :) 1004 *

Answer 8

Еще один вариант описанного выше, где он проверяет, является ли элемент управления «asp: linkbutton» или «asp: button», который отображает как два разных HTML-элемента управления. Кажется, у меня все работает, но я не проверял это всесторонне.

        $(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");
        });

Answer 9

Простой способ с легким прикосновением JavaScript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}

Answer 10

ПРИМЕЧАНИЕ. Недостаточно повторений, чтобы комментировать, но ответ BineG отлично подходит для решения проблем обратной передачи на страницах ASPX, как это подчеркивали Гомер и Эхо. В честь вот вариант с использованием динамического диалога.

$('#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();  
});