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

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Matthew Wells - 09 May 2008 18:58 GMT

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

Signature

Matthew.Wells
Matthew.Wells@FirstByte.net

Reply to this Message

darrel - 09 May 2008 19:27 GMT

> OK, I've narrowed down the problem. This works when in the aspx page
>
[quoted text clipped - 9 lines]
> 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

Reply to this Message

Teemu Keiski - 09 May 2008 22:05 GMT

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)

Signature

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

> OK, I've narrowed down the problem. This works when in the aspx page
>
[quoted text clipped - 16 lines]
>
> Thanks.

Reply to this Message

Matthew Wells - 11 May 2008 00:10 GMT

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.

> Hi,
>
[quoted text clipped - 32 lines]
>>
>> Thanks.

Reply to this Message

Teemu Keiski - 11 May 2008 10:51 GMT

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:

<script>registerLb(document.getElementById('<%=LBFacilities.ClientID%>'));</script>

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.

Signature

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

> 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.
[quoted text clipped - 39 lines]
>>>
>>> Thanks.

Reply to this Message

Matthew Wells - 11 May 2008 18:52 GMT

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

<script type="text/javascript" >

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

</script>

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

<script type="text/javascript" >
var LB =
document.getElementById("ctl00_ContentPlaceHolder1_LBFacilities");
</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.

> For example:
>
[quoted text clipped - 88 lines]
>>>>
>>>> Thanks.

Reply to this Message

Teemu Keiski - 12 May 2008 17:08 GMT

Can you show the code you register the call with?

Signature

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

> I'm afraid this didn't work. I put this at the top of the aspx page:
>
[quoted text clipped - 111 lines]
>>>>>
>>>>> Thanks.

Reply to this Message

Matthew Wells - 12 May 2008 21:41 GMT

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>
<script type="text/javascript">
var LB = document.getElementById("<%=LBFacilities.ClientID%>");
</script>
</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.

> Can you show the code you register the call with?
>
[quoted text clipped - 114 lines]
>>>>>>
>>>>>> Thanks.

Reply to this Message

Steve C. Orr [MCSD, MVP, CSM, ASP Insider] - 10 May 2008 07:06 GMT

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.

Signature

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

> OK, I've narrowed down the problem. This works when in the aspx page
>
[quoted text clipped - 16 lines]
>
> Thanks.

Reply to this Message

Matthew Wells - 14 May 2008 15:13 GMT

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.

> OK, I've narrowed down the problem. This works when in the aspx page
>
[quoted text clipped - 16 lines]
>
> Thanks.

Reply to this Message

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

Free Magazines