0

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

概要: Ajax 経由で挿入された HTML フォームが、jQuery UI ダイアログ ウィジェットで機能しない。

目的: div #putit_here をクリックすると、jquery-ajax は html フォームを挿入します (最終的に、Ajax の理由である DB から適切なフォーム値を取得します)。ajax 経由で HTML を挿入すると、jQuery .dialog が表示され、ユーザーはフォーム データを変更してフォームを再送信できます。

問題: jQueryUI .dialog が表示されません。ただし、jQuery の ajax ブロックをコメントアウトし、HTML の 2 番目の div の名前を変更 (id="editThisContact_2" を id="editThisContact_1" に変更) すると、すべてが機能します。

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

ここで、このパズルの jsfiddle の例を作成しようとしています。これも幸運ではありません。jsfiddle で ajax 呼び出しをシミュレートする良い例については、こちらを参照してください。

HTML: index.php

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

<!-- ----------------------------------------------------------------------- -->
<!-- *** Below div not req for example. However, to prove the code works *** -->
<!-- *** without the ajax call, RENAME id="editThisContact_2" to _1 and  *** -->
<!-- *** comment-out the ajax block (see embedded notes) in the JS code. *** -->
<!-- ----------------------------------------------------------------------- -->
<div id="editThisContact_2" 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_1" value="Peter" name="fn_1">
        <input type="text" id="ln_1" value="Rabbit" name="ln_1"><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_1" value="pr@warren.nimh.com" name="em_1">
        <input type="text" id="cp_1" value="123-456-7890" name="cp_1">
        </fieldset>
    </form>
</div>

AJAX - ax_test4.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;

JAVASCRIPT/JQUERY: test4.js

<script>

$(function() {

    var pih = $('#putit_here');

    pih.click(function() {

        fn = $('#fn_1').val();
        ln = $('#ln_1').val();
        editname = fn + " " + ln;

//To test without ajax injection: (i.e. for "Test2", the proof...)
//Comment out from here --> */
            $.ajax({
            type: "POST",
            url: "ax_test4.php",
            data: 'user_level=0',
            success:function(data){
                pih.html(data);
            }
        }); //End ajax
//To here <-- */
        $( "#editThisContact_1" ).dialog( "open" );
    }); //End pih.click

    $( "#editThisContact_1" ).dialog({
        autoOpen: false,
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            alert('DialogClose fired');
        }
    });

}); //End document.ready

</script>
4

1 に答える 1

1

成功呼び出し内にダイアログを作成する必要があります。HTMLが存在しないときに、現在ダイアログを作成しています。

$.ajax({
            type: "POST",
            url: "ax_test4.php",
            data: 'user_level=0',
            success:function(data){
                pih.html(data);
           $( "#editThisContact_1" ).dialog({
        autoOpen: false,
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            alert('DialogClose fired');
        }
    });
            }
        }); //End ajax
于 2012-10-10T17:15:52.690 に答える