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

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
 
M

Mark Fitzpatrick

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

Mark Rae

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?

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();" />
 
T

Tony Girgenti

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
 
?

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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

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

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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.

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.

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

Jasbird

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

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

Scott M.

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
 
T

Tony Girgenti

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
 
S

Scott M.

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
 
M

Mark Rae

One problem was that i was using "onClick" with a capital "C" in the HTML
button

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

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

That *certainly* was the problem...
 
?

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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.

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
 
T

Tony Girgenti

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
 
M

mark4asp

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

Danny Goodman has some good books out there. One on JavaScript and one
on DHTML (how javascript operates with the HTML DOM).

I have his "Dynamic HTML: The Definitive Reference", both 1e and 2e.
The new edition is the 3rd. I will probably be buying that too. It's
quite unique, no other book approaches it in detail for DHTML.

<http://www.dannyg.com/pubs/index.html#DHTMLORA3>

His Javascript books are also excellent.
 
M

Mark Rae

Danny Goodman has some good books out there. One on JavaScript and one
on DHTML (how javascript operates with the HTML DOM).

I have his "Dynamic HTML: The Definitive Reference", both 1e and 2e.
The new edition is the 3rd. I will probably be buying that too. It's
quite unique, no other book approaches it in detail for DHTML.

This book is absolutely essential... if you don't have it, buy it now...
 
S

Scott M.

z-index is the CSS property that controls layering of elements in a web
page. To use it within the realm of CSS, case doesn't matter (since CSS is
also not case-sensitive, like HTML) and it is used as: z-index (with the
hyphen).

When you want to access a CSS property from within a language like
JavaScript, then you must follow the case sensitivity of the language you
are in. JavaScript is case-sensitive (unlike CSS and HTML), so even if you
wish to affect some CSS, you would now have to use the correct case. Also,
in JavaScript (or more accurately, the Browser's Object Model or BOM) that
is accessed via JavaScript, the object properties that affect CSS don't
always match their CSS counterparts. For exapmle:

[Straight CSS inside a web page's HTML]

<!-- case does not matter in the following -->
<P ID="theText" STYLE="z-index:1">some text</P>

[JavaScript embedded within HTML]

<SCRIPT TYPE="text/JavaScript">
// case does matter in here because this area is JavaScript
theText.style.zIndex = 2;
</SCRIPT>

In short, when writing any kind of code, you must write it according to the
language that you are writing at the time.

If you really want to get a grasp of what your question encompasses, you'll
need to research the following:

-HTML
-CSS
-JavaScript
-The Document Object Model (standard OO API to a web document)
-The Browser Object Model (sometimes people confuse this with the Document
Object Model) (vendor specific OO API to browser and document)

-Scott

Tony Girgenti 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
 
?

=?ISO-8859-1?Q?G=F6ran_Andersson?=

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

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top