[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

jQuery not closing a modal widow when requested from within modal

Posted on 2015-01-19
7
Medium Priority
?
172 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…
Suggested Courses

650 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