1

以下のすべてのコードは、私がやろうとしていることのスタンドアロンの実例です (大幅に簡略化されています)。誰かが以下のコード ブロックを 3 つの個別のファイルにコピー アンド ペーストした場合、コードは完全に自己完結型です。ドキュメントの上部にあるスクリプト タグで test5.js と jquery ライブラリを参照/インクルードすることを忘れないでください。

概要: Ajax 経由で挿入された HTML div が jQuery UI ダイアログ ウィジェットで開かない。

目的:ドキュメントの読み込み時に、jquery-ajax は html フォームを挿入します (最終的に、ajax の理由である DB から適切なフォーム値を取得します)。id="clickme" の div が html に挿入されます。div をクリックすると、ダイアログが開きます。

問題: jQueryUI .dialog が表示されません。クリック イベント内に警告ボックスを配置すると、それが発生します。しかし、対話はとらえどころのないままです。

そのため、HTML が挿入されていることが問題のようです。私は何が欠けていますか？

HTML: index.php

<div id="putit_here">
</div>

JAVASCRIPT/JQUERY: test5.js

$(function() {

    var pih = $('#putit_here');

    $.ajax({
        type: "POST",
        url: "ajax/ax_test5.php",
        data: 'contact_id=1',
        success:function(data){
            pih.html(data);
            var etc1 = $( "#editThisContact_1" );
    /* *****************************************************************
        Moving Dialog up >here< was correct answer.
    ********************************************************************
            etc1.dialog({
                autoOpen: false,
                height: 400,
                width: 600,
                modal: true,
                buttons: {
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    alert('DialogClose fired');
                }
            }); //end .Dialog
    ****************************************************************** */

        }
    }); //End ajax

    /* **** This is where I had it previously ***** */
    etc1.dialog({
        autoOpen: false,
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            alert('DialogClose fired');
        }
    }); //end .Dialog

    $(document).on('click', '#clickme', function(event) {
        alert('HereIAm...');
        $( "#editThisContact_1" ).dialog( "open" );
    }); //End #clickme.click

}); //End document.ready

AJAX - ax_test5.php

    $rrow = array();
    $rrow['contact_id'] = 1;
    $rrow['first_name'] = 'Peter';
    $rrow['last_name'] = 'Rabbit';
    $rrow['email1'] = 'peter.rabbit@thewarren.nimh.com';
    $rrow['cell_phone'] = '+1.250.555.1212';

    $r = '

    <div id="editThisContact_'.$rrow['contact_id'].'" style="display:none">
            <p class="instructions">Edit contact information for <span class="editname"></span>.</p>
        <form name="editForm" onsubmit="return false;">
            <fieldset>
        <span style="position:relative;left:-95px;">First Name:</span><span style="position:relative;left:10px;">Last Name:</span><br />
            <input type="text" id="fn_'.$rrow['contact_id'].'" value="'.$rrow['first_name'].'" name="fn_'.$rrow['contact_id'].'">
            <input type="text" id="ln_'.$rrow['contact_id'].'" value="'.$rrow['last_name'].'" name="ln_'.$rrow['contact_id'].'"><br /><br />
        <span style="position:relative;left:-120px;">Email:</span><span style="position:relative;left:30px;">Cell Phone:</span><br />
            <input type="text" id="em_'.$rrow['contact_id'].'" value="'.$rrow['email1'].'" name="em_'.$rrow['contact_id'].'">
            <input type="text" id="cp_'.$rrow['contact_id'].'" value="'.$rrow['cell_phone'].'" name="cp_'.$rrow['contact_id'].'">
            </fieldset>
        </form>
    </div>
    ';
    echo $r;

編集：

ダイアログ定義を AJAX 成功コールバック内に移動するように質問を更新しました。ただし、問題は完全には解決しませんでした。autoOpen フラグを true に変更するとダイアログが表示されるようになりましたが、これはスクリプトの動作方法ではありません。(注入された) #clickme div をクリックしても、ダイアログはまだ開きません。

編集2：

私の悪い。最初はうまくいかないと思っていましたが、ライブテストと投稿されたSOの質問が1行で異なることがわかりました.dialog（ "open"）がどのように呼び出されたか。ライブ コードでは、まだ var: etc1.dialog("open") を使用していましたが、上記の投稿ではセレクターが完全に参照されていました: $('#editThisContact_1').dialog("open")。投稿された構文は正しかった。クロムコンソールをチェックさせてくれた紳士、そしてイタチにも感謝します。

4

1 に答える 1

1

dialog要素が存在する前に要素のを初期化しようとしています。ajax 呼び出しが正常に戻った後、 「#editThisContact_1」でダイアログを初期化する必要があり ます。

このような：

....
success:function(data){
        pih.html(data);

        //now your DIV is actually there so init the dialog
        var etc1 = $( "#editThisContact_1" );
        etc1.dialog({
            autoOpen: false,
            height: 400,
            width: 600,
            modal: true,
            buttons: {
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                alert('DialogClose fired');
            }
        }); //end .Dialog
    }
于 2012-10-10T23:45:44.040 に答える