Can't use some javascript from a .js file...

Matthew Wells

unread,

May 9, 2008, 1:58:17 PM5/9/08

to

OK, I've narrowed down the problem. This works when in the aspx page

But when I put this in a .js file, I get the first "Hello", but the second
statement fails. I've put the
<script type="text/javascript" src="Facilities.js" ></script>

both on top and at the bottom of the aspx page. No luck.

How do I get this to work from a .js file?

Thanks.

--
Matthew.Wells
Matthe...@FirstByte.net

darrel

unread,

May 9, 2008, 2:27:33 PM5/9/08

to

> OK, I've narrowed down the problem. This works when in the aspx page
>
> <script type="text/javascript" >
> function btnFirst_Click()
> {
> alert("Hello");
> alert(document.getElementById("<%=LBFacilities.ClientID%>").options.length);
> return false;
> }
> </script>
>
> But when I put this in a .js file, I get the first "Hello", but the second
> statement fails.

What do you mean 'fails'? How does it fail? Can you post a link?

-Darrel

Teemu Keiski

unread,

May 9, 2008, 5:05:02 PM5/9/08

to

Hi,

That's because LBFacilities controls exists on aspx page, and on separate js
file it (<%=... %>) doesn't get through ASP.NET's processing and therefore
is returned literally what's on the js file

e.g js file contains *literally*

...
alert(document.getElementById("<%=LBFacilities.ClientID%>").options.length);
...

If you use it that way, you need to set the LBFacilities somehow as argument
or on global js variable on the page which the js file references (makes js
though reliable on the existence of the control)

--
Teemu Keiski
AspInsider, ASP.NET MVP
http://blogs.aspadvice.com/joteke
http://teemukeiski.net

"Matthew Wells" <Matthe...@FirstByte.net> wrote in message
news:K8qdnWwGFIUrDbnV...@comcast.com...

Steve C. Orr [MCSD, MVP, CSM, ASP Insider]

unread,

May 10, 2008, 2:06:04 AM5/10/08

to

Teemu is right.
To put it another way, the .js file is run entirely on the client side by
the browser. The browser doesn't know how to interpret the server side
script you have inserted in your second alert statement.
("<%=LBFacilities.ClientID%>")
Server script like that only works in an ASPX page because that is processed
by the server before it is sent to the browser.

--
I hope this helps,
Steve C. Orr,
MCSD, MVP, CSM, ASPInsider
http://SteveOrr.net
http://iPhonePlaza.net

"Matthew Wells" <Matthe...@FirstByte.net> wrote in message
news:K8qdnWwGFIUrDbnV...@comcast.com...

Matthew Wells

unread,

May 10, 2008, 7:10:17 PM5/10/08

to

so how do I do this? I tried putting the variable at the top of the .js
dile, at the top of the aspx file and using registerclientscriptblock.

Any suggestions?

Thanks.

"Teemu Keiski" <jot...@aspalliance.com> wrote in message
news:Ovfrbhhs...@TK2MSFTNGP03.phx.gbl...

Teemu Keiski

unread,

May 11, 2008, 5:51:22 AM5/11/08

to

For example:

Have this on your page:

var lb = document.getElementById('<%=LBFacilities.ClientID%>');

And following in your js file (which I suggest that you registrer with
Page.ClientScript.RegisterStartupScript so that setting the variable would
be *before* the script using the variable in page source.

function btnFirst_Click()
{
alert("Hello");

alert(lb.options.length);
return false;
}
</script>

If one thinks a bit further, say you have a large client-side library, it
would be wiser to use registration mechanism.

For example, your library would contain (e.g the js)

var lb = null;

function registerLb(lbToRegister)
{
lb = lbToregister;
}

And again your page would use:

somewhere. And library would use it:

function btnFirst_Click()
{
alert("Hello");

if(lb != null)
alert(lb.options.length);
return false;
}

or something like that. Of course it probably isn't that easy if you think
scenarios that multiple controls etc needs to be registered(when you'd
probably have array of them instead of one variable). On the other hand,
this was quite simple case when just the variable would work just fine.

--
Teemu Keiski
AspInsider, ASP.NET MVP
http://blogs.aspadvice.com/joteke
http://teemukeiski.net

"Matthew Wells" <Matthe...@FirstByte.net> wrote in message

news:7fGdnZDwk-wMtrvV...@comcast.com...

Matthew Wells

unread,

May 11, 2008, 1:52:18 PM5/11/08

to

I'm afraid this didn't work. I put this at the top of the aspx page:

var LB = document.getElementById("<% = LBFacilities.ClientID %>");

</script>

...which seemed to achieve the desired effect because this is what was in
the page source:

but the code still only does the first alert and fails on the second.

Like I said before, the code works if it's all in the aspx page. What do I
need to do to get it to work in the .js file? Using the RegisertLB didn't
work either.

"Teemu Keiski" <jot...@aspalliance.com> wrote in message

news:erlPVy0s...@TK2MSFTNGP02.phx.gbl...

Teemu Keiski

unread,

May 12, 2008, 12:08:57 PM5/12/08

to

Can you show the code you register the call with?

--
Teemu Keiski
AspInsider, ASP.NET MVP
http://blogs.aspadvice.com/joteke
http://teemukeiski.net

"Matthew Wells" <Matthe...@FirstByte.net> wrote in message

news:rvCdnU84h5_Or7rV...@comcast.com...

Matthew Wells

unread,

May 12, 2008, 4:41:35 PM5/12/08

to

I've simplified evetything into a small project:

Here's default.aspx

<%@ 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>Untitled Page</title>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="LBFacilities" runat="server"
CausesValidation="True"
DataTextField="FacName" DataValueField="FacID"
EnableViewState="False"
Height="82px" Width="108px"></asp:ListBox><br />
<asp:Button ID="btnFirst" runat="server" Text="btnFirst" />
</div>
</form>
</body>
</html>

Here's MyTest.js

function btnFirst_Click()
{
alert("Hello");

alert(LB.options.length);
//alert(document.getElementById("<%=LBFacilities.ClientID%>").options.length);
return false;
}

...and here's default.aspx.cs

using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Page.RegisterStartupScript("MyScript",
"<script type=\"text/javascript\"
src=\"MyTest.js\" >\n" +
"</script>\n\n");
if (!this.IsPostBack)
{
btnFirst.OnClientClick = "return btnFirst_Click()";
LBFacilities.Items.Add("Red");
LBFacilities.Items.Add("Green");
LBFacilities.Items.Add("Blue");
}
}
}

I've played with different variations on setting the LB variable including
doing it from the .cs - RegisterClientScript, on page_init, Load and
prerender. The basic problem seems to be that once the javascriopt is moved
to a separate file, it can't reference the html controls anymore -
getElementByID stops working.

"Teemu Keiski" <jot...@aspalliance.com> wrote in message

news:Otuh$pEtIH...@TK2MSFTNGP02.phx.gbl...

Matthew Wells

unread,

May 14, 2008, 10:13:59 AM5/14/08

to

I've found a workaround. I use RegisterClientScriptBlock on the .cs
page_load event and assign the lb.clientid string value to a variable. then
that string value is usable in the .js file and I can refer to the lstbox
then.

in the .cs file...

Page.RegisterClientScriptBlock("ClientIDs",
"<script language='javascript\'>\n" +
" var LBClientID = \"" + LBFacilities.ClientID + "\";\n" +
"</script>\n\n");

in the .js file...

var LB = document.getElementById(LBClientID);

Now I can refer to LB.options.length.

"Matthew Wells" <Matthe...@FirstByte.net> wrote in message
news:K8qdnWwGFIUrDbnV...@comcast.com...