Question

All code below is a stand-alone working example (greatly simplified) of what I am trying to do. If anyone copy/pastes the below code blocks into 3 separate files, the code is fully functioning — just remember to reference/include test4.js and the jquery libraries in script tags at top of document.

SUMMARY: HTML form injected via Ajax not working with jQuery UI dialog widget.

Objective: When click on div #putit_here, jquery-ajax injects an html form (ultimately, it will retrieve appropriate form values from DB which is the reason for ajax). After injecting the HTML via ajax, a jQuery .dialog will appear allowing user to modify form data and resubmit form.

Problem: The jQueryUI .dialog does not appear. However, if comment-out the ajax block in the jQuery and rename the 2nd div in the HTML (change id=”editThisContact_2″ to id=”editThisContact_1″), all will work.

Therefore, problem appears to be the fact that the HTML is injected. What am I missing?

I am trying to create a jsfiddle example of this puzzle, here. Not having great luck with this, either. See here for a good example of simulating ajax call in jsfiddle.

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="[e-mail]" 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'] = '[e-mail]';
    $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>

Answer 1

You have to create the dialog inside the success call. You are currently creating the dialog when the html doesn’t exist.

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