Question

I am using js confirmation. I want to make it more beautiful with jquery UI.

Using js confirmation:

$("a.delete").click(function() {
    el = $(this);
    if (confirm("Are you sure you want delete the data?")) {
        $.ajax({
            url : $(this).attr("href"),
            type : "GET",
            dataType : 'json', //The requested response in JSON format
            success : function(response) {
                if (response.status == 1) {
                    loadData();
                    $("#divFormContent").load("ajax.php?module=test&action=form_test");
                    $("#divFormContent").hide();
                    $("#btn_hide").hide();
                    // alert("The data successfully deleted!");
                } else {
                    alert("Data failed in the clearing!");
                }
            }
        });
    }
    return false;
}); 

Can anybody tell me how can I change it using jquery UI confirmation?

Answer 1

First, you need to create the element which will be displayed. Sample html:

<div id="dialog-confirm" title="Confirmation">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:5px 7px 20px 0;"></span>Are you sure?</p>
</div>

The element will be automatically hidden when you call .dialog() on it passing the autoOpen: false parameter. Do it inside the DOM ready handler preferably.

jQuery UI’s dialog boxes are asynchronous, they won’t freeze the function and wait for a response as the confirm prompt does. Instead, you have to wrap your function inside the “Yes” confirmation button’s callback.

When you need the dialog then, just call $("#dialog-confirm").dialog("open");.

And to finish, this will no longer reference the clicked element when you move your function from the click handler to the dialog’s callback handler. I used .data to store the clicked $(this).attr('href') in the #dialog-confirm‘s data and retrieve it for the Ajax call.

Here’s the code:

$(function() {
    $("a.delete").click(function() {
        $('#dialog-confirm').data('clickedHref', $(this).attr('href'));
        $("#dialog-confirm").dialog("open");
        return false;
    });

    $("#dialog-confirm").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        buttons: {
            "Yes": function() {
                $.ajax({
                    url : $('#dialog-confirm').data('clickedHref'),
                    //rest of your function here
                });
                $(this).dialog("close");
            },
            "No": function() {
                $(this).dialog("close");
            }
        }
    });
});

jsFiddle