JavaScript runtime error: Object doesn't support property or method 'dialog' IN MVC4

Question

I'm new in mvc. I have to display a model dialog box.. but it shows an error like this.. the code should be shown below..

in view

<div class="demo">
    <div id="dialog-modal" title="Basic dialog">

    </div>
    <button id="opener">Open Dialog</button>
</div>



<script type="text/javascript">
   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,           
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#opener').click(function () {
            //Load the CreateAlbumPartial action which will return 
            // the partial view _CreateAlbumPartial
            $('#dialog').load('@Url.Action("PartialTest")',
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });
    });
</script>

in controller

 //[HttpGet]
        public PartialViewResult Test()
        {

            //List<string> category_lst = new List<string>();
            //category_lst = (from r in db.dept select r.dname).ToList();
            return PartialView(db.dept.ToList());
        }

Exactly. 'It shows an error like this' what is the error it shows? — Nicros
– Nicros, Commented Jun 12, 2013 at 5:36

Chamika Sandamal · Accepted Answer · 2013-06-12 12:33:36Z

5

You need to add following references to the page

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Update

In your comment, you are doing it totally wrong. Make your code like following and remove other references.

BundleConfig,

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

Layout,

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

edited Jun 12, 2013 at 12:33

answered Jun 12, 2013 at 5:31

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Souparnika Over a year ago

Kevin Hinshaw · Accepted Answer · 2013-10-18 19:32:26Z

2

It looks like there's a mismatch in your IDs for the dialog DIV.

the HTML uses "dialog-modal"
the JS uses "dialog"

Try changing the JS to this:

    $('#dialog-modal').dialog({

answered Oct 18, 2013 at 19:32

Kevin Hinshaw

1067 bronze badges

Collectives™ on Stack Overflow

JavaScript runtime error: Object doesn't support property or method 'dialog' IN MVC4

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related