I don't get javascript. How do you use it?

  • Thread starter Thread starter Tony Girgenti
  • Start date Start date
T

Tony Girgenti

Hello.

I just finished reading two articles about javascript here:
http://msdn2.microsoft.com/en-us/library/bb332123(VS.80).aspx

I tried some javascript testing in VS2005, SP1, VB , .NET 2.0, ASP.NET 2.0
on WIN XP Pro, SP2.

It's real simple. I put a button on a page and coded the onClick in it like
this:
<asp:Button ID="Button1" runat="server" Style="z-index: 103; left: 528px;
position: absolute; top: 392px" Text="Button" OnClick="ShowCal" />

Here is the function:
<script type="text/javascript" language="javascript">
function ShowCal() {
var x = Button1.Style.z - index;
alert(x);
}
</script>

It won't let me run the program saying "'ShowCal' is not a member of
'ASP.default_aspx'"

If javascript is so popular, why can't i use it?

Any help would be gratefully appreciated.

Thanks,
Tony
 
JavaScript is client-side. The OnClick event of the ASP.Net button is
looking for a server-side function. Your best bet in this case is to use a
plain HTML button instead and call the javascript event from the HTML
button's onclick event.
 
I tried some javascript testing in VS2005, SP1, VB , .NET 2.0, ASP.NET 2.0
on WIN XP Pro, SP2.

It's real simple. I put a button on a page and coded the onClick in it
like this:
<asp:Button ID="Button1" runat="server" Style="z-index: 103; left: 528px;
position: absolute; top: 392px" Text="Button" OnClick="ShowCal" />

Here is the function:
<script type="text/javascript" language="javascript">
function ShowCal() {
var x = Button1.Style.z - index;
alert(x);
}
</script>

It won't let me run the program saying "'ShowCal' is not a member of
'ASP.default_aspx'"

If javascript is so popular, why can't i use it?
Click to expand...

