Solved

jquery pause with jquery ui dialog window

Posted on 2010-08-14
3
804 Views
Last Modified: 2013-11-19
Hello,

I'm using a jquery ui dialog window that performs an ajax update and then closes the dialog window.  I would like to display a success message in the dialog window and then automatically close it.  So the flow would be, fill out the form fields, click the add button and then display a confirmation message (maybe just populate a div with message from my php script) and then automatically close the window.  Right now I just close the window.  Any suggestions?


$("#dialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 300,
			resizable: false,
			modal: true,
			buttons: {
				'Add': function() {
					var bValid = true;
					allFields.removeClass('ui-state-error');
					bValid = bValid && checkLength(firstname,"First Name",1,30);					
					bValid = bValid && checkLength(lastname,"Last Name",1,50);
					bValid = bValid && checkRegexp(firstname,/^([0-9a-zA-Z])+$/,"First Name may consist of a-z 0-9");
					bValid = bValid && checkRegexp(lastname,/^([0-9a-zA-Z])+$/,"Last Name may consist of a-z 0-9");
					bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Invalid Email (eg. musicopus1@gmail.com)");
					if (bValid) {
						$('#users tbody').append('<tr>' +
							'<td>' + firstname.val() + '</td>' + 
							'<td>' + email.val() + '</td>' + 
							'<td>' + lastname.val() + '</td>' +
							'</tr>'); 
						
						$.post("joinmailing.php", { email: email.val(), fname: firstname.val(), lname: lastname.val() } );
						$(this).dialog('close');	
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});

Open in new window


0
Comment
Question by:cgray1223
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33438188
After init :

    $(document).ready(function() {
        $("#div2update").dialog({autoOpen:false});

You have :


$.post("joinmailing.php", { email: email.val(), fname: firstname.val(), lname: lastname.val() }, function(data) {
                $("#div2update").html(data);
                $("#div2update").dialog("open");
                setTimeout('$("#div2update").dialog("close")',3000); // wait 3 seconds before close the dialog
            });

Open in new window

0
 

Author Closing Comment

by:cgray1223
ID: 33438425
Thanks for the answer, worked great.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33438434
You're welcome! Thanks for the points!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

809 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