[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to close jquery dialog after ajax call is completed?

Posted on 2014-08-25
14
Medium Priority
?
2,356 Views
Last Modified: 2014-08-28
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

0
Comment
Question by:evibesmusic
  • 9
  • 5
14 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40284978
//CLOSE JQUERY DIALOG
//THIS DOES NOT WORK
// $("#dialog").dialog('close');

change to

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

Expert Comment

by:Rob
ID: 40284982
I would also close the dialog before emptying it
$("#dialog").dialog('close');
$("#dialog").empty(); // remove the content
0
 

Author Comment

by:evibesmusic
ID: 40284985
@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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:evibesmusic
ID: 40284988
@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
 
LVL 43

Expert Comment

by:Rob
ID: 40285009
it's hard to know... do you have a link to your site?

Do you have any messages in the console?
0
 

Author Comment

by:evibesmusic
ID: 40285012
@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
 
LVL 43

Expert Comment

by:Rob
ID: 40285019
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
 
LVL 43

Expert Comment

by:Rob
ID: 40285029
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
 
LVL 43

Expert Comment

by:Rob
ID: 40285036
You've also got an extra comma at the //END CLOSE
0
 

Author Comment

by:evibesmusic
ID: 40285042
@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
 
LVL 43

Expert Comment

by:Rob
ID: 40285049
Thanks that will greatly assist in getting a demo running.
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40285357
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
 
LVL 43

Expert Comment

by:Rob
ID: 40286975
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
 

Author Closing Comment

by:evibesmusic
ID: 40291074
Thanks tagit! Works like a charm now.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question