将js确认更改为jquery ui的确认?

时间:2012-08-03 09:18:59

标签: javascript jquery-ui jquery jquery-plugins

我正在使用js确认。我想更多地beautiful with jquery UI

使用js确认:

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

有人可以告诉我如何使用jquery UI确认更改它?

1 个答案:

答案 0 :(得分:2)

首先,您需要创建将要显示的元素。示例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>

当您通过.dialog()参数调用autoOpen: false时,该元素将自动隐藏。最好在DOM就绪处理程序中进行。

jQuery UI的对话框是异步,它们不会冻结函数并等待confirm提示符响应。相反,你必须将你的功能包装在“是”确认按钮的回调中。

当您需要对话框时,只需拨打$("#dialog-confirm").dialog("open");

要完成,当您将函数从单击处理程序移动到对话框的回调处理程序时,this将不再引用所单击的元素。我使用.data将点击的$(this).attr('href')存储在#dialog-confirm的数据中,然后检索它以进行Ajax调用。

以下是代码:

$(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