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="UnselectCategories();datCategories_ctl00_ lnkCategory.className='Category_Selected';"
id="datCategories_ctl00_lnkCategory" class="Category_Selected"
onmouseover="categorystyle=this.className;this.cla ssName='Category_Selected';"
onmouseout="this.className=categorystyle;"
href="javascript:__doPostBack('datCategories$ctl00 $lnkCategory','')"
style="display:block;">Computers/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
"UnselectCategories();" (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_ctl00_lnkCategory.className='Categor y_Selected';

//Using the keyword this:
this.className='Category_Selected';

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

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

2. Note that the statement this.className='Category_Selected'; (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********@hotmail.com
http://www.nathansokalski.com/

[Lit]

Have you tried

this.style.class='Category_Selected';

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

Lit
"Nathan Sokalski" <nj********@hotmail.comwrote in message
news:Oi****************@TK2MSFTNGP02.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="UnselectCategories();datCategories_ctl00_ lnkCategory.className='Category_Selected';"
id="datCategories_ctl00_lnkCategory" class="Category_Selected"
onmouseover="categorystyle=this.className;this.cla ssName='Category_Selected';"
onmouseout="this.className=categorystyle;"
href="javascript:__doPostBack('datCategories$ctl00 $lnkCategory','')"
style="display:block;">Computers/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
"UnselectCategories();" (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_ctl00_lnkCategory.className='Categor y_Selected';

//Using the keyword this:
this.className='Category_Selected';

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

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

2. Note that the statement this.className='Category_Selected'; (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********@hotmail.com
http://www.nathansokalski.com/

[Randy Webb]

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

Have you tried

this.style.class='Category_Selected';

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

You can try, but this.style.className might work better.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript 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********************@giganews.com...

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

>Have you tried

this.style.class='Category_Selected';

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

You can try, but this.style.className might work better.

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

[Nathan Sokalski]

I have tried using this.style.className, 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
UnselectCategories() 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
UnselectCategories() function:

<script type="text/javascript">
<!--
function UnselectCategories()
{
datCategories_ctl00_lnkCategory.className='Categor y_Unselected';
datCategories_ctl01_lnkCategory.className='Categor y_Unselected';
datCategories_ctl02_lnkCategory.className='Categor y_Unselected';
datCategories_ctl03_lnkCategory.className='Categor y_Unselected';
}
// -->
</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********@hotmail.com
http://www.nathansokalski.com/

"Lit" <sq**********@hotmail.comwrote in message
news:Ol****************@TK2MSFTNGP06.phx.gbl...

Both work

Lit

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

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

>>Have you tried

this.style.class='Category_Selected';

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

You can try, but this.style.className might work better.

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

[Anthony Jones]

"Nathan Sokalski" <nj********@hotmail.comwrote in message
news:%2****************@TK2MSFTNGP03.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_Unselected") 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 UnselectCategories()
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.className = "Category_Selected"

when included in the onclick will set the class of the clicked element
correctly. If placed after your UnselectCategories 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.class='Category_Selected';

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