• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 743
  • Last Modified:

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

0
leskelly
Asked:
leskelly
  • 3
  • 2
1 Solution
 
DesignbyonyxCommented:
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?

0
 
DesignbyonyxCommented:
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

0
 
leskellyAuthor Commented:
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?
0
 
DesignbyonyxCommented:
So are you getting the error in VS or in the browser?  Any javascript debugging should take place in the browser using something like Firebug or Chrome's javascript debugger.  And if you are testing this in the browser (using VS debug functionality), you need to make sure the vsdoc is NOT being included.  Only use the vsdoc when you are actually writing code... not when you are testing/debugging.
0
 
leskellyAuthor Commented:
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.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now