1

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?

4

1 に答える 1

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 Readyハンドラー内で実行してください。

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

jsフィドル

于 2012-08-03T09:51:10.573 に答える