How do i get a dialog to appear after first click from a Selectable using JQuery?

Question

I am having trouble getting my dialog to appear after the initial click. Here is what happens when a Selectable is clicked:

• First click- Nothing
• Second click- First clicks content. Closed. Nothing
• Third Click- First clicks content. Closed. Another dialog behind with second clicks content. Closed. Nothing.
• Cycle repeats with previous two selections.

Here is the function:

  $(function() {

    $('#selectable').selectable({

        selecting: function (event, ui) {
            //Sends selectable title to recieve information to fill dialog page.  
            $.post('ajax_receiver.php', 'val=' + ui.selecting.id, function (response) {
                //Fills div #contentWindow with jQuery's <div id='dialog'..>
                $("#contentWindow").html(response); 
            });  
           $("#content").html(ui.selecting.id);// get ra

            $( "#dialog" ).dialog({ modal: true });

            $( "#dialog" ).dialog( "open"); 
            $(event.target).children('.ui-selecting').not(':first').removeClass('ui-selecting');  

        }

    });

    //dialog box that holds informaiton
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "clip",
            duration: 500
        },
        hide: {
            effect: "clip",
            duration: 500
        }
    });

});

Answer 1

Solved. Needed to wait until information was received from php before applying to web page.