What is causing error with this call to a .js file

[Ty]

Hello all,
I am creating a web site with Visual Stuido 2008. I am trying to use
a java script file to create a busybox for login from this page
http://blogs.crsw.com/mark/articles/642.aspx.

I am using a master page senerio.

The erro I'm getting is
'busyBox' is not a member of 'ASP.login2_aspx'

This is the offeding code in the page:
<asp:Button ID="btnLogin" Runat="server" Text="Login" Width="59px"
OnClick="busyBox.Show();" ></asp:Button>



Here is my page code>>>
<%@ Page Language="VB" Src="LdapAuthentication.vb" MasterPageFile="~/
TestMaster.master" AutoEventWireup="false" CodeFile="Login2.aspx.vb"
Inherits="Login2" title="FastTrack - Login" %>
<%@ MasterType VirtualPath="~/TestMaster.master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
<script language="javascript" type="text/javascript"
src="CastleBusyBox.js">

// Instantiate BusyBox object
var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "images/
gears_ani_", ".gif", 125, 147, 207);
</script>

<table width="100%">
<tr>
<td align="middle">
&nbsp,<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

&nbsp<asp:TextBox ID="txtUsername"
Runat="server" BackColor="Black"
ForeColor="White" BorderColor="#003399"
style="margin-left: 0px"
Width="177px" Font-Size="Medium"></
asp:TextBox>&nbsp,&nbsp

<asp:Label ID="Label2" Runat="server" ForeColor="#003399" Font-
Size="Medium">Username</asp:Label>

<asp:TextBox ID="txtPassword" Runat="server" TextMode="Password"
BackColor="Black" Font-Size="Medium" ForeColor="White"
BorderColor="#003399" Width="177px"></asp:TextBox>&nbsp

<asp:Label ID="Label3" Runat="server" ForeColor="#003399" Font-
Size="Medium">Password</asp:Label><br>

<asp:TextBox ID="txtDomain" Runat="server" BackColor="Black"
BorderColor="White" Font-Size="Small" ForeColor="White"
Visible="False">test.lcl</asp:TextBox>&nbsp,&nbsp

<asp:Label ID="Label1" Runat="server" ForeColor="#003399" Font-
Size="Small" Visible="False">Domain</asp:Label><br>

<asp:Button ID="btnLogin" Runat="server" Text="Login" Width="59px"
OnClick="busyBox.Show();" ></asp:Button>

<br />

<asp:Label ID="errorLabel" Runat="server" ForeColor="#ff3300"></
asp:Label>

<br>

&nbsp,&nbsp<asp:CheckBox ID="chkPersist" Runat="server" Text="Persist
Cookie"
ForeColor="#003399" Checked="True"
Visible="False" />

<iframe id="Iframe1" name="BusyBox1" frameBorder="0" scrolling="no"
ondrop="return false;"></iframe>


</td>
</tr>
</table>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder3"
Runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder4"
Runat="Server">
</asp:Content>

Here is the code from the .js file

// ---------------------------
// Legal
// ---------------------------
// CastleBusyBox Control
// Castle Rock Software, LLC
// by Mark Wagner
// http://www.crsw.com
//
// Version: 1.2
//
// Copyright 2004, 2005 Castle Rock Software, LLC
// No warranty express or implied.

// ---------------------------
// General Notes
// ---------------------------
// The BusyBox javascript has been written so the BusyBox javascript
// control can be used with or without the Castle.BusyBox .NET
control.

