How to close jquery dialog after ajax call is completed?

//CLOSE JQUERY DIALOG
//THIS DOES NOT WORK
// $("#dialog").dialog('close');

change to

setTimeout(function() { $("#dialog").dialog('close'); }, 500);

I would also close the dialog before emptying it
$("#dialog").dialog('close');
$("#dialog").empty(); // remove the content

@tagit:

I've updated to your code but, the function doesn't seem to be firing.

I think this is due to the fact that the page running this function is being called via a jquery UI AJAX tab.

Do you think that this call has to be passed before the jQuery UI tabs load?

@tagit:

When I run the script I get the following error:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

it's hard to know... do you have a link to your site?

Do you have any messages in the console?

@tagit:

Sorry but, my site is behind a company firewall.

The message I posted above was from the FireBug console log.

What is odd is that all other parts of the script execute perfectly except the close dialog portion?

all good... i'll knock up a demo and try to replicate the issue.

I'm sure it's a scope and initialisation issue but only a guess at this stage

it could be because you've only posted a code snippet but your "close" is missing a semicolon:

close: function() {
                        //RESET DROP DOWNS TO ORIGINAL STATE
                        //FADE BACK IN WITH ITEM CHECKED
                        $("#update_coding"+EmpId).empty(),// remove the content <=== why do you have a comma at the end? should be a semicolon.
                              $("#update_coding"+EmpId).fadeIn("slow",
                                                                               function(){
                              $('<option value="1">At Work</option><option value="0">Not at Work</option>').appendTo("#update_coding"+EmpId);
                        }
                                                                              );//END
                        $("#dialog").empty(); // remove the content
                  },//END CLOSE

You've also got an extra comma at the //END CLOSE

@tagit:

Thank you for looking at my sloppy code. I've added the semicolon and have removed the extra comma. And am still receiving the same console message.

Here is my entire piece of code:

$(document).ready(function(){
  $(".update_coding").change(function(e) {
    e.preventDefault();
    if($(this).val() == "0"){
      var mytitle = "Update Employee Status";
      var EmpId = $(this).attr("name");
      var url = "./scripts/employee_actions.php?action=update_coding&EmpId="+EmpId+"&stoppage_date=<?php echo urlencode($stoppage_date); ?>";
      $("#dialog").load(url,null,function() {
        $("#dialog").dialog({
          title: mytitle,
          modal: true,
          width: 450,
          buttons: {
            "Update Actual Status": function() {
                $("#update_coding"+EmpId).load("./scripts/ajax_actions.php?ajax_post=update_coding", 
                  { 
                      EmpId: EmpId,
                      EmpCoding: $("#DialogEmpCoding").val()
                  },
                  function() {
                      $('#coding_status'+EmpId).fadeIn("fast");
                      //CLOSE JQUERY DIALOG
                      //THIS DOES NOT WORK
                      // $("#dialog").dialog('close');
                      setTimeout(function() { $("#dialog").dialog('close'); }, 500);                                     
                  }
                );
            }//END FUNCTION
          },//END BUTTONS
          close: function() {
            //RESET DROP DOWNS TO ORIGINAL STATE
            //FADE BACK IN WITH ITEM CHECKED
            $("#update_coding"+EmpId).empty();// remove the content
            $("#update_coding"+EmpId).fadeIn("slow", 
                function(){
                    $('<option value="1">At Work</option><option value="0">Not at Work</option>').appendTo("#update_coding"+EmpId);
                }
            );//END
          $("#dialog").dialog('close');
          $("#dialog").empty(); // remove the content
          }//END CLOSE
        });//END DIALOG
      });//END DIALOG     FUNCTION        
    }//END IF
    else{
      var EmpId = $(this).attr("name");
      var empcoding = 1;
      $('#coding_status'+EmpId).hide();
      $("#update_coding"+EmpId).load("./scripts/ajax_actions.php?ajax_post=update_coding", 
        { 
            EmpId: $(this).attr("name"),
            EmpCoding: empcoding
        },
        function() {
            //SHOW THEN HID DISK ICON WHEN UPDATING COMPLETES
            $('#coding_saved'+EmpId).fadeIn("fast");
            //HIDE SAVING IMAGE WHEN QUERY COMPLETED SUCCESSFULLY
            $('#coding_saved'+EmpId).fadeOut("slow");            
        }
      );    
    }//END ELSE
    
  });//END .update_status FUNCTION

});

Select allOpen in new window

Thanks that will greatly assist in getting a demo running.

There was a lot of chaining ajax calls and init of objects in the same place and somewhere the scope got out of hand, so to speak.  by moving the init of the dialog out it not only simplifies but removes the confusion.

Thanks tagit! Works like a charm now.