jQueryUI Dialog with ajax-injected html selector

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'] = '[email protected]';
    $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.

Check chrome console for any javascript error.

itachi
– itachi

2012-10-10 23:41:50 +00:00
Commented Oct 10, 2012 at 23:41 — itachi
– itachi, Commented Oct 10, 2012 at 23:41

davehale23 · Accepted Answer · 2012-10-10 23:45:44Z

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
    }

answered Oct 10, 2012 at 23:45

davehale23

4,3722 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cssyphus Over a year ago

I think the element already exists, since the ajax call happens first - on document.ready. But I'll try moving things around and see what happens.

user1365013 Over a year ago

Its a common mistake. The AJAX is asynchronous. Meaning, script makes an AJAX call and then executes next instruction without waiting for response from ajax call (as it doesnt know if there will be any response). So, if the next instruction depends on completion of AJAX, use callback as explained by davehale23. There can be a chain of callbacks too.

cssyphus Over a year ago

My bad. At first I thought your answer didn't fully work, but then I found that my live test and the OP varied in one line: how the .dialog("open") was being called.

Collectives™ on Stack Overflow

jQueryUI Dialog with ajax-injected html selector

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related