Solved

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

Posted on 2011-03-01
5
733 Views
Last Modified: 2012-05-11
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
Comment
Question by:leskelly
  • 3
  • 2
5 Comments
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35013281
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 35013307
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
 

Author Comment

by:leskelly
ID: 35013768
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
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 35017443
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
 

Author Closing Comment

by:leskelly
ID: 35017589
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now