• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 613
  • Last Modified:

Closing a jQuery modal popup and tracking the close event

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
dolythgoe
Asked:
dolythgoe
  • 13
  • 11
2 Solutions
 
Grey2kCommented:
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
 
dolythgoeAuthor Commented:
Thanks for this, sorry for the noob questions but what do you mean by dialog selector? (new to all this!)
0
 
CKY092Commented:
Can you show the code where you create the selector?
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
dolythgoeAuthor Commented:
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
 
CKY092Commented:
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
 
dolythgoeAuthor Commented:
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
 
CKY092Commented:
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
 
dolythgoeAuthor Commented:
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
 
CKY092Commented:
Do you have a link to a site, where I could see the problem live?
0
 
dolythgoeAuthor Commented:
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
 
dolythgoeAuthor Commented:
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
 
CKY092Commented:
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
 
dolythgoeAuthor Commented:
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
 
dolythgoeAuthor Commented:
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
 
CKY092Commented:
	 $('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
 
CKY092Commented:
Did that work for you?
0
 
dolythgoeAuthor Commented:
Hmmm...didn't seem to work either :(
0
 
CKY092Commented:
Let's see the code for the page that's handling the form data. The one where you get the 'data' back from.
0
 
dolythgoeAuthor Commented:
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
 
dolythgoeAuthor Commented:
Oh and ignore the </center> that's been removed.
0
 
CKY092Commented:
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
 
dolythgoeAuthor Commented:
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
 
CKY092Commented:

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
 
CKY092Commented:
Did that answer your questions?
0
 
dolythgoeAuthor Commented:
I think so - I'll have a play and post further questions if needs be - thanks again for your help
0
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 13
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now