// ---------------------------
// Constructor
// ---------------------------
// BusyBox class constructor
// Arguments:
// id - id of the IFrame tag to use.
// varName - name of the variable this instance of the busy box is
assigned to.
// imageCount - number of image in the animation sequence.
// imageNamePrefix - name prefix for each image.
// imageNameSuffix - name suffix for each image.
// imageDelay - number of milliseconds to display each image.
// width - defines the width of the busy box (required for Netscape
and Firefox)
// height - defines the height of the busy box (required for
Netscape and Firefox)
// url - (optional) url to the page containing the custom busy box
layout.
//
// This example uses the default busy box layout defined internally
(in the javascript).
// var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "gears_ani_",
".gif", 125, 147, 206)
//
// This example uses a custom busy box layout defined in the
BusyBox.htm file.
// var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "gears_ani_",
".gif", 125, 147, 206, "BusyBox.htm")
//
function BusyBox(id, varName, imageCount, imageNamePrefix,
imageNameSuffix, imageDelay, width, height, url)
{
// Initialize object
this.id = id;
this.ImageCount = imageCount;
this.CurrentImageIndex = 0;
this.ImageWidth = 0;
this.ImageHeight = 0;
this.ImageNamePrefix = imageNamePrefix;
this.ImageNameSuffix = imageNameSuffix;
this.ImageDelay = imageDelay;
this.DivID = "BusyBoxDiv";
this.ImgID = "BusyBoxImg";
this.Enabled = true;
this.Width = width;
this.Height = height;

// Retain the name of the instantiated object variable so that we can
animate
// using the setTimeout statement
this.VarName = varName;

// Allows us to stop the animation with clearTimeout(), should we
ever want to
this.timeout_id = null;

// Cache (pre-load) images
this.CacheImages();

// Url to the page containing the busy box.
this.BusyBoxUrl = url;

// Get reference to the IFrame object
this.IFrame = document.getElementById(this.id);

// Hide the busy box
this.Hide();

if( this.BusyBoxUrl )
// Load the busy box contents using a custom layout page.
this.LoadUrl(this.BusyBoxUrl);
else
// Load the busy box contents using the internally defined layout.
this.RenderContent();

// If this browser does not support IFRAME tags then disable this
control. The
// next version will implement the use of a DIV instead of the IFRAME
tag;
// even though there are a couple minor issues with using DIV tags.
if( !frames[this.id] )
this.Enabled = false;
}

// --------------------------------
// Instance Methods
// --------------------------------

// GetIFrameDocument:
// Returns a reference to the document object in the IFrame.
BusyBox.prototype.GetIFrameDocument = function()
{
var doc;

if( this.IFrame.contentDocument )
// For NS6
doc = this.IFrame.contentDocument;
else if( this.IFrame.contentWindow )
// For IE5.5 and IE6
doc = this.IFrame.contentWindow.document;
else if( this.IFrame.document )
// For IE5
doc = this.IFrame.document;
else
// TODO: Confirm this should be the default
doc = this.IFrame.document;

return doc;
}

// LoadUrl:
// Changing the src attribute for an IFrame tag causes each new page
to be
// added to the browsers history object. This causes undesired
results for
// the user when they click the back button. Instead, we can use the
// document.location.replace() method to correctly load our busy box
// page into our IFrame.
//
// Arguments:
// url - url to the busy box page.
BusyBox.prototype.LoadUrl = function(url)
{
// Get a reference to the document object in the IFrame
var IFrameDoc = this.GetIFrameDocument();

// Load the url using the replace method. This will prevent the
browsers
// history object from being updated with the new busybox url; thus
allowing
// the back button to function as desired for the user.
IFrameDoc.location.replace(url);
}

