jQuery Подтвердите диалог в ASP.NET кнопку OnClientClick - PullRequest
Новая
       23

jQuery Подтвердите диалог в ASP.NET кнопку OnClientClick

8 голосов
/ 28 октября 2010

У меня есть TemplateField в GridView в UpdatePanel с кнопкой с именем btnDelete.Вместо стандартного OnClientClick="return confirm('Are you sure?')" я бы хотел использовать jQuery Dialog.

Пока что я могу установить jQuery с помощью btnDelete.Attributes["onclick"] и установить код jQuery Dialog в коде позади.Тем не менее, он отправляет обратно на сервер во всех случаях, прежде чем у меня есть возможность нажать «Подтвердить» или «Отмена».

Вот HTML-код, который он производит: 

<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() { 
            $('#delete-transfer-confirm').dialog({
              buttons: {
                'Confirm' : function() { $(this).dialog('close'); return true; },
                'Cancel'  : function() { $(this).dialog('close'); return false; }
              }
            });

            $('p.message').text($(this).attr('rel'));
            $('#delete-transfer-confirm').dialog('open');
          };" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

Что я делаю неправильно, из-за чего эта функция не блокируется, пока не нажата ни одна из кнопок?

И наоборот,стандартное подтверждение работает отлично: 

<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert(&quot;Unexpected Error:\n\n&quot; + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

Спасибо, Марк

ОБНОВЛЕНИЕ:

В конечном итоге мне пришлось использовать UseSubmitBehavior = "false", чтобыполучить атрибут name = "" для отображения.Затем мне пришлось переопределить OnClientClick, установив значение «return»;поэтому __doPostBack () по умолчанию не выполняется.Затем я смог подключить обработчик щелчков .live (), который вызывает __doPostBack () при подтверждении: 

$('input.delete').live('click', function(e) {
        var btnDelete = $(this);
        alert($(btnDelete).attr('name'));
        e.preventDefault();


        $('#delete-transfer-confirm').dialog({
          buttons: {
            'Confirm': function() {
              $(this).dialog('close');
              __doPostBack($(btnDelete).attr('name'), '');

              return true;
            },
            'Cancel': function() {
              $(this).dialog('close');
              return false;
            }
          }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
      });

Ответы [ 2 ]

4 голосов
/ 29 октября 2010

Проверьте выбранный ответ на этот вопрос, например: Как реализовать диалоговое окно «подтверждение» в диалоговом окне Jquery UI?

Пара замечаний:

Донне помещайте свою функциональность onclick в атрибут onclick.Одним из больших преимуществ jQuery является то, что он позволяет вам делать ненавязчивый Javascript.Вместо этого сделайте что-то вроде этого: 

$(function() {
    $('.delete').click(function(e) {
        e.preventDefault() //this will stop the automatic form submission
        //your functionality here
    });
});

Также убедитесь, что ваш диалог создается вне события click, чтобы он инициализировался до того, как произойдет событие первого нажатия.Итак, что-то вроде этого будет вашим результатом: 

$(function() {
     $("#delete-transfer-confirm").dialog({
      autoOpen: false,
      modal: true
    });

    $('.delete').click(function(e) {
        e.preventDefault();
        $('#delete-transfer-confirm').dialog({
            buttons: {
                'Confirm': function() {
                    $(this).dialog('close');
                    return true;
                },
                'Cancel': function() {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
    });
});

Это должно помочь вам.

1 голос
/ 14 августа 2014 
$(document).ready(function () {

        $('#btnCancel').click(function (e) {
            e.preventDefault();

            $("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({
                modal: true,
                draggable: false,
                resizable: false,
                width: 430,
                height: 150,
                buttons: {
                    "No": function () {
                        $(this).dialog("destroy");

                    },
                    "Yes": function () {
                        $("#btnCancel").unbind();
                        $(this).dialog("destroy");
                        document.getElementById('<%= btnCancel.ClientID %>').click();

                    }
                }
            });
        });

    });

Тогда в теле страницы 

 <asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
                    onclick="btnCancel_ClickEvent" clientidmode="Static" />
...