Question

Overview: A basic jqueryui dialog is defined and later opened on demand with injected markup.

Problem: The first example works, but the second one (seemingly similar) doesn’t. It makes no difference in what order they are opened. Even if I open the non-working one first, it doesn’t work. I would appreciate a second pair of eyes to see if I’ve done something obviously obtuse.

Note: These are snippets from a large code field, so pls don’t check for matching parentheses. All code is working except for the 2nd jqueryui dialog surrounded by asterisks. Ajax returns the correct data, etc. The alert above the 2nd dialog even works, but that dialog never displays (with or without the alert in the code).

The 2nd dialog call is inside an ajax callback function. Do I need to use the .on() method somehow to bind the returned data to the #alert div? (I shouldn’t think so… the div at least — an empty dlg box — should display, no?) If so, what would that look like?

HTML:

<div id="alert" title="Alert"></div>

JAVASCRIPT:

$(function() {
    $( '#alert' ).dialog({
        autoOpen:false,
    });

$(document).on('click', '.mledit', function(event) {
    //company_id is actually the user_id
    var user_id = this.id.split( 'editcopro_' )[1];
    $.ajax({
        type: "POST",
        url: "ajax/ax_all_ajax_fns.php",
        data: 'request=edit_company_data&user_id='+user_id,
        success:function(data){
            $('#co_label').html(data);
            $('#co_label').dialog({
                autoOpen: true,
                height: 600,
                width: 800,
                modal: true,
                buttons: 
                    {
                    //***************************************
                    //******** THIS WORKS *******************
                        Test: function() {
                            $( '#alert' ).html( 'Hello there' );
                            $( '#alert' ).dialog( 'open' );
                            return false;
                    //***************************************
                        },
                //... etc ...
    $.ajax({
        type: "POST",
        url: "ajax/ax_all_ajax_fns.php",
        data: 'request=index_list_contacts_for_client&user_id=' + user_id,
        success: function(data) {
            $('#contact_table').html(data);
            var tbl = $('#injected_table_of_contacts');

                $(this).dialog({
                    autoOpen: false,
                    height: 400,
                    width: 600,
                    modal: true,
                    buttons: 
                        {
                            Okay: function() {
                                $.ajax({
                                    type: "POST",
                                    url: "ajax/ax_all_ajax_fns.php",
                                    data: 'request=update_edited_contact_data&contact_id='+contact_id+'&fn='+fn+'&ln='+ln+'&em='+em+'&cp='+cp,
                                    success: function(data) {
                                        alert(data);
                                    //**********************************
                                    //***** THIS DOES NOT: *************
                                        $( '#alert' ).html( data );
                                        $( '#alert' ).dialog( 'open' );
                                    //**********************************
                                        window.location = '' //THIS LINE AUTO-CLOSES THE DLG!;
                                    }
                                });
                                $( this ).dialog( "close" );
                            } //END ELSE
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                            window.location = '';
                        }
                    } /*,
                    //IMPORTANT DISCOVERY: Having this close section AUTO-CLOSES the prev dialog popup!
                    close: function() {
                        //alert('here i am');
                        window.location = 'index.php';
                    }*/
            })
        }
    });



});
/*********** >Snip< *************/

The full code is huge(r) so I’ve snipped the necessary bits for the question. Please don’t look too closely for matching parentheses, etc. The alert() works fine, it’s just the .dialog() call — and just the 2nd one — the earlier ones work fine (including the dialog call from inside a dialog).

Answer 1

SOLVED. See the two places in the code where I commented the solution. Who’d a thunk?