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
Solved

Close jqModal window via code

Posted on 2009-05-08
6
1,244 Views
Last Modified: 2013-11-11
I'm using jqmodal (http://dev.iceburg.net/jquery/jqModal), a plugin for JQuery to create modal windows allowing a user of our CRM system to add notes to our database.

When the user clicks an icon, a modal window opens with the content of that window retrieved via Ajax from another URL.

The content of that window is a form that uses the JQuery ajax feature itself to post data to another URL to store in a database, when the user hits a button.

I want to be able to close the modal window, once the ajax executed within the modal window reports the post has been completed.

I've stripped the code down to the salient parts and is as follows.  Everything works ok on my script, I just need to understand how to close that window, which I'm guessing needs to be where I've placed ###code to close window### in the code.

Any help from users of this great JQuery plugin, will be appreciated.




Default.asp - the main script with the link that triggers the modal window on click
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jqModal.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#addnote').jqm({ajax: '@rel', trigger: 'a.addnotetrigger'});
});	
</script>	
</head>
<body class="default">
<div class="jqmWindow" id="addnote">
Please wait... <img src="images/loading.gif" alt="loading" />
</div>	
<a class="addnotetrigger" rel="ajax_addnote.asp?id=123">Add Note</a>
</body>
</html>
 
ajax_addnote.asp - the script that is the content of the modal window pulled via ajax
 
<html>
<head>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#submitnotebutton").bind("click", function(e){
    	$.post("ajax_createnote.asp", {details: $('#notedetails').val(), associateid: $('#associateid').val()},
		function(data){
			###code to close window###
 
 
		}
	);
});
});	  	
</script>
</head>
<body>
<div class="container">
	<div class="headeradmin">Note</div>
	<table class="standardtable">
	<tr>
	<td>Associate</td>
	<td>
	<input id="associateid" name="associateid">"
	</td>
	</tr>
	<tr>
	<td>Note</td>
	<td>
	<textarea id="notedetails" cols="60" rows="10"></textarea>
	</td>
	</tr>
	<tr>
	<td></td>
	<td>
	<input id="submitnotebutton" type="button" value="Add"
	</td>
	</tr>	
	</table>
</div>
</body>
</html>
 
ajax_createnote.asp
 
This script adds the data from the above form into the database

Open in new window

0
Comment
Question by:neburton
  • 3
  • 3
6 Comments
 
LVL 10

Expert Comment

by:bugada
ID: 24335881
Try this
$.jqmHide()

Open in new window

0
 
LVL 1

Author Comment

by:neburton
ID: 24335901
No - object doesn't support this property or method.
0
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
ID: 24335949
If "addNote" is the id of your modal dialog try this, otherwise use the proper id.
$('#addnote').jqmHide()

Open in new window

0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 
LVL 1

Author Comment

by:neburton
ID: 24335950
Fixed it.   I didn't need to reload Jquery in ajax_addnote.asp.  When I removed that from the code and called $('#addnote').jqmHide();   it closed the modal dialog as required.
0
 
LVL 10

Expert Comment

by:bugada
ID: 24335967
glad that helped you
0
 
LVL 1

Author Comment

by:neburton
ID: 24335977
thanks again!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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
Index on a Table 6 25
How to resize a div in html 3 37
Character counter breaks after adding EmojiOne Area 4 22
Button on Table, name table1 not working 4 22
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

860 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