I want to open a partial view as a JQuery dialog that when I click a link to open another Jquery dialog over the one that is already open.
Can I do that? If it is possible, how can I achieve that?
Edit 1:
First view
@model AuctionWebProject.Areas.Admin.Models.CategoryModel
@{
ViewBag.Title = "Edit Category";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<title>EditCategory</title>
</head>
<body>
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function ShowXsdEditor() {
$("#xsdEditor").dialog("open");
}
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>CategoryModel</legend>
@Html.HiddenFor(model => model.Id)
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Date)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Date)
@Html.ValidationMessageFor(model => model.Date)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Xsd)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.Xsd, new { disabled = "disabled" })
@Html.ValidationMessageFor(model => model.Xsd)
<a href="javascript:void(0)" onclick="ShowXsdEditor();">Xsd Editor</a>
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@Html.Partial("XsdEditor", Model)
</body>
</html>
Second view
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<div id="xsdEditor" style="display: none;">
<a href="javascript:void(0)" onclick="ShowDialog();">Add new element</a>
<div id="elementList">
</div>
</div>
@Html.Partial("AddXSElement", new AuctionWebProject.Areas.Admin.Models.XSElementModel())
<script type="text/javascript">
$(document).ready(function () {
$("#xsdEditor").dialog({
autoOpen: false, width: 400, height: 330, modal: true, title:'XSD Editor'
});
});
function ShowDialog() {
debugger;
$("#addXSElement").dialog("open");
}
</script>
I use JQuery v 1.6.2 and Jquery Ui 1.8.12
Found the problem, it seems that the JQuery function that was in the document ready didn’t work as it should.
After reordering the dialogs java script, the problem disappeared.