Populate jquery modal dialog with MVC partial view async, and show in center of screen
I'm trying to use the jquery modal dialog to show a partial view async when clicking on something. Pretty simple, and there are loads of questions on this, but I can't seem to get it work. I have had the modal displaying, but not in the center. And I've read it's because I'm populating the div after the dialog is displayed, therefore the position is relative to the empty div, not the populated one - and I've proved this to be the case by showing some static content, and it centers fine.
So now, I'm trying to get the partial view first, then show the dialog in the load() callback, but it's not working. I get an error on the 'dialog('open')' line, because the dialog method is undefined. Here's my code:
(P.S. I'm new to javascript/jQuery, so sorry if it's pretty obvious)
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
});
$(document).ready(function() {
$('#show-modal').click(function() {
$('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
$('#my-dialog').dialog('open');
});
return false;
});
});
</script>
<div id="my-dialog"></div>
<a href="#" id="show-modal">Click Me </a>
Help appreciated!
Edit I've changed the code to match Darin's and uploaded an image showing what the problem appears to be?
Answer
Your code looks fine and it worked when I tested it. Here's my full test case:
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult MyActionOnController()
{
// TODO: You could return a PartialView here of course
return Content("<div>Hello world</div>", "text/html");
}
}
View (~/Views/Home/Index.cshtml):
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$('#show-modal').click(function() {
$('#my-dialog').load("@Url.Action("MyActionOnController")", function() {
$(this).dialog('open');
});
return false;
});
});
</script>
</head>
<body>
<div id="my-dialog"></div>
<a href="#" id="show-modal">Click Me </a>
</body>
</html>