jQuery Dialog - Object doesn't support property or method 'dialog'

Question

I am trying to use Jquery dialog box, but I am getting Object doesn't support property or method 'dialog' error. Would appreciate any guidance. Is the dialog function deprecated now. I am using jquery-1.5.2.min.js. Here is my code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
    <script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <style type="text/css">
        body {
            font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
        }

        .ui-dialog-osx {
            -moz-border-radius: 0 0 8px 8px;
            -webkit-border-radius: 0 0 8px 8px;
            border-radius: 0 0 8px 8px;
            border-width: 0 8px 8px 8px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var Button1 = $("#Button1");
            var Button2 = $("#Button2");
            var Panel1 = $("#Panel1");
            var dil = $("#dialog");
            Button1.click(function (e) {
                //Panel1.slideDown();
                e.preventDefault();
                $("#dialog").dialog({
                    modal: true,
                    draggable: false,
                    resizable: false,
                    position: ['center', 'top'],
                    show: 'blind',
                    hide: 'blind',
                    width: 400,
                    dialogClass: 'ui-dialog-osx',
                    buttons: {
                        "I've read and understand this": function () {
                            $(this).dialog("close");
                        }
                    }
                })
            });

            Button2.click(function (e) {
                Panel1.slideUp();
                e.preventDefault();
            });

        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Text="Show Panel" />
            <asp:Button ID="Button2" runat="server" Text="Hide Panel" />

            <br />
            <br />

            <asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" Style="display: none;"
                BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
                Hello World!
            </asp:Panel>            
        </div>
        <div id="dialog" title="Important information">
                <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 0 0;"></span></span>
                <div style="margin-left: 23px;">
                    <p>
                        We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
            <br />
                        <br />
                        Our hotel will reopen at 11th of January 2011.<br />
                        <br />
                        Another line which demonstrates the auto height adjustment of the dialog component.
                    </p>
                </div>
            </div>
    </form>
</body>
</html>

You have no script reference to jquery-ui, just the base jquery. — Paul Abbott
– Paul Abbott, Commented Jul 30, 2014 at 21:54

Fenton · Accepted Answer · 2014-07-30 21:55:53Z

2

You may have made a slight error here:

<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>

I expect you meant to include jQuery, and then the script containing the dialog extension (possibly jQuery UI, or a packaged up subset of it).

So change your script tags to...

<script src="Scripts/jquery-v.v.v.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-v.v.v.min.js" type="text/javascript"></script>

answered Jul 30, 2014 at 21:55

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

7 Comments

user2438237 Over a year ago

I have edited my answer.. jQuery is loading fine but the problem is that dialog disappears as soon as it loads.. whether i am expecting that it should close only when i click close button

Fenton Over a year ago

Is it because your button click is causing a .NET postback to trigger? You will need to prevent the click event from bubbling to prevent the postback. Using jQuery, usually e.stopPropagation(); suffices for this purpose.

user2438237 Over a year ago

I have one last doubt.. for including Jquery UI I included ajax.google api. But didnt download any file and didnt attach anything to my solution. What is the best approach to use Jquery UI?

Fenton Over a year ago

Using a Content Delivery Network (CDN) can speed up your site, because if everyone points to the same JavaScript file, the user is likely to already have the file cached. CDNs are also designed to be geographically close to the end user. Downsides - you have to trust the CDN not to delete, move or rename the file, not to fiddle with the file or serve malicious code in it.

user2438237 Over a year ago

Understood!! However the css is still not loading.. any pointers?? I have edited the code..

|

tuxedo25 · Accepted Answer · 2014-07-30 21:55:13Z

0

You are including two versions of jquery on the same page and you forgot to include jquery-ui :)

answered Jul 30, 2014 at 21:55

tuxedo25

4,8281 gold badge18 silver badges12 bronze badges

2 Comments

user2438237 Over a year ago

how to include jquery-ui?? i downloaded that but i got bunch of folders.. do i need to include those folders in my solution?? :/

user2438237 Over a year ago

I have edited my answer.. jQuery is loading fine but the problem is that dialog disappears as soon as it loads.. whether i am expecting that it should close only when i click close button

Collectives™ on Stack Overflow

jQuery Dialog - Object doesn't support property or method 'dialog'

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related