jQuery not closing a modal widow when requested from within modal

Hi

I''m using jQuery to open a modal dialog for my help pages.

They are called via <a href> links on the page and open up the appropriate URL

<span class="helper">
  <a href="/helpers/shop/selling_or_searching.htm">help on selling</a>
</span>

Open in new window

		$('.helper a').each(function() {
			var $link = $(this);
			var $dialog = $('<div></div>')
				.load($link.attr('href'))
				.dialog({
					autoOpen: false,
					title: $link.attr('title'),
					width: 600, 
					height:600,
					resizable: false,
					closeText: 'Close',
					beforeClose: function(event, ui) {
						$('#dialog-overlay').hide();
					} 
				});

			$link.click(function() {
				$('#dialog-overlay').show();
				$dialog.dialog('open');
				return false;
			});
		});

Open in new window

All works fine if on basic pages when the default "CLOSE" button is clicked but one of my helper pages is a new category selector which has some actions to be performed when the user clicks on a new category.

All the rest works ok, it amends the link titles, the category breadcrumb, clears the modal <div> overlay but just doesn't close?

Here is the cut down version of the change category page:
<li><a href='#' id='199' title='Video Games and Consoles > Other ' rel='<li><span>Video Games and Consoles</span></li><li><span>Other </span></li>' onclick='returnAndClose(this);'>Video Games and Consoles > Other </a></li>

<li><a href='#' id='200' title='Wholesale and Joblots ' rel='<li><span>Wholesale and Joblots </span></li>' onclick='returnAndClose(this);'>Wholesale and Joblots </a></li>

<script>
function returnAndClose(e){
	$("#categoryID").val(e.id);
	$("#crumbs ul").replaceWith("<ul>"+e.rel+"</ul>");
	$('span.categoryRequired').removeClass("shopAddRequiredField");
	$('#amendCategoryLink').val('Amend Category');
	$("#dialog-overlay").hide();
	// --- NEED TO THEN CLOSE DIALOG, NOTHING I TRY WORKS? 
}
</script>

Open in new window

LVL 3
Neil ThompsonSenior Systems DeveloperAsked:
Who is Participating?
 
Slick812Connect With a Mentor Commented:
greetings NeilT, , The scope of the variable $dialog you create -
    var $dialog = $('<div></div>')
is Local to that function, if you try and use it outside that function ( like in the function returnAndClose ), it is Undefined. You can place the $dialog variable declaration Outside of that function as a "Global", if you are unfamiliar with variable scope, and unclear what to do , THEN, another alternative is to give your dialog <div> an ID and close it by ID. You might try and declare your dialog with -
    var $dialog = $('<div id="dia1"></div>')

and in your returnAndClose function use -
     $("#dia1").hide();
     $("#dialog-overlay").hide();
0
 
Kyle HamiltonData ScientistCommented:
have you tried

$dialog.dialog('close')
0
 
Neil ThompsonSenior Systems DeveloperAuthor Commented:
yes, unfortunately it still just sits on the screen (although not in Modal Mode as I can click stuff around it, just not under it, nor get rid of it)
0
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.

 
Kyle HamiltonData ScientistCommented:
can you post a link to the page
0
 
Miguel OzSoftware EngineerCommented:
In addition to @kyle and @slick812 requests.
Can you post what browser(s)/Jquery/server Operating system version are you using?
0
 
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Many thanks for your comments, this one solved the issue and thankfully also explained why I was encountering the issue. It appeared to be as Slick812 suggested it was undefined as it the code (and closing JS)  was called by AJAX into that modal window.

Thanks all who participated
0
 
Neil ThompsonSenior Systems DeveloperAuthor Commented:
For info this was the setup

jQuery 1.11.2 & UI
Apache 2.2
PHP 5.4
Windows 7
IE 11.0.9600
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.

All Courses

From novice to tech pro — start learning today.