asked on

Attempt to open a jQuery dialog results in "Object doesn't support this property or method" error.

I have a .NET application that contains a login page which should open up a dialog. The issue is occurring on my development machine which is running Windows 7 and Visual Studio 2008. Until recently I had been using a machine with Windows XP and the same app on that machine did not have the error. I've attached the HTML and JavaScript. When I run the debugger the following lines of code are highlighted when the error occurs.

$('div#divLogin').dialog({
height: "auto",
buttons: { "Login": function() { Login(txtUserName.value, txtPassWord.value, txtEmployeeNumber, ddlGroup) }, "Cancel": function() { window.close(); } }
});

This should create the dialog. I know it can locate the JavaScript files as that code is in one of them. The references to the files were created when I dragged the files onto the page in Visual Studio. Any suggestions would be greatly appreciated.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" %>
<!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 id="Head1" runat="server">
    <title>Login</title>
    <link href="~/Styles/Dialog.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery/jQueryUI.js" type="text/javascript"></script>
    <script src="js/jquery/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script src="js/Login.js" type="text/javascript"></script>
</head>
<body>
    <form id="frmLogin" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebServices/LoginService.asmx" />
                <asp:ServiceReference Path="~/WebServices/ServiceSetPrimaryGroup.asmx" />
           </Services>
        </asp:ScriptManager>
        <div id="divLogin" title ="Login">
            <div id="lblLoginMessage" class="Message" visible="false"></div>
            
            <span style="display:inline;">User Name:</span>
            <input type="text" id="txtUserName" style="width:150px;" onchange="UserNameEntered(txtUserName.value, lblEmployeeNumber, txtEmployeeNumber)"/>
            <br />
            <span style="display:inline;">Pass Word:&nbsp;</span>
            <input type="password" id="txtPassWord" style="width:150px;" />
            <br />
            <span id="lblEmployeeNumber" style="width:118px; display:inline; visibility:hidden">Employee #:</span>
            <input type="password" id="txtEmployeeNumber" style="width:150px; visibility:hidden" />
            <br />
            <span id="lblGroup" style="display:inline; visibility:hidden">Group:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span> 
            <select id="ddlGroup" style="width:158px; visibility:hidden"></select>
            <br />
        </div>
    </form>
</body>
</html>

function OpenLoginDialog()
// The Page_Load procedure of Login.aspx has registered a Startup Script for the page that calls this function when the Login.aspx page is opened.
// This function creates a Jquery dialog box out of divLogin which contains the fields neccesary for loging into Client Track.
{
    $('div#divLogin').dialog({
        height: "auto",
        buttons: { "Login": function() { Login(txtUserName.value, txtPassWord.value, txtEmployeeNumber, ddlGroup) }, "Cancel": function() { window.close(); } }
    });

    $("a.ui-dialog-titlebar-close").css("visibility", "hidden");
    $('div#divLogin').dialog("option", "height", 850)
    $('#divLogin').keyup(function(e) 
    {
        if (e.keyCode == 13)
        {
            $("div.ui-dialog-buttonpane button:first").click();
        }
    });
    document.getElementById("txtUserName").focus();
}

Open in new window

Designbyonyx

Sounds like your jQuery or jQuery UI libraries are not loading. Your file paths are relative... are you working in the right directory? try making the paths absolute:

/Application/Path/js/jquery/jquery-1.4.2.js

Also, are you running your code inside the DOM Ready event?

$(document).ready(function() {
// Your code here
});

or the shorthand:

$(function() {
// Your code here
});

Can you provide a URL?

Designbyonyx

Also, did you read this line at the top of the vsdoc file...

/*
* This file has been generated to support Visual Studio IntelliSense.
* You should not use this file at runtime inside the browser--it is only
* intended to be used only for design-time IntelliSense.  Please use the
* standard jQuery library for all production use.
*
* Comment version: 1.4.4
*/

Open in new window

leskelly

ASKER

Hello and thanks for you response. In answer to your questions.

1.) Yes I am working in the right directory. The login.aspx file is in the same directory as the js folder. Also if I weren't in the correct directory the app would never find the login.js file. Having said that I did try absolute paths as well with the same results. I also tried

<script src="<%=ResolveUrl("~/js/jquery/jquery-1.4.2.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/js/jquery/jQueryUI.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/js/jquery/jquery-1.4.2-vsdoc.js")%>" type="text/javascript"></script>
<script src="<%=ResolveUrl("~/js/Login.js")%>" type="text/javascript"></script>

which actually work a couple of times which makes this all the more perplexing.

2.) No I'm not using the DOM ready event.

3.) I can't give you a URL because this is happening on my development machine.

4.) Yes I'm aware of that statement in the vsdoc file and as I said in the last item I'm running the app in the development environment. I'm using VS 2008 and I reference that file for intellisense.

Any other thoughts?

ASKER CERTIFIED SOLUTION

Designbyonyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leskelly

ASKER

That was the issue. Once I commented out the reference to vsdoc.js the error stopped. It's curious that this issue never occurred on the XP machine. Thanks for all of your assistance.

Attempt to open a jQuery dialog results in &quot;Object doesn't support this property or method&quot; error.

Attempt to open a jQuery dialog results in "Object doesn't support this property or method" error.