Как реализовать диалог подтверждения в диалоге Jquery UI? - PullRequest
147 голосов
/ 20 мая 2009

Я пытаюсь использовать 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!
}

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

Ответы [ 23 ]

164 голосов
/ 10 июня 2009

Мне просто нужно было решить ту же проблему. Ключом к этому было то, что 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 с кодом в нем.

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

59 голосов
/ 19 ноября 2009

Я обнаружил, что ответ Пола не совсем сработал, поскольку то, как он настраивал параметры ПОСЛЕ создания экземпляра диалога при событии щелчка, было неверным. Вот мой код, который работал. Я не приспособил его к примеру Пола, но разница только в том, что некоторые элементы названы по-разному. Вы должны быть в состоянии решить это. Коррекция находится в установщике опции диалога для кнопок на событии щелчка.

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

    });

});

Надеюсь, что это поможет кому-то еще, так как этот пост изначально помог мне понять, что я решил опубликовать исправление.

27 голосов
/ 17 января 2012

Я создал собственную функцию для диалога подтверждения пользовательского интерфейса jquery. Вот код

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

Продолжай.

6 голосов
/ 29 марта 2011

Простое и короткое решение, которое я только что попробовал, и оно работает

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

тогда просто добавьте класс = "подтвердите" к вашей ссылке, и это работает!

6 голосов
/ 11 июня 2012

Это моё решение .. надеюсь, оно кому-нибудь поможет. Она написана на лету, а не копировалась, так что прости меня за любые ошибки.

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

Лично я предпочитаю это решение:)

edit: Извините .. я действительно должен был объяснить это более подробно. Мне это нравится, потому что, на мой взгляд, это элегантное решение. Когда пользователь нажимает кнопку, которую нужно подтвердить первым, событие отменяется, как и должно быть. Когда нажата кнопка подтверждения, решение состоит не в том, чтобы смоделировать щелчок ссылки, а в том, чтобы вызвать то же самое собственное событие jquery (щелчок) на исходной кнопке, которое сработало бы, если бы не было диалогового окна подтверждения. Единственным отличием является другое пространство имен событий (в данном случае «подтверждено»), поэтому диалоговое окно подтверждения больше не отображается. Собственный механизм Jquery может затем вступить во владение, и все может работать как ожидалось. Еще одним преимуществом является то, что его можно использовать для кнопок и гиперссылок. Надеюсь, я был достаточно ясен.

4 голосов
/ 19 декабря 2012

Я знаю, что это старый вопрос, но вот мое решение с использованием HTML5 атрибутов данных в MVC4:

<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");
});
3 голосов
/ 29 декабря 2009

Как указано выше. Предыдущие посты вывели меня на правильный путь. Вот как я это сделал. Идея состоит в том, чтобы рядом с каждой строкой таблицы было изображение (генерируемое скриптом PHP из базы данных). При щелчке изображения пользователь перенаправляется на URL-адрес, и в результате соответствующая запись удаляется из базы данных, показывая некоторые данные, относящиеся к нажатой записи, в диалоге пользовательского интерфейса jQuery.

Код 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 для фактического выполнения действия.

3 голосов
/ 20 мая 2009

Будет ли это делать?

$("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');
});
2 голосов
/ 22 октября 2010

(По состоянию на 22.03.2016 загрузка на странице, на которую указывает ссылка, не работает. Я оставляю ссылку здесь на случай, если разработчик исправит ее в какой-то момент, потому что это отличный маленький плагин. Оригинальный пост ниже. Альтернатива и действующая ссылка: jquery.confirm .)

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

2 голосов
/ 20 мая 2009

Как насчет этого:

$("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, вы можете адаптировать его под свои нужды.

...