JavaScript onclick event only partially working

[Nathan Sokalski]

I have a DataList which contains several LinkButtons, which are used to
select a category in my application. I want the currently selected category
to use a different CSS class. Here is an example of the generated code for
one of the buttons:

<a
onclick="Unsele ctCategories(); datCategories_c tl00_lnkCategor y.className='Ca tegory_Selected ';"
id="datCategori es_ctl00_lnkCat egory" class="Category _Selected"
onmouseover="ca tegorystyle=thi s.className;thi s.className='Ca tegory_Selected ';"
onmouseout="thi s.className=cat egorystyle;"
href="javascrip t:__doPostBack( 'datCategories$ ctl00$lnkCatego ry','')"
style="display: block;">Compute rs/Electronics</a>

The onmouseover and onmouseout events (which I use to create a rollover to
switch between the selected/unselected style classes) work perfectly fine.
The onclick event, however, only partially works. The function
"UnselectCatego ries();" (which changes all the buttons to unselected) works
no problem. However, the statement that assigns a value to the className
property does not appear to be working. I have tried using both of the
following for this statement:

//Using the literal element id:
datCategories_c tl00_lnkCategor y.className='Ca tegory_Selected ';

//Using the keyword this:
this.className= 'Category_Selec ted';

I would prefer to use the keyword this so that I do not have to
programmaticall y generate the code, but neither one seemed to work. I am
confused by this, for multiple reasons:

1. UnselectCategor ies() is being called, so why isn't the other statement?

2. Note that the statement this.className= 'Category_Selec ted'; (I know it is
not the one in my example, but I tried it using both the element id and the
keyword this) is no different than the second statement in the onmouseover
event. What is making them different? Thanks.
--
Nathan Sokalski
nj********@hotm ail.com
http://www.nathansokalski.com/

[Lit]

Have you tried

this.style.clas s='Category_Sel ected';

make sure the control has a class property to begin with.

Lit
"Nathan Sokalski" <nj********@hot mail.comwrote in message
news:Oi******** ********@TK2MSF TNGP02.phx.gbl. ..

>I have a DataList which contains several LinkButtons, which are used to
select a category in my application. I want the currently selected category
to use a different CSS class. Here is an example of the generated code for
one of the buttons:

<a
onclick="Unsele ctCategories(); datCategories_c tl00_lnkCategor y.className='Ca tegory_Selected ';"
id="datCategori es_ctl00_lnkCat egory" class="Category _Selected"
onmouseover="ca tegorystyle=thi s.className;thi s.className='Ca tegory_Selected ';"
onmouseout="thi s.className=cat egorystyle;"
href="javascrip t:__doPostBack( 'datCategories$ ctl00$lnkCatego ry','')"
style="display: block;">Compute rs/Electronics</a>

The onmouseover and onmouseout events (which I use to create a rollover to
switch between the selected/unselected style classes) work perfectly fine.
The onclick event, however, only partially works. The function
"UnselectCatego ries();" (which changes all the buttons to unselected)
works no problem. However, the statement that assigns a value to the
className property does not appear to be working. I have tried using both
of the following for this statement:

//Using the literal element id:
datCategories_c tl00_lnkCategor y.className='Ca tegory_Selected ';

//Using the keyword this:
this.className= 'Category_Selec ted';

I would prefer to use the keyword this so that I do not have to
programmaticall y generate the code, but neither one seemed to work. I am
confused by this, for multiple reasons:

1. UnselectCategor ies() is being called, so why isn't the other statement?

2. Note that the statement this.className= 'Category_Selec ted'; (I know it
is not the one in my example, but I tried it using both the element id and
the keyword this) is no different than the second statement in the
onmouseover event. What is making them different? Thanks.
--
Nathan Sokalski
nj********@hotm ail.com
http://www.nathansokalski.com/

[Randy Webb]

Lit said the following on 9/7/2007 6:12 PM:

Have you tried

this.style.clas s='Category_Sel ected';

