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

[Matthew Wells]

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( "<%=LBFacilitie s.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. 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
Ma***********@F irstByte.net

[darrel]

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( "<%=LBFacilitie s.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]

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( "<%=LBFacilitie s.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" <Ma***********@ FirstByte.netwr ote in message
news:K8******** *************** *******@comcast .com...

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( "<%=LBFacilitie s.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. 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
Ma***********@F irstByte.net

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

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.
("<%=LBFaciliti es.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" <Ma***********@ FirstByte.netwr ote in message
news:K8******** *************** *******@comcast .com...

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( "<%=LBFacilitie s.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. 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
Ma***********@F irstByte.net

[Matthew Wells]

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 registerclients criptblock.

Any suggestions?

Thanks.

"Teemu Keiski" <jo****@aspalli ance.comwrote in message
news:Ov******** ******@TK2MSFTN GP03.phx.gbl...

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( "<%=LBFacilitie s.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" <Ma***********@ FirstByte.netwr ote in message
news:K8******** *************** *******@comcast .com...

>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 ("<%=LBFaciliti es.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. 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.Well s
Ma***********@F irstByte.net

[Teemu Keiski]

For example:

Have this on your page:

var lb = document.getEle mentById('<%=LB Facilities.Clie ntID%>');

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

function btnFirst_Click( )
{
alert("Hello");
alert(lb.option s.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(lbTo Register)
{
lb = lbToregister;
}

And again your page would use:

<script>registe rLb(document.ge tElementById('< %=LBFacilities. ClientID%>'));</script>

somewhere. And library would use it:

function btnFirst_Click( )
{
alert("Hello");
if(lb != null)
alert(lb.option s.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" <Ma***********@ FirstByte.netwr ote in message
news:7f******** *************** *******@comcast .com...

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 registerclients criptblock.

Any suggestions?

Thanks.

"Teemu Keiski" <jo****@aspalli ance.comwrote in message
news:Ov******** ******@TK2MSFTN GP03.phx.gbl...

>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 ("<%=LBFaciliti es.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" <Ma***********@ FirstByte.netwr ote in message
news:K8******* *************** ********@comcas t.com...

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

<script type="text/javascript" >
function btnFirst_Click( )
{
alert("Hello" );
alert(documen t.getElementByI d("<%=LBFacilit ies.ClientID%>" ).options.lengt h);
return false;
}
</script>

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.Wel ls
Ma***********@F irstByte.net

[Matthew Wells]

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

<script type="text/javascript" >

var LB = document.getEle mentById("<% = LBFacilities.Cl ientID %>");

</script>

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

<script type="text/javascript" >
var LB =
document.getEle mentById("ctl00 _ContentPlaceHo lder1_LBFacilit ies");
</script>

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" <jo****@aspalli ance.comwrote in message
news:er******** ******@TK2MSFTN GP02.phx.gbl...

For example:

Have this on your page:

var lb = document.getEle mentById('<%=LB Facilities.Clie ntID%>');

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

function btnFirst_Click( )
{
alert("Hello");
alert(lb.option s.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(lbTo Register)
{
lb = lbToregister;
}

And again your page would use:

<script>registe rLb(document.ge tElementById('< %=LBFacilities. ClientID%>'));</script>

somewhere. And library would use it:

function btnFirst_Click( )
{
alert("Hello");
if(lb != null)
alert(lb.option s.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" <Ma***********@ FirstByte.netwr ote in message
news:7f******** *************** *******@comcast .com...

>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 registerclients criptblock.

Any suggestions?

Thanks.

"Teemu Keiski" <jo****@aspalli ance.comwrote in message
news:Ov******* *******@TK2MSFT NGP03.phx.gbl.. .

>>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(documen t.getElementByI d("<%=LBFacilit ies.ClientID%>" ).options.lengt h);
...

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" <Ma***********@ FirstByte.netwr ote in message
news:K8****** *************** *********@comca st.com...
OK, I've narrowed down the problem. This works when in the aspx page

<script type="text/javascript" >
function btnFirst_Click( )
{
alert("Hello ");
alert(docume nt.getElementBy Id("<%=LBFacili ties.ClientID%> ").options.leng th);
return false;
}
</script>

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.Well s
Ma***********@F irstByte.net

[Teemu Keiski]

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" <Ma***********@ FirstByte.netwr ote in message
news:rv******** *************** *******@comcast .com...

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

<script type="text/javascript" >

var LB = document.getEle mentById("<% = LBFacilities.Cl ientID %>");

</script>

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

<script type="text/javascript" >
var LB =
document.getEle mentById("ctl00 _ContentPlaceHo lder1_LBFacilit ies");
</script>

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" <jo****@aspalli ance.comwrote in message
news:er******** ******@TK2MSFTN GP02.phx.gbl...

>For example:

Have this on your page:

var lb = document.getEle mentById('<%=LB Facilities.Clie ntID%>');

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

function btnFirst_Click( )
{
alert("Hello") ;
alert(lb.optio ns.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(lbTo Register)
{
lb = lbToregister;
}

And again your page would use:

<script>regist erLb(document.g etElementById(' <%=LBFacilities .ClientID%>')); </script>

somewhere. And library would use it:

function btnFirst_Click( )
{
alert("Hello") ;
if(lb != null)
alert(lb.option s.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" <Ma***********@ FirstByte.netwr ote in message
news:7f******* *************** ********@comcas t.com...

>>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 registerclients criptblock.

Any suggestions?

Thanks.

"Teemu Keiski" <jo****@aspalli ance.comwrote in message
news:Ov****** ********@TK2MSF TNGP03.phx.gbl. ..
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(docume nt.getElementBy Id("<%=LBFacili ties.ClientID%> ").options.leng th);
...

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" <Ma***********@ FirstByte.netwr ote in message
news:K8***** *************** **********@comc ast.com...
OK, I've narrowed down the problem. This works when in the aspx page
>
<script type="text/javascript" >
function btnFirst_Click( )
{
alert("Hell o");
alert(docum ent.getElementB yId("<%=LBFacil ities.ClientID% >").options.len gth);
return false;
}
</script>
>
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.Wel ls
Ma***********@F irstByte.net
>

[Matthew Wells]

I've simplified evetything into a small project:

Here's default.aspx

<%@ Page Language="C#" AutoEventWireup ="true" CodeFile="Defau lt.aspx.cs"
Inherits="_Defa ult" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitl ed Page</title>
<script type="text/javascript">
var LB = document.getEle mentById("<%=LB Facilities.Clie ntID%>");
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="LBFacilitie s" runat="server"
CausesValidatio n="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.option s.length);
//alert(document. getElementById( "<%=LBFacilitie s.ClientID%>"). options.length) ;
return false;
}

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

using System;
public partial class _Default : System.Web.UI.P age
{
protected void Page_Load(objec t sender, EventArgs e)
{
Page.RegisterSt artupScript("My Script",
"<script type=\"text/javascript\"
src=\"MyTest.js \" >\n" +
"</script>\n\n");
if (!this.IsPostBa ck)
{
btnFirst.OnClie ntClick = "return btnFirst_Click( )";
LBFacilities.It ems.Add("Red");
LBFacilities.It ems.Add("Green" );
LBFacilities.It ems.Add("Blue") ;
}
}
}

I've played with different variations on setting the LB variable including
doing it from the .cs - RegisterClientS cript, 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" <jo****@aspalli ance.comwrote in message
news:Ot******** ******@TK2MSFTN GP02.phx.gbl...

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" <Ma***********@ FirstByte.netwr ote in message
news:rv******** *************** *******@comcast .com...

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

<script type="text/javascript" >

var LB = document.getEle mentById("<% = LBFacilities.Cl ientID %>");

</script>

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

<script type="text/javascript" >
var LB =
document.getEl ementById("ctl0 0_ContentPlaceH older1_LBFacili ties");
</script>

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" <jo****@aspalli ance.comwrote in message
news:er******* *******@TK2MSFT NGP02.phx.gbl.. .

>>For example:

Have this on your page:

var lb = document.getEle mentById('<%=LB Facilities.Clie ntID%>');

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

function btnFirst_Click( )
{
alert("Hello" );
alert(lb.opti ons.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(lbTo Register)
{
lb = lbToregister;
}

And again your page would use:

<script>regis terLb(document. getElementById( '<%=LBFacilitie s.ClientID%>')) ;</script>

somewhere. And library would use it:

function btnFirst_Click( )
{
alert("Hello" );
if(lb != null)
alert(lb.option s.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" <Ma***********@ FirstByte.netwr ote in message
news:7f****** *************** *********@comca st.com...
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
registerclie ntscriptblock.

Any suggestions?

Thanks.

"Teemu Keiski" <jo****@aspalli ance.comwrote in message
news:Ov***** *********@TK2MS FTNGP03.phx.gbl ...
Hi,
>
That's because LBFacilities controls exists on aspx page, and on
separate js file it (<%=... %>) doesn't get through ASP.NET's
processin g and therefore is returned literally what's on the js file
>
e.g js file contains *literally*
>
...
alert(docum ent.getElementB yId("<%=LBFacil ities.ClientID% >").options.len gth);
...
>
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
reference s (makes js though reliable on the existence of the control)
>
>
--
Teemu Keiski
AspInside r, ASP.NET MVP
http://blogs.aspadvice.com/joteke
http://teemukeiski.net
>
>
"Matthew Wells" <Ma***********@ FirstByte.netwr ote in message
news:K8**** *************** ***********@com cast.com...
>OK, I've narrowed down the problem. This works when in the aspx page
>>
><script type="text/javascript" >
>function btnFirst_Click( )
>{
>alert("Hel lo");
>alert(docu ment.getElement ById("<%=LBFaci lities.ClientID %>").options.le ngth);
>return false;
>}
></script>
>>
>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.We lls
>Ma***********@F irstByte.net
>>
>
>

[Matthew Wells]

I've found a workaround. I use RegisterClientS criptBlock 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.RegisterCl ientScriptBlock ("ClientIDs" ,
"<script language='javas cript\'>\n" +
" var LBClientID = \"" + LBFacilities.Cl ientID + "\";\n" +
"</script>\n\n");

in the .js file...

var LB = document.getEle mentById(LBClie ntID);

Now I can refer to LB.options.leng th.


"Matthew Wells" <Ma***********@ FirstByte.netwr ote in message
news:K8******** *************** *******@comcast .com...

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( "<%=LBFacilitie s.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. 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
Ma***********@F irstByte.net