Как добавить модальное подтверждение Jquery

Question

Я пытался удалить данные из базы данных с помощью jquery, и следующий скрипт помог мне сделать это. Теперь я хочу показать модальное подтверждение jquery (ДА: НЕТ), прежде чем оно, наконец, пойдет на его удаление. Я прошел несколько уроков, чтобы узнать, как это сделать, но я не смог заставить их работать на меня

Пожалуйста, покажите мне, как добавить модальное подтверждение.

Спасибо

<script>

 $(function(){ // added
             $('a.delete').click(function(){
                var a_href = $(this).attr('href'); 
     $.ajax({

     type: "POST",
     url: "<?php echo base_url(); ?>batchlist/delete",
     data: "id="+a_href,
     success: function(server_response){

               if(server_response == '1')
                            { alert('MSG');}  else {$("#trid_"+a_href).hide('slow'); }

                                    }               

   });  //$.ajax ends here

                return false
    });//.click function ends here
  }); // function ends here         


 </script                                   

Это мой якорь удаления

<a href="<?php echo $row['studentid']; ?>" title="Delete" class="delete" ><img src="<?php echo base_url(); ?>support/images/icons/cross.png" alt="Delete" /></a>            

Answer 1

вам не нужен jQuery для этого. Javascript сделает это просто прекрасно:

if (confirm("Are you sure you want to contiune with this request?")) {
     //Do stuff
}

Простой:)

Answer 2

Самый простой способ сделать это с помощью базового JavaScript.

Прямо перед вызовом ajax, поставьте это

if(!confirm('Are you sure you want to delete this?') {
    return false;
}

Так что, если они отклоняются, это не беспокоит Ajax.

Answer 3

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

(function ($) {
        $.widget('my.confirmDialog', {
            options: {
                url: null,
                elements: null,
                postParamName: 'id',
                afterDelete: null
            },
            _create: function () {
                var that = this;
                var options = that.options;
                that.element.dialog({
                    resizable: false,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "Delete": function (e, ui) {
                            $(this).dialog("close");
                            $.post(options.url, that.postData, function (resp) {
                                that._trigger('afterDelete', e, resp);
                            });
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                });
                options.elements.live('click', function (event, ui) {
                    that.askConfirmation(this);
                });
            },
            askConfirmation: function (askElem) {
                var that = this;

                var confirmationText = $(askElem).attr("data-confirmation");
                that.element.text(confirmationText);

                var postData = {};
                postData[that.options.postParamName] = $(askElem).attr("data-value");
                that.postData = postData;

                that.element.dialog("open");
            },
            destroy: function () {
                this.element.dialog("destroy");
                $.Widget.prototype.destroy.apply(this, arguments);
            }

        });

    } (jQuery));

Использование действительно просто, вы просто создаете div для диалогового окна подтверждения:

<div title="Delete confirmation" id="sampleDeleteConfirmation"
    style="display: none;">
</div>

и применить виджет к этому элементу div, передав элементы, которые должны вызвать диалоговое окно подтверждения:

    $(document).ready(function () {

        $("#sampleDeleteConfirmation").confirmDialog({
            url: '/DeleteUrl',
            postParamName: 'canChangeThisIfNeeded',
            elements: $(".confirmThis"),
            afterDelete: function (event, response) {
                //callback after delete
            }
        });

    });

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

          <button type="button" class="confirmThis" data-value="123" data-confirmation="Delete item 123?">
                Delete
           </button>
          <button type="button" class="confirmThis" data-value="567" data-confirmation="Delete item 567?">
                Delete
           </button>

и все)