make sure the control has a class property to begin with.

You can try, but this.style.clas sName might work better.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Lit]

Both work

Lit

"Randy Webb" <Hi************ @aol.comwrote in message
news:e9******** ************@gi ganews.com...

Lit said the following on 9/7/2007 6:12 PM:

>Have you tried

this.style.cla ss='Category_Se lected';

make sure the control has a class property to begin with.

You can try, but this.style.clas sName might work better.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/

[Nathan Sokalski]

I have tried using this.style.clas sName, but I am pretty sure that is
unrelated to the problem, because if that were the problem, my onmouseover
and onmouseout events would not work, and neither would my
UnselectCategor ies() function. Even though I doubt that it has anything to
do with the problem, here is the script section of my code that contains the
UnselectCategor ies() function:

<script type="text/javascript">
<!--
function UnselectCategor ies()
{
datCategories_c tl00_lnkCategor y.className='Ca tegory_Unselect ed';
datCategories_c tl01_lnkCategor y.className='Ca tegory_Unselect ed';
datCategories_c tl02_lnkCategor y.className='Ca tegory_Unselect ed';
datCategories_c tl03_lnkCategor y.className='Ca tegory_Unselect ed';
}
// -->
</script>

To see how and where I call this function and attempt to use the .className
property, see my original posting. Any help would be greatly appreciated.
--
Nathan Sokalski
nj********@hotm ail.com
http://www.nathansokalski.com/

"Lit" <sq**********@h otmail.comwrote in message
news:Ol******** ********@TK2MSF TNGP06.phx.gbl. ..

Both work

Lit

"Randy Webb" <Hi************ @aol.comwrote in message
news:e9******** ************@gi ganews.com...

>Lit said the following on 9/7/2007 6:12 PM:

>>Have you tried

this.style.cl ass='Category_S elected';

make sure the control has a class property to begin with.

You can try, but this.style.clas sName might work better.

--
Randy
Chance Favors The Prepared Mind
comp.lang.java script FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/

[Anthony Jones]

"Nathan Sokalski" <nj********@hot mail.comwrote in message
news:%2******** ********@TK2MSF TNGP03.phx.gbl. ..

I tried that as well, but it did not make any difference. Is it possible
that the fact the onclick event and the action caused by having an href

are

"blending"? (is it possible that href is being executed before the class

is

set?) I am also using AJAX, and something else that I am wondering is if

it

is possible that the CSS class is being changed there when the results are
returned (I do not rebind the DataList or set the CssClass attribute, or
even update the UpdatePanel, although in the DataList's ItemTemplate in

the

*.ASPX file, the LinkButton's CssClass attribute is set to
"Category_Unsel ected") However, I doubt that the AJAX is the problem,
because before I added an onclick event the initially selected item (I

used

the If Not IsPostBack() condition in ASP.NET's Load event) remained
selected, but now it becomes unselected because of my UnselectCategor ies()
function. Any ideas? Thanks.
--

Getting clarity on the actual problem is difficult. Not only do you have
your own JScript code but you also have AJAX code which we can't see clearly
also ASP.NET code which again we can't see.

Here is a simple statement of fact:-

this.style.clas sName = "Category_Selec ted"

when included in the onclick will set the class of the clicked element
correctly. If placed after your UnselectCategor ies it will work.

However, if you were also to correct onmouseover and onmouseout you will
find the the class is reverted to unselected on mouse out since the
categorystyle variable will hold the class read during onmouseover.

Having said that it could be that the postback in the HREF is also modifying
the HTML.
--
Anthony Jones - MVP ASP/ASP.NET

[Dave Anderson]

"Lit" wrote:

Have you tried

this.style.clas s='Category_Sel ected';

make sure the control has a class property to begin with.

There is nothing prohibiting that assignment, but the DOM specifies
className as a property of the HTMLElement, not of the HTMLStyleElemen t.
[this.className] is correct.

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-95362176

--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms.