Блог

Редактировать:

Я хочу заменить следующее диалогом пользовательского интерфейса jquery:

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

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

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

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

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

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

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

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

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

 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» или «Accept». Функция close проверяет это логическое значение, и если для него установлено значение false, она снимает мой флажок. Если установлено значение true, ничего не происходит.

Да, вы можете сделать то же самое с помощью диалогового окна пользовательского интерфейса jQuery.

Ваш код кнопки 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>
  

Я надеюсь, что это поможет вам.

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

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

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

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

Требования

• jQuery > 1.8

• плагин jquery.confirm

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

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