CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user2438237
user2438237

Reputation: 315

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

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>

Upvotes: 0

Views: 18969

Answers (2)

Fenton
Fenton

Reputation: 250882

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>

Upvotes: 2

tuxedo25
tuxedo25

Reputation: 4828

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

Upvotes: 0

Related Questions