Solved

jQuery not closing a modal widow when requested from within modal

Posted on 2015-01-19
7
144 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:NeilT
7 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40559028
have you tried

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

Author Comment

by:NeilT
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 33

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:NeilT
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:NeilT
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now