// RenderContent:
// This method is used when the default busy box layout is used; not a
custom
// layout. This method is called when the url argument for the
constructor is null.
BusyBox.prototype.RenderContent = function()
{
// Get the IFrame document object
var doc = this.GetIFrameDocument();

var style = " style='BORDER: navy 3px solid; POSITION: absolute;' ";

doc.open();
doc.writeln("<body ondragstart='return false;' style='Margin: 0px;
Background-Color: white'>");
doc.writeln(" <div id='" + this.DivID + "' align=center " + style +
">");
doc.writeln(" <img id='" + this.ImgID + "' src=''>");
doc.writeln(" <br><h3>Processing</h3>");
doc.writeln(" </div>");
doc.writeln("</body>");
doc.close();
}

// Resize:
// Resizes the busy box IFrame by setting its width and height
attributes
// to the size of its contents.
BusyBox.prototype.Resize = function()
{
// Resize the busy box IFrame.
if( BusyBox.IsBrowserIE() )
{
// Set the width by looking at its contents
var div = frames[this.id].document.getElementById(this.DivID);
this.IFrame.style.width = div.offsetWidth;
this.IFrame.style.height = div.offsetHeight;
}
else
{
// Set the width to the value specified.
this.IFrame.style.width = this.Width;
this.IFrame.style.height = this.Height;
}
}

// Center:
// Centers the busy box IFrame on the page regardless of the browsers
// scroll position. This ensures the busy box is presented to the
user
// in a visible location in the window.
BusyBox.prototype.Center = function()
{
if( !this.IFrame )
return;

// Center the BusyBox in the window regardless of the scroll
positions
var objLeft = (document.body.clientWidth - this.IFrame.offsetWidth) /
2;
var objTop = (document.body.clientHeight -
this.IFrame.offsetHeight) / 2;
objLeft = objLeft + document.body.scrollLeft;
objTop = objTop + document.body.scrollTop;

// Position object
this.IFrame.style.position = "absolute";
this.IFrame.style.top = objTop;
this.IFrame.style.left = objLeft;
}

// CacheImages:
// Pre-loads the images from the server and stores a reference to each
// image. This allows the images to be presented to the user quickly
// for smooth image animation.
BusyBox.prototype.CacheImages = function()
{
// Instantiate the array to store the image references
this.Images = new Array(this.ImageCount);

// Load all the images to cache into the aniframes array
for(var i = 0; i < this.ImageCount; i++)
{
this.Images = new Image();
this.Images.src = this.ImageNamePrefix + i +
this.ImageNameSuffix;
}
}

// IsAnimating:
// Returns a boolean value representing the state of the animation.
BusyBox.prototype.IsAnimating = function()
{
if( this.timeout_id == null)
return false;
else
return true;
}

// IsVisible:
// Returns a boolean value representing the visibility state for the
busy box.
BusyBox.prototype.IsVisible = function()
{
var ifrm = document.getElementById(this.id);

if( ifrm.style.visibility == "visible" && ifrm.style.width > 0 )
return true;
else
return false;
}

// Animate:
// Performs the animation process. This is accomplished by showing
the "current"
// image in the animation sequence process; and then submitting a
timed statement
// to execute in x number of milliseconds.
BusyBox.prototype.Animate = function()
{
// Assign the current image sequence to display
if( frames[this.id] )
// browser supports frames
frames[this.id].document.getElementById(this.ImgID).src =
this.Images[this.CurrentImageIndex].src;
else
// browser does not support frames
document.getElementById(this.ImgID).src =
this.Images[this.CurrentImageIndex].src;

// Auto re-center and re-size the busy box. This will force the busy
box to
// always appear in the center of the window even if the user
scrolls.
this.Resize();
this.Center();

// Increment the current image index
this.CurrentImageIndex = (this.CurrentImageIndex +
1)%this.ImageCount;

// Display the next image in (imageDelay value) milliseconds (i.e.
125)
this.timeout_id = setTimeout(this.VarName + ".Animate();",
this.ImageDelay);
}

// StartAnimation:
// Starts the animation process.
BusyBox.prototype.StartAnimate = function()
{
if( this.IsAnimating() )
return;

this.Animate();
}

// StopAnimation:
// Stops the animation process.
BusyBox.prototype.StopAnimate = function()
{
clearTimeout(this.timeout_id);
this.timeout_id = null;
}

// Hide:
// Hides the busy box making it invisible to the user.
BusyBox.prototype.Hide = function()
{
this.StopAnimate();

// Hide the busy box.
this.IFrame.style.visibility = "hidden";
this.IFrame.style.width = 0;
this.IFrame.style.height = 0;
}

