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 self-contained– just remember to reference/include test5.js and the jquery libraries in script tags at top of document.

SUMMARY: HTML div injected via Ajax not opening in the jQuery UI dialog widget.

Objective: On document load, jquery-ajax injects an html form (ultimately, it will retrieve appropriate form values from DB which is the reason for ajax). A div with id=”clickme” is injected with the html. Clicking the div should open the dialog.

Problem: The jQueryUI .dialog does not appear. I put an alert box inside the click event, and that fires. But the dialog remains elusive.

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

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'] = '[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;

---

EDIT:

Updated question to move dialog definition inside AJAX success callback. Did not completely solve problem, though. The dialog now appears if I change the autoOpen flag to true, but that is not how the script must work. The dialog still does not open upon clicking the (injected) #clickme div.

EDIT 2:

My bad. At first I thought it didn’t work, but then found that my live test and posted SO question varied in one line: how the .dialog(“open”) was being called. In live code, it was still using the var: etc1.dialog(“open”) — but in post above the selector was fully referenced: $(‘#editThisContact_1’).dialog(“open”). The posted syntax was correct. Thanks gents, and also itachi who got me to check chrome console.

Answer 1

You are trying to initialize a dialog on an element before the element exists. You need to initialize the dialog on “#editThisContact_1” after your ajax call comes back successfully.

Like this:

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