jQuery UI Модальный диалог - Предотвращение действий, если не нажата кнопка OK

Question

РЕДАКТИРОВАТЬ :

Я хочу заменить следующее диалоговым окном jquery UI:

<asp:LinkButton ID="foo" runat="server" OnClick="someMethodThatPostsBack" OnClientClick="return confirmAction()" Text="Delete" />

<script type="text/javascript">
    function confirmAction() {
        return confirm("Are you sure you want to delete this?");
    }
</script>

Я не хочу, чтобы действие отправлялось обратно, если толькоОК нажимается в диалоговом окне.Это прекрасно работает в обычном JavaScript с подтверждением.Я хотел бы заменить его на диалоговое окно jQuery UI, чтобы оно выглядело немного красивее.Возможно ли это?

Я создал диалоговое окно, которое открывается при нажатии на ссылку или кнопку:

<a id="aboutLink" href="/Home/About">About</a>

<script type="text/javascript">
    $("#aboutLInk").click(function() { 
        $("myDialog").dialog({
            modal: true,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
        }
        });
    });
</script>

Когда я нажимаю на ссылку, я перехожу на страницу О программе.Я хочу иметь возможность показывать диалоговое окно и переходить только на страницу «О программе» в зависимости от того, нажимают ли они кнопку «ОК» в диалоговом окне.Если они нажимают кнопку отмены, это ничего не должно делать.Как мне это сделать?

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

Answer 1

1. На самом деле вы не можете сделать это - обработчик click немедленно возвращается, поэтому вы должны предотвратить переход по ссылке самостоятельно, если (и только если) Javascript включен.

   (верните false из обработчика отмены, чтобы предотвратить переход по ссылке)

   Чтобы фактически изменить адрес страницы при нажатии OK, установите window.location в обратном вызове.

2. Да, вам нужно уничтожить диалог, когда он закончится - замена close на destroy в ваших обработчиках событий должна достичь этого.

Я поставил рабочую демонстрацию на http://jsfiddle.net/alnitak/WWVEg/

$("#aboutLink").click(function() {
    var that = this;         // save a reference to the clicked link
    $("#myDialog").dialog({
        modal: true,
        buttons: {
            "OK": function() {
                $(this).dialog("destroy");
                window.location = that.href;
            },
            Cancel: function() {
                $(this).dialog("destroy");
            }
        }
    });
    return false;
});

FWIW, вероятно, нет необходимости строго закрывать или уничтожать диалог в обратном вызове OK, поскольку следующая строка в любом случае вызовет перезагрузку страницы - я ожидаю, что загрузка новой страницы будет быстрее без нее.

Answer 2

После просмотра комментариев ниже приведено то, что работает гладко

Выполнение этого в пользовательском интерфейсе jQuery

Вы можете использовать плагин jquery.confirm изатем добавьте $("#btndelete").trigger("click.confirmed"); в событиях подтверждения

Использование:

Требования

• jQuery> 1,8

• jquery.confirm plugin

• Bootstrap

  $("#btndelete").confirm({
     title:"Delete confirmation",
     text:"Are you sure you want to delete ???",
     confirm: function(button) {
        // Do something..
        $("#btndelete").trigger("click.confirmed");// it is to trigger
          //the same elements click event which we would trigger without a
          //confirmation dialog
        //alert("You just confirmed.");
     },
     cancel: function(button) {
        // Do something
        //alert("You aborted the operation.");
     },
    confirmButton: "Yes I am sure",
    cancelButton: "No Do not Delete"  });
  

Конечно, решение для тех, кто сталкивается с проблемой теперь

Answer 3

Да, вы можете сделать то же самое, используя диалоговое окно jQuery UI.

Ваш код кнопки ASPX:

 <asp:TemplateField HeaderStyle-Width="100px">
                            <ItemTemplate>
                                <asp:Button ID="Button1" runat="server" OnClientClick="javascript:return deleteItem(this.name, this.alt);"
                                    CommandArgument='<%# Eval("id") %>' CommandName='<%# Eval("status") %>' Text='<%# Eval("status").ToString().Trim().Equals("y") ? "Deactive"  : "Active"   %>' />
                            </ItemTemplate>
                        </asp:TemplateField>

Javascript код:

<script type="text/javascript">
    $(function () {
        InitializeDeleteConfirmation();
    });

    function InitializeDeleteConfirmation() {
        $('#dialog-confirm').dialog({
            autoOpen: false,
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    }
    function confirmDelete() {
        return confirm("Are you sure you want to delete this?");

    }
    function deleteItem(uniqueID) {    

    $("#dialog-confirm").html("Are you sure you want to change the status ?");

    $("#dialog-confirm").dialog({
        title: 'Confirm',
        height: 150,
        width: 400,
        buttons: {
            "Yes": function () { __doPostBack(uniqueID, ''); 
                      $(this).dialog("close"); },
            "No": function () { $(this).dialog("close"); }
        }
    });

    $('#dialog-confirm').dialog('open');
    return false;
} 


</script>

Надеюсь, это поможет вам.

Answer 4

О, мальчик, это старо ... но я столкнулся с той же проблемой, что и вы, и решил сделать это так:

jQuery(function () {
    var accepted = false;
    jQuery('#dialog').dialog({
        autoOpen: false,
        bgiframe: true,
        width: 450,
        modal: true,
        open: function () {
            accepted = false;
        },
        buttons: {
            "Accept": function () {
                accepted = true;
                jQuery(this).dialog("close");
            },
            Cancel: function () {
                jQuery(this).dialog("close");
            }
        },
        close: function () {
            if (accepted == false) {
                jQuery("#chkBox").prop("checked", false);
            }
        }
    });
});

По сути, я только что объявил логическую переменную, которая изменяется, когда "OK "или" Принять "нажата.Функция close проверяет это логическое значение, и если оно установлено в false, оно снимает флажок.Если установлено значение true, ничего не происходит.