How to add modal on delete

Question

How to add model class on the delete button.

For now I am getting default confirm dialog box but I want different modal box in php CodeIgniter.

function delete_data(id, type) {
    var r = confirm("<?php echo $this->lang->line('delete_confirmation'); ?>");
    if (r == true) {
        // var type = $('#type').val();
        $.ajax({
            url: "<?php echo BASE_URL . 'admin/delete'; ?>",
            type: 'POST',
            data: 'id=' + id + '&type=' + type,
            success: function (data) {
                if (data == 1) {
                    Materialize.toast('delete_success', 'top left', 'green', "<?php echo ('deleted_successfully'); ?>");
                    //window.location='<?php echo BASE_URL; ?>'+'admin/student_list';
                    location.reload();
                } else {
                    Materialize.toast('delete_error', 'top left', 'red', "<?php echo ('delete_error'); ?>");
                }
            }
        })
    } else {
    }
}

 <a href="#" onclick="delete_data(<?php echo $row['id'];?>,'student');" class="btn-floating  red darken-2"><i class="material-icons right">close</i></a>

Answer 1

You could try this. I took the code from the Materialize theme site

http://demo.geekslabs.com/materialize-v1.0/advanced-ui-sweetalert.html

and cut-n-pasted together with your function above.

Why yes, it is totally untested. =)

function delete_data(id, type) {

    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function(isConfirm){
        if (isConfirm){
            $.ajax({
                url: "<?php echo BASE_URL . 'admin/delete'; ?>",
                type: 'POST',
                data: 'id=' + id + '&type=' + type,
                success: function (data) {
                    if (data == 1) {
                        swal("Deleted!", "Your imaginary file has been deleted!", "success");

              //  Materialize.toast('delete_success', 'top left', 'green', "<?php echo ('deleted_successfully'); ?>");
                //window.location='<?php echo BASE_URL; ?>'+'admin/student_list';
                        location.reload();
                    } else {
                        swal("Cancelled", "Your imaginary file is safe :)", "cancel");
               // Materialize.toast('delete_error', 'top left', 'red', "<?php echo ('delete_error'); ?>");
                    }
                }
            })

        } else {

            swal("Cancelled", "Your imaginary file is safe :)", "cancel");
        }
    });
});

Also, this code is from the Materialize theme site and is literally as shown, just wrapped in a jQuery event listener.

$('.btn-warning-cancel').click(function(){
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function(isConfirm){
        if (isConfirm){
            swal("Deleted!", "Your imaginary file has been deleted!", "success");
        } else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    });

});