How to close jquery dialog after ajax call is completed?

Experts,

I am looking for a way to close a jQuery dialog once an AJAX call is completed. Is there a way to do so?

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");
                                                //EMPTY CONTENT OF DIALOG
                                                $("#dialog").empty(); // remove the content
						//CLOSE JQUERY DIALOG
						//THIS DOES NOT WORK
						// $("#dialog").dialog('close');									
					}
				);
			}//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").empty(); // remove the content
		},//END CLOSE
	});//END DIALOG
});//END DIALOG	 FUNCTION		

Open in new window

evibesmusicAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

change to

setTimeout(function() { $("#dialog").dialog('close'); }, 500);
0
RobOwner (Aidellio)Commented:
I would also close the dialog before emptying it
$("#dialog").dialog('close');
$("#dialog").empty(); // remove the content
0
evibesmusicAuthor Commented:
@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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

evibesmusicAuthor Commented:
@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'
0
RobOwner (Aidellio)Commented:
it's hard to know... do you have a link to your site?

Do you have any messages in the console?
0
evibesmusicAuthor Commented:
@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?
0
RobOwner (Aidellio)Commented:
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
0
RobOwner (Aidellio)Commented:
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
0
RobOwner (Aidellio)Commented:
You've also got an extra comma at the //END CLOSE
0
evibesmusicAuthor Commented:
@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

});

Open in new window

0
RobOwner (Aidellio)Commented:
Thanks that will greatly assist in getting a demo running.
0
RobOwner (Aidellio)Commented:
I've moved the initialisation of the dialog out of the onchange event.  I've tested this and it works on my local server

$(document).ready(function(){
	var EmpId='1';

	$("#dialog").dialog({
		title: 'mytitle',
		autoOpen: false,
		modal: true,
		width: 450,
		buttons: [{
			text: "Update Actual Status",
			click: function() {
				$("#update_coding"+EmpId).load("sample.html", { 
								EmpId: EmpId,
								EmpCoding: $("#DialogEmpCoding").val()
							}, function() {
					$('#coding_status'+EmpId).fadeIn("fast");
					//CLOSE JQUERY DIALOG
					//THIS DOES NOT WORK
					console.log('finished loading and closing dialog');
					$("#dialog").dialog('close');
				});
			}//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
			$(this).dialog('close');
			$("#dialog").empty(); // remove the content
		}//END CLOSE
	});//END DIALOG

	$(".update_coding").change(function(e) {
		e.preventDefault();
		if($(this).val() === "0"){
			var mytitle = "Update Employee Status";
			EmpId = $(this).attr("name");
			var url = "sample.html";
			$("#dialog").load(url,null,function() {
				$('#dialog').dialog('open');
			});//END DIALOG	 FUNCTION		
		}//END IF
		else{
			EmpId = $(this).attr("name");
			var empcoding = 1;
			$('#coding_status'+EmpId).hide();
			$("#update_coding"+EmpId).load(
				"sample.html", 
				{ 
            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

});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
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.
0
evibesmusicAuthor Commented:
Thanks tagit! Works like a charm now.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.