?
Solved

Closing a jQuery modal popup and tracking the close event

Posted on 2011-10-13
25
Medium Priority
?
604 Views
Last Modified: 2012-05-12
Hi all,

Following some help on here, I've got  the jQuery modal popup working fine and the form within it too.

No I'm having trouble doing 2 things and I'm having some trouble understanding the documentation.
http://jqueryui.com/demos/dialog/#event-close

I've put in a link to close the window (in addition to the 'X' which works fine).

<a href="#" id="close">Close Window</a>

Open in new window


And my jQuery looks like:

	$('#close').click(function() {
	
	$(this).dialog('close');
	// prevent the default action, e.g., following a link
	return false;
	
	});

Open in new window


But this doesn't seem to do anything..

Pleae could someone help me out with:

1. Getting this close link to work
2. How do I track the close event from the page that opened the dialog? (e.g. someone logs in via the popup, then instead of 'login' being displayed it changes to 'logged in as blah'
3. How can I automatically close the popup? (using the login example, once no errors etc have been found, close the window and track the close event to update the page (q2).

Huge thanks! Some code examples would be best as I find it hard to follow the jQuery UI site examples.
0
Comment
Question by:dolythgoe
  • 13
  • 11
25 Comments
 
LVL 1

Expert Comment

by:Grey2k
ID: 36965272
You need run .dialog('close')  on dialog selector  but  not  link - as you  write in question

so code will like  $(#dialog_selector_id).dialog('close');
0
 

Author Comment

by:dolythgoe
ID: 36965318
Thanks for this, sorry for the noob questions but what do you mean by dialog selector? (new to all this!)
0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965333
Can you show the code where you create the selector?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dolythgoe
ID: 36965393
Sure:

		var $signup = $('#signup')
			.load('signup.php')
			.dialog({
				autoOpen: false,
				title: 'Quick Signup',
				draggable: false,
				modal: true,
				resizable: false,
				width: 420,
				height: 420,
				position: ['center',100]
				
			});

Open in new window


And here's the caller:

<a href="#" id="signupopen">QUICK SIGNUP</a>

Open in new window


What I did then is put the processing code within the <script></script> tags on the signup.php page since that code didn't work on the calling page - I guess that was to do with the html not being visible to the calling page for the code to act on it? It has somewhat confused me now how I work between the calling page and the .load page.


0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965405
Based on that code, this is what you'd need to close the dialog:
$('#close').click(function() {
	$('#signup').dialog('close');
	// prevent the default action, e.g., following a link
	return false;
});

Open in new window

0
 

Author Comment

by:dolythgoe
ID: 36965406
FYI I tried:

	$('#close').click(function() {
	
	$signup.dialog('close');
	// prevent the default action, e.g., following a link
	return false;
	
	});

Open in new window


On both the signup.php and the calling page but no luck :(
0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965410
Have you been able to successfully get the dialog to open? The code you posted where you construct your dialog looks a little strange to me.
0
 

Author Comment

by:dolythgoe
ID: 36965422
Thanks for your code:

I've just tried:

$('#close').click(function() {
	$('#signup').dialog('close');
	// prevent the default action, e.g., following a link
	return false;
});

Open in new window


And it didn't work unfortunately - I tested it in the calling page and signup.php page..
0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965428
Do you have a link to a site, where I could see the problem live?
0
 

Author Comment

by:dolythgoe
ID: 36965430
The dialog opens fine - I did miss out one little element which is the set of <div>'s

<div id="signup"></div>

Open in new window


Just after <body>

I guess that's just a placeholder to load the code in for the dialog box.
0
 

Author Comment

by:dolythgoe
ID: 36965456
Not live unfortunately, just a local testbed.

So to recap how this is all working:

- User clciks signup link
- jQuery loads signup.php into placeholder <div id="signup"></div> tags just below the <body> tag on the calling page and then displays it in the dialog
- signup.php has jQuery for error checking form fields
- The user fills in the form and using a bit of AJAX gets a response which replaces the form with a success message (html replacement between <div id="signup"></div>)
- This success message contains the 'Close Window' link <a href="#" id="close">Close Window</a>

0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965480
Okay... that explains the problem.

The link is being created dynamically, after the code referencing the close link has already been created.

In your ajax success function, you'll need to insert the close function.

If you show me your ajax code, I can show you where to put it.
0
 

Author Comment

by:dolythgoe
ID: 36965481
Oh sorry - forgot to include this code in the above:

		$('#signupopen').click(function() {
			$signup.dialog('open');
			// prevent the default action, e.g., following a link
			return false;
		});

Open in new window

0
 

Author Comment

by:dolythgoe
ID: 36965497
I think I understand what you mean now.

Here's the code:

	 $('form[name=signupform]').submit(function (){
			$.post( $(this).attr("action"), $('form[name=signupform]').serialize(), function(data){
			
			if(data==0)
			{
				$("#submit-msg").fadeTo(200,0.1,function() 
				{
				//Display error msg next to submit button
				$(this).html('Please check the above errors.').removeClass().addClass('submit-msg-error').fadeTo(900,1);
				});
			}
			else
			{
			        //Replace form html with the success html
				$('div #signup-area').html(data);
			}
			
			});
			// prevent default action of form submission
			return false;
			
	 });

Open in new window


0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965506
	 $('form[name=signupform]').submit(function (){
			$.post( $(this).attr("action"), $('form[name=signupform]').serialize(), function(data){
			
			if(data==0)
			{
				$("#submit-msg").fadeTo(200,0.1,function() 
				{
				//Display error msg next to submit button
				$(this).html('Please check the above errors.').removeClass().addClass('submit-msg-error').fadeTo(900,1);
				});
			}
			else
			{
			        //Replace form html with the success html
				$('div #signup-area').html(data);
                                $('#close').click(function() {
	                                $('#signup').dialog('close');
	                                // prevent the default action, e.g., following a link
	                                return false;
                                 });
			}
			
			});
			// prevent default action of form submission
			return false;
			
	 });

Open in new window

0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965525
Did that work for you?
0
 

Author Comment

by:dolythgoe
ID: 36965534
Hmmm...didn't seem to work either :(
0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965551
Let's see the code for the page that's handling the form data. The one where you get the 'data' back from.
0
 

Author Comment

by:dolythgoe
ID: 36965611
That page contains a few things that need blanking out but the html response is 0 for error which is being sent fine and this for success:

echo '<img src="images/signupsuccess.gif" alt="signup success" /></center><br /><span class="signupsuccess">Thank you. You have successfully signed up and your account has been created.</span><br /><br />';
echo 'Please check your inbox for '.$email.' and click the link to validate your account.<br /><br /><a href="#" id="close">Close Window</a></center>';

Open in new window


Since it's local and there's a mail() function - there's a warning being spat out too with the HTML - not sure if that affects things:

 
<br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: mail() [<a href='function.mail'>function.mail</a>]: Failed to connect to mailserver at &quot;localhost&quot; port 25, verify your &quot;SMTP&quot; and &quot;smtp_port&quot; setting in php.ini or use ini_set() in *********signup_process.php on line <i>110</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0007</td><td bgcolor='#eeeeec' align='right'>706840</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='********signup_process.php' bgcolor='#eeeeec'>..\signup_process.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0154</td><td bgcolor='#eeeeec' align='right'>742944</td><td bgcolor='#eeeeec'><a href='http://www.php.net/mail' target='_new'>mail</a>
(  )</td><td title='********signup_process.php' bgcolor='#eeeeec'>..\signup_process.php<b>:</b>110</td></tr>
</table></font>
<center><img src="images/signupsuccess.gif" alt="signup success" /></center><br /><span class="signupsuccess">Thank you. You have successfully signed up and your account has been created.</span><br /><br />Please check your inbox for dgdgf@adad.com and click the link to validate your account.<br /><br /><a href="#" id="close">Close Window</a>

Open in new window


0
 

Author Comment

by:dolythgoe
ID: 36965615
Oh and ignore the </center> that's been removed.
0
 
LVL 4

Accepted Solution

by:
CKY092 earned 2000 total points
ID: 36965660
Let's try this:

<script>
$('#close').click(function() {
    $('#signup').dialog('close');
    // prevent the default action, e.g., following a link
    return false;
});
</script>
 
echo '<img src="images/signupsuccess.gif" alt="signup success" /></center><br /><span class="signupsuccess">Thank you. You have successfully signed up and your account has been created.</span><br /><br />';
echo 'Please check your inbox for '.$email.' and click the link to validate your account.<br /><br /><a href="#" id="close">Close Window</a></center>';

Open in new window


0
 

Author Comment

by:dolythgoe
ID: 36965704
YES! Worked :)

Fussy coding! Teaching me more about the intricacies of the document flow!

Thanks for all your help here - much appreciated!

If you would be so kind, could you help give me some pointers on:

2. How do I track the close event from the page that opened the dialog? (e.g. someone logs in via the popup, then instead of 'login' being displayed it changes to 'logged in as blah'
3. How can I automatically close the popup? (using the login example, once no errors etc have been found, close the window and track the close event to update the page (q2).

I think once I have these points understood I'll be a free coder :D
0
 
LVL 4

Assisted Solution

by:CKY092
CKY092 earned 2000 total points
ID: 36965718

2. How do I track the close event from the page that opened the dialog? (e.g. someone logs in via the popup, then instead of 'login' being displayed it changes to 'logged in as blah'
This can be done when you construct your dialog:
var $signup = $('#signup')
	.load('signup.php')
	.dialog({
		autoOpen: false,
		title: 'Quick Signup',
		draggable: false,
		modal: true,
		resizable: false,
		width: 420,
		height: 420,
		position: ['center',100],
		close: function(event,ui){
			// DO SOMETHING WHEN DIALOG CLOSES
		}
	});

Open in new window


3. How can I automatically close the popup? (using the login example, once no errors etc have been found, close the window and track the close event to update the page (q2).
I would think the following may work, however I'm not 100% sure since that direction didn't solve our problem earlier.
 $('form[name=signupform]').submit(function (){
	$.post( $(this).attr("action"), $('form[name=signupform]').serialize(), function(data){
		if(data==0){
			$("#submit-msg").fadeTo(200,0.1,function(){
				//Display error msg next to submit button
				$(this).html('Please check the above errors.').removeClass().addClass('submit-msg-error').fadeTo(900,1);
			});
		}else{
			// CLOSE DIALOG IF SUCCESSFUL
			$('#signup').dialog('close');
		}
	});
	// prevent default action of form submission
	return false;
});

Open in new window


Glad I was able to help!
0
 
LVL 4

Expert Comment

by:CKY092
ID: 36965908
Did that answer your questions?
0
 

Author Comment

by:dolythgoe
ID: 36966033
I think so - I'll have a play and post further questions if needs be - thanks again for your help
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

840 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