Because you're not calling it... The OnClick event of an <asp:Button> will
cause the page to post back (unless you're using AJAX or something similar)
and try to run a server-side method...

Change your code to the following:

<asp:Button ID="Button1" runat="server" Style="z-index: 103; left: 528px;
position: absolute; top: 392px" Text="Button" OnClientClick="ShowCal();" />
 
Hello Mark and Mark.

I tried it both Mark Fitzpatrick's way and Mark Rae's way. Either way does
not give an error, but it does not do anything.

<input id="Button1" style="z-index: 103; left: 496px; position: absolute;
top: 392px"
type="button" value="button" onClick="ShowCal;" />
<asp:Button ID="Button2" runat="server" Style="z-index: 104; left: 688px;
position: absolute; top: 392px" Text="Button" onClientClick="ShowCal();" />

When i click Button1, it does nothing and puts an "Error on page" on the
bottom of the IE screen and does nothing. When i click Button2, i can see
the progress bar at the bottom of the IE screen, but it does nothing.

Thanks,
Tony
 
Tony said:
Hello.

I just finished reading two articles about javascript here:
http://msdn2.microsoft.com/en-us/library/bb332123(VS.80).aspx

I tried some javascript testing in VS2005, SP1, VB , .NET 2.0, ASP.NET 2.0
on WIN XP Pro, SP2.

It's real simple. I put a button on a page and coded the onClick in it like
this:
<asp:Button ID="Button1" runat="server" Style="z-index: 103; left: 528px;
position: absolute; top: 392px" Text="Button" OnClick="ShowCal" />

Here is the function:
<script type="text/javascript" language="javascript">
function ShowCal() {
var x = Button1.Style.z - index;
alert(x);
}
</script>

It won't let me run the program saying "'ShowCal' is not a member of
'ASP.default_aspx'"

If javascript is so popular, why can't i use it?

Any help would be gratefully appreciated.

Thanks,
Tony
Click to expand...

As Mark said, the OnClick event of a server control is a server event.

Use the OnClientClick property to create a client side onclick event. Or
use an html element instead:

<input type="button" style="position: absolute; z-index: 103; left:
528px; top: 392px;" value="Button" onclick="ShowCal();" />

Notice that the onclick property contains the code to call the function,
not just the function name.

Some browsers expose the elements with an id as properties in the
document, but you should use the getElementById to access them to write
code that works in all (modern) browsers. Javascript is case sensetive,
so you have to write all names using the correct case.

<script type="text/javascript">

function ShowCal() {
var x = document.getElementById('Button1').style.zIndex;
alert(x);
}

</script>
 
Tony said:
Hello Mark and Mark.

I tried it both Mark Fitzpatrick's way and Mark Rae's way. Either way does
not give an error, but it does not do anything.

<input id="Button1" style="z-index: 103; left: 496px; position: absolute;
top: 392px"
type="button" value="button" onClick="ShowCal;" />
<asp:Button ID="Button2" runat="server" Style="z-index: 104; left: 688px;
position: absolute; top: 392px" Text="Button" onClientClick="ShowCal();" />

When i click Button1, it does nothing and puts an "Error on page" on the
bottom of the IE screen and does nothing.
Click to expand...

Then it creates an error message, you just haven't enabled displaying of
error messages in the browser. The default in the browser is to not
display error messages other than as the notification in the status bar,
to protect regular users from getting error message popups whenever
there is some bad code in a page.

The reason for the error message is that there is no "Style" property of
the input element, the correct name is "style". Also you are trying to
read the z property from it and subtracting the index variable, and
noone of those exists. In script you use zIndex to access the z-index
style, as a variable name can not contains a dash.

Look at the code in my other post.
When i click Button2, i can see
the progress bar at the bottom of the IE screen, but it does nothing.
Click to expand...

That is because the client script has errors, and the event code doesn't
contain return false; to prevent the button from making a postback. An
asp:Button control will be rendered as a input with tyep="submit", so it
will always make a postback unless you prevent it.
 
Hello Mark and Mark.

I tried it both Mark Fitzpatrick's way and Mark Rae's way. Either way does
not give an error, but it does not do anything.

<input id="Button1" style="z-index: 103; left: 496px; position: absolute;
top: 392px"
type="button" value="button" onClick="ShowCal;" />
<asp:Button ID="Button2" runat="server" Style="z-index: 104; left: 688px;
position: absolute; top: 392px" Text="Button" onClientClick="ShowCal();" />

When i click Button1, it does nothing and puts an "Error on page" on the
bottom of the IE screen and does nothing. When i click Button2, i can see
the progress bar at the bottom of the IE screen, but it does nothing.

Thanks,
Tony
Click to expand...

It's difficult to give a complete answer to you question without looking
at your entire page. However: your javascript function is:

function ShowCal() {
var x = Button1.Style.z - index;
alert(x);
}

There's an error there but no matter ... are you sure that the html
version of <asp:Button ID="Button1" ... /> actually has the same id that
you gave to the server-side control. That's not always the case (e.g.
when using master pages).

Your javascript should've been:

