Solved

jQuery not closing a modal widow when requested from within modal

Posted on 2015-01-19
7
147 Views
Last Modified: 2015-01-21
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

0
Comment
Question by:Neil Thompson
7 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40559028
have you tried

$dialog.dialog('close')
0
 
LVL 3

Author Comment

by:Neil Thompson
ID: 40559164
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40559551
can you post a link to the page
0
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 34

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40560051
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
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 40560899
In addition to @kyle and @slick812 requests.
Can you post what browser(s)/Jquery/server Operating system version are you using?
0
 
LVL 3

Author Closing Comment

by:Neil Thompson
ID: 40561478
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
 
LVL 3

Author Comment

by:Neil Thompson
ID: 40561483
For info this was the setup

jQuery 1.11.2 & UI
Apache 2.2
PHP 5.4
Windows 7
IE 11.0.9600
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
jquery datable hidden section doesn't submit 2 15
Asp in script 6 36
Button function on table is in trouble 3 20
Need help with jQuery elements filtering 2 12
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

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