CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvcjquery-ui
Lee
Lee

Reputation: 3969

JQuery UI modal dialog: cannot call methods prior to initialization

I have the following:

$(function(){
    $('#dialog').dialog({ modal: true, buttons: { "Ok": function () { $('#dialog').dialog("close"); } } });
}

I've tried numerous different forms of syntax with no luck. If I use $(this).dialog("close"); I get the JS error complaining of calling methods prior to init, however when I use $('#dialog').dialog("close") it almost works. The dialog box pops up in the top left corner, the button doesn't render properly - just a text-less circle that does close when clicked - and only when I give the popup focus does the modal overlay appear.

In my ASP.NET MVC view:

@{
    if (Model.response)
    {
        <div id="dialog" title="@Model.responseDialog.title"><p>@Model.responseDialog.content</p></div>
    }
}

Upvotes: 1

Views: 579

Answers (1)

hutchonoid
hutchonoid

Reputation: 33326

Ok, your code works as expected for me.

scren grab

Here are a couple of things to try to resolve the issue.

Check your css and javascript files

You need the relevant js and css files, and not duplicate or different versions of jQuery.

You can test this by ensuring all your existing ones are removed and replacing them with the cdn versions:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

The calling dialog function is after the references

Make sure that your dialog function is after the above references.

Upvotes: 1

Related Questions