CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjquery-uiasp.net-mvc-5
Metaphor
Metaphor

Reputation: 6415

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

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

Answers (1)

haim770
haim770

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

Related Questions