?
Solved

jQuery not closing a modal widow when requested from within modal

Posted on 2015-01-19
7
Medium Priority
?
164 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 34

Accepted Solution

by:
Slick812 earned 2000 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 36

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

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 …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

770 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