Reputation: 6415
I am using jQuery UI to render an ASP.NET MVC 5 partial view into an empty div:
$(document).ready(function () {
$(".SiteName").on("click", function (event) {
event.preventDefault();
var siteName = $(this).data("sitename");
//alert(siteName);
$.ajax({
url: "/EtlLog/ListSiteJobs?SiteDescription=" + encodeURIComponent(siteName),
type: "GET",
})
.done(function (result) {
$("#ListSite").html(result).dialog("open");
});
});
})
Inspecting the ListSite div after the click, I see that it is filled with the expected results but I get a jQuery UI error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
I've tried various combinations of .ready() and even nesting the div being rendered within a div used for .dialog(). Must have looked at every question about this error, but still not finding a solution.
Upvotes: 0
Views: 2571
Reputation: 49123
You first need to 'setup' the dialog, then open
it. try:
$(document).ready(function () {
$(".SiteName").on("click", function (event) {
event.preventDefault();
var siteName = $(this).data("sitename");
//alert(siteName);
$("#ListSite")
.load("/EtlLog/ListSiteJobs?SiteDescription=" + encodeURIComponent(siteName))
.dialog({autoOpen:true})
});
})
P.S: I took the liberty to shorten your code using load()
.
Upvotes: 1