function ShowCal() {
var x = document.getElementById('<%=Button1.ClientID
%>').Style.zIndex;
alert(x);
}

You can view your html code by typing: view-source: before the URL in
the address bar (if the right context View Source command has been
disabled or if you don't have an Edit button in your browser toolbar.
 
Or, in your page_load event, programmably add the client-side event handler:

Button1.attributes.add("onclick","ShowCal()")

By the way, remember to include the parenthesis in your JavaScript function
call, as they are part of the function name (see above). Now, as long as
you do have a client-side JavaScript function called ShowCal(), and it is
coded correctly, clicking your button will invoke the function.

-Scott
 
Thanks to everyone for their replies.

I finally figured it out. There were several issues. One problem was that
i was using "onClick" with a capital "C" in the HTML button. Another issue
was i didn't need a ";" at the end of the onclick statement, but i did need
the "()".

I know that i probably confused everybody by showing different versions of
the code that i had, and i apologize for that. Both of the buttons work now
using the following function:
function ShowMsg()
{
alert(Calendar1.innerText);
myElement = document.getElementById("Calendar1");
alert(myElement.style.position);
}

With the HTML button i used "onclick="ShowMsg()" and with the ASP button i
used "onClientClick="ShowMsg()" . The Calendar1 displays then the position
property displays.

However, i still can't get the "z-index" or "zindex" to display. For the
"z-index" it gives an error on line 14, character 9 and for "zindex", It
just displays "undefined" in the alert. Line 14, character 9 is the "}" in
my function.

Not that i would really ever want to display the z-index of any element in a
real situation, i'm just curious as to why it won't display.

I'm on my way now to practicing and learning more about javascript and i
really appreciate everybody's help in figuring this stuff out.

Thanks,
Tony

Scott M. said:
Or, in your page_load event, programmably add the client-side event
handler:

Button1.attributes.add("onclick","ShowCal()")

By the way, remember to include the parenthesis in your JavaScript
function call, as they are part of the function name (see above). Now, as
long as you do have a client-side JavaScript function called ShowCal(),
and it is coded correctly, clicking your button will invoke the function.

-Scott
Click to expand...
 
A couple of notes here,

Whether or not you capiatalize the "c" in onClick does not matter in the
HTML button because HTML is not a case-sensitive language. Also adding a
semi-colon at the end of the function name is optional in JavaScript, but a
good idea to do it. So, this would be fine:

onClick="ShowMsg();"

It was the parenthesis that were really the problem.

Tony Girgenti said:
Thanks to everyone for their replies.

I finally figured it out. There were several issues. One problem was
that i was using "onClick" with a capital "C" in the HTML button. Another
issue was i didn't need a ";" at the end of the onclick statement, but i
did need the "()".

I know that i probably confused everybody by showing different versions of
the code that i had, and i apologize for that. Both of the buttons work
now using the following function:
function ShowMsg()
{
alert(Calendar1.innerText);
myElement = document.getElementById("Calendar1");
alert(myElement.style.position);
}

With the HTML button i used "onclick="ShowMsg()" and with the ASP button i
used "onClientClick="ShowMsg()" . The Calendar1 displays then the
position property displays.

However, i still can't get the "z-index" or "zindex" to display. For the
"z-index" it gives an error on line 14, character 9 and for "zindex", It
just displays "undefined" in the alert. Line 14, character 9 is the "}"
in my function.

Not that i would really ever want to display the z-index of any element in
a real situation, i'm just curious as to why it won't display.

I'm on my way now to practicing and learning more about javascript and i
really appreciate everybody's help in figuring this stuff out.

Thanks,
Tony
Click to expand...
 
One problem was that i was using "onClick" with a capital "C" in the HTML
button
Click to expand...

That wouldn't have made any difference...
Another issue was i didn't need a ";" at the end of the onclick statement,
Click to expand...

Again, that would have made no difference, though it's good practice to
include it...
but i did need the "()"
Click to expand...

That *certainly* was the problem...
 
Tony said:
Thanks to everyone for their replies.

I finally figured it out. There were several issues. One problem was that
i was using "onClick" with a capital "C" in the HTML button. Another issue
was i didn't need a ";" at the end of the onclick statement, but i did need
the "()".

I know that i probably confused everybody by showing different versions of
the code that i had, and i apologize for that. Both of the buttons work now
using the following function:
function ShowMsg()
{
alert(Calendar1.innerText);
myElement = document.getElementById("Calendar1");
alert(myElement.style.position);
}

With the HTML button i used "onclick="ShowMsg()" and with the ASP button i
used "onClientClick="ShowMsg()" . The Calendar1 displays then the position
property displays.

However, i still can't get the "z-index" or "zindex" to display. For the
"z-index" it gives an error on line 14, character 9 and for "zindex", It
just displays "undefined" in the alert. Line 14, character 9 is the "}" in
my function.
Click to expand...

That's because it's zIndex, not zindex. Look at the code in my previous
code.
Not that i would really ever want to display the z-index of any element in a
real situation, i'm just curious as to why it won't display.

I'm on my way now to practicing and learning more about javascript and i
really appreciate everybody's help in figuring this stuff out.

Thanks,
Tony
Click to expand...
 
Tony said:
Hello Goran.

You obviously know a lot about javascript. How does a person figure whether
to use "z-index" or "zindex" or "zIndex" or "ZINDEX" or whatever.

Is that kind of stuff documented somewhere?

Thanks,
Tony
Click to expand...

The properties in Javascript are in camel case, so you can mostly rely
on the same pattern. The style font-family is accessible as the property
fontFamily, border-top becomes borderTop, margin-left becomed marginLeft
and so on.

There are some exceptions, like the class attribute is accessed as
className in script.

You can find all the styles and properties in the Miscrosoft
documentation for Internet Explorer, for example.
http://msdn.microsoft.com/library/

As there are a lot of non-standard properties in Internet Explorer,
watch the standards information for the properties you use.
 
Back
Top