web-dev-qa-db-ja.com

alert（）の代わりとしてのjQuery UIアラートダイアログ

alert()を使用して、デザインが他に何も提供しないため、検証エラーをユーザーに出力しますが、jQuery UIダイアログをメッセージのアラートダイアログボックスとして使用します。

エラーは（html）divに含まれていないため、これを実行する方法がわかりません。通常、dialog()をdivに割り当てる$("#divName").dialog()ですが、alert_dialog("Custom message here")などのjs関数がもっと必要です。

何か案は？

javascriptjqueryjquery-uialertjquery-ui-dialog
23
mauzilla

DOMに添付する必要さえないと思います。これは私にとってはうまくいくようです：

$("<div>Test message</div>").dialog();

これがJSフィドルです：

http://jsfiddle.net/TpTNL/98

44
Clive

ここでいくつかの情報を使用して、使用する独自の関数を作成しました。

として使用することができます...

custom_alert();
custom_alert( 'Display Message' );
custom_alert( 'Display Message', 'Set Title' );

jQuery UIアラートの置き換え

function custom_alert( message, title ) {
    if ( !title )
        title = 'Alert';

    if ( !message )
        message = 'No Message to Display.';

    $('<div></div>').html( message ).dialog({
        title: title,
        resizable: false,
        modal: true,
        buttons: {
            'Ok': function()  {
                $( this ).dialog( 'close' );
            }
        }
    });
}
26
EkoJR

空の隠されたdivをhtmlページに投げてIDを与えるだけです。その後、それをjQuery UIダイアログに使用できます。 jquery呼び出しで通常行うように、テキストを入力できます。

4
SBerg413

Eidylonの答えに基づいて、TitleMsgが空の場合にタイトルバーを表示しないバージョンを次に示します。

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!outputMsg) return;

    var div=$('<div></div>');
    div.html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: onCloseCallback
    });
    if (!titleMsg) div.siblings('.ui-dialog-titlebar').hide();
}

jsfiddle を参照してください

4
kofifus

Nuxとmicheg79で述べたように、ダイアログが閉じた後、ノードはDOMに残されます。

これは、以下を追加するだけでクリーンアップすることもできます。

$(this).dialog('destroy').remove();

ダイアログのcloseメソッドに。この行をeidylonの答えに追加する例：

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: function() { onCloseCallback();
                           /* Cleanup node(s) from DOM */
                           $(this).dialog('destroy').remove();
                          }
    });
}

編集：コールバック関数を実行するのに問題があり、実際にコールバックをトリガーするにはonCloseCallbackに括弧（）を追加する必要があることがわかりました。これは私が理由を理解するのに役立ちました： JavaScriptでは、括弧で関数を呼び出すと違いが生じますか？

2
datascript

DAlert jQuery UIプラグイン これをチェックしてください。

1
Dilusha Gonagala

@EkoJRの回答を取得し、ユーザーがダイアログを閉じたときに発生するコールバック関数で渡す追加のパラメーターを追加しました。

function jqAlert(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": function () {
                $(this).dialog("close");
            }
        },
        close: onCloseCallback
    });
}

次に、それを呼び出して関数を渡すことができます。これは、ユーザーがダイアログを閉じるときに発生します。

jqAlert('Your payment maintenance has been saved.', 
        'Processing Complete', 
        function(){ window.location = 'search.aspx' })
1
eidylon

このコード構文を使用します。

   $("<div></div>").html("YOUR MESSAGE").dialog();

これは機能しますが、DOMにノードを追加します。クラスを使用してから、またはそのクラスのすべての要素を最初に削除できます。例：

function simple_alert(msg)
{
    $('div.simple_alert').remove();
    $('<div></div>').html(is_valid.msg).dialog({dialogClass:'simple_alert'});
}
0
micheg79

ダイアログを閉じると、onCloseCallback関数が実行されるという問題があります。これは優れた設計です。

function jAlert2(outputMsg, titleMsg, onCloseCallback) {
    if (!titleMsg)
        titleMsg = 'Alert';

    if (!outputMsg)
        outputMsg = 'No Message to Display.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": onCloseCallback,
            "Cancel": function() {
          $( this ).dialog( "destroy" );
            }

        },
    });
0
Chris