// Show:
// This function displays the busy box to the user. This function
centers the
// busy dialog box, makes it visible, and starts the animation. This
function
// will typically be called by the body event.
//
// Example:
// <body onbeforeunload="busyBox.Show();" >
BusyBox.prototype.Show = function()
{
if( !this.Enabled )
return;

if( this.IsAnimating() || this.IsVisible() )
return;

this.Resize();
this.Center();

// Set the busy box to be visible and make sure it is on top of all
other controls.
this.IFrame.style.visibility = "visible";
this.IFrame.style.zIndex = "999999";

// Start the animation
this.StartAnimate();
}

// --------------------------------
// Class Methods
// --------------------------------

// IsBrowserIE:
// Returns true if the executing browser it a Microsoft Internet
Explorer browser.
BusyBox.IsBrowserIE = function()
{
try
{ return (window.navigator.userAgent.indexOf("MSIE ") > 0); }
catch(x)
{ return false; }
}

// IsBrowserNS:
// Returns true if the executing browser it a Netscape browser.
BusyBox.IsBrowserNS = function()
{
try
{ return (window.navigator.userAgent.indexOf("Netscape") > 0); }
catch(x)
{ return false; }
}

// IsBrowserFirefox:
// Returns true if the executing browser it a Firefox browser.
BusyBox.IsBrowserFirefox = function()
{
try
{ return (window.navigator.userAgent.indexOf("Firefox") > 0); }
catch(x)
{ return false; }
}


Any help would be greatful.

Thanks,

Ty

 

[Geoffrey Summerhayes]

Hello all,
  I am creating a web site with Visual Stuido 2008. I am trying to use
a java script file to create a busybox for login from this pagehttp://blogs.crsw.com/mark/articles/642.aspx.

I am using a master page senerio.

The erro I'm getting is
'busyBox' is not a member of 'ASP.login2_aspx'

This is the offeding code in the page:
<asp:Button ID="btnLogin" Runat="server" Text="Login" Width="59px"
OnClick="busyBox.Show();" ></asp:Button>

Here is my page code>>>
<%@ Page Language="VB" Src="LdapAuthentication.vb" MasterPageFile="~/
TestMaster.master" AutoEventWireup="false" CodeFile="Login2.aspx.vb"
Inherits="Login2" title="FastTrack - Login" %>
<%@ MasterType VirtualPath="~/TestMaster.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
             <script language="javascript" type="text/javascript"
src="CastleBusyBox.js">

                 // Instantiate BusyBox object
        var busyBox = new BusyBox("BusyBox1", "busyBox", 4, "images/
gears_ani_", ".gif", 125, 147, 207);
             </script>

A script tag either contains code or points to an external file.
Exclusive or, one or t'other not both. Actually, when both are
present the browser is supposed to ignore the contents of the
tag and just load the external file .

(OT for c.l.j.)

Use Page.ClientScript.RegisterClientScriptInclude for the
external script, this will place it in the head section.

 

[Ty]

A script tag either contains code or points to an external file.
Exclusive or, one or t'other not both. Actually, when both are
present the browser is supposed to ignore the contents of the
tag and just load the external file .

(OT for c.l.j.)

Use Page.ClientScript.RegisterClientScriptInclude for the
external script, this will place it in the head section.

I'm not sure what you mean. I should get rid of the Script tag at the
begining?

Thanks,

Ty

 

[Geoffrey Summerhayes]

I'm not sure what you mean. I should get rid of the Script tag at the
begining?

You need ->>>TWO<<<- script tags, one for the internal and one for
the external script. Using RegisterClientScriptInclude in the asp's
Page_Load function will create a script tag for the external script
inside the head tag for the page.

Whether that solves the problem, I dunno. But it is wrong as
it stands.

 

[Ty]

You need ->>>TWO<<<- script tags, one for the internal and one for
the external script. Using RegisterClientScriptInclude in the asp's
Page_Load function will create a script tag for the external script
inside the head tag for the page.

Whether that solves the problem, I dunno. But it is wrong as
it stands.

I got it working now.

I had to place the following lines in the MasterPage and removed the
Onclick event of the button.

<script language="javascript" type="text/javascript"
src="CastleBusyBox.js"></script>

<body onbeforeunload="busyBox.Show();">


Works fine now.

Thanks,

Ty