«

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

http://www.nathansokalski.com/

Have you tried

this.style.class='Category_Selected';

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

Lit


"Nathan Sokalski" <> wrote in message
news:Oih%...
>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
>
> http://www.nathansokalski.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/

Both work

Lit

"Randy Webb" <> wrote in message
news:...
> 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/

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

http://www.nathansokalski.com/

"Lit" <> wrote in message
news:OlHHJ%...
> Both work
>
> Lit
>
> "Randy Webb" <> wrote in message
> news:...
>> 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

I always use:
document.getElementById('datCategories_ctl00_lnkCa tegory').className='Category_Unselected';

Note: datCategories_ctl00_lnkCategory is only a string and does not a
reference to the Element;

Also the Anchor <a>...</a> already has some defaults about its style, could
it be a conflict in this context??

Lit




"Nathan Sokalski" <> wrote in message
news:...
>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
>
> http://www.nathansokalski.com/
>
> "Lit" <> wrote in message
> news:OlHHJ%...
>> Both work
>>
>> Lit
>>
>> "Randy Webb" <> wrote in message
>> news:...
>>> 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/
>>
>>
>
>

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

http://www.nathansokalski.com/

"Lit" <> wrote in message
news:...
> Nathan
>
> I always use:
>
> document.getElementById('datCategories_ctl00_lnkCa tegory').className='Category_Unselected';
>
> Note: datCategories_ctl00_lnkCategory is only a string and does not a
> reference to the Element;
>
> Also the Anchor <a>...</a> already has some defaults about its style,
> could it be a conflict in this context??
>
> Lit
>
>
>
>
> "Nathan Sokalski" <> wrote in message
> news:...
>>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
>>
>> http://www.nathansokalski.com/
>>
>> "Lit" <> wrote in message
>> news:OlHHJ%...
>>> Both work
>>>
>>> Lit
>>>
>>> "Randy Webb" <> wrote in message
>>> news:...
>>>> 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/
>>>
>>>
>>
>>
>
>

I don't know what you mean by generated code. Are you using some other
software to generate code? If so then perhaps you have not read the
documentation adequately.

You are assuming what "this" is. It might not be what you assume it is. I am
not a JavaScript expert by far but the documentation indicates that "this"
is equivalent to "window" for this. Try using "window" instead; it is more
specific and will eliminate some assumptions.

Are you using "class" as a property? Are you sure it is a valid property?

Also double check case. I assume you know that JavaScript is case-sensitive
but I often overlook that so I know it is easy to overlook.

Also it would help to move the statements out of the event parameter and
into a function. In other words instead of:

onclick="UnselectCategories();datCategories_ctl00_ lnkCategory.className='Category_Selected';"

Create a function such as:

function Whatever() {
UnselectCategories();
datCategories_ctl00_lnkCategory.className='Categor y_Selected';
}

And your onclick could be:

onclick="Whatever()"

One advantage is readability. Another advantage is that this makes it much
easier to debug. You can add alert functions that could show data. Or you
could create a text box that you can use for debugging and you could put
diagnostic data into the text box(es) instead of using an alert.


"Nathan Sokalski" <> wrote in message
news:Oih%...
>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
>
> http://www.nathansokalski.com/
>

Apparently you are unfamiliar with the concept of server-side technology.
Server-side technology is an application that runs on the web server and
generates the appropriate html/javascript/css (or whatever else gets sent to
the browser). I am using ASP.NET to generate my page, and when I said that I
am using it to generate the JavaScript, I was referring to using it to
determine the ids of the controls that would be used on the client (I didn't
choose ids like datCategories_ctl00_lnkCategory because I thought they
looked pretty!). Therefore, capitalization is definitely not the problem
here, because the few other JavaScript properties/functions involved (all of
which you can see in my postings for this thread) are correct. As for the
this keyword, it refers to the element that triggers the event that uses it.
If you look at the following code (which was previously posted, but here it
is again):

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

You will notice that I use the this keyword in both the onmouseover and
onmouseout events, both of which function correctly. Therefore, the this
keyword should act exactly the same in the onclick event.

But luckily, I have found the problem, and it had nothing to do with onclick
at all. If you look at the onmouseover event, it sets
categorystyle=this.className; which will be 'Category_Unselected' unless I
am selecting the currently selected category. Therefore, after the onclick
event, the the onmouseout event will usually occur, changing it back to
'Category_Unselected'. I did not recognize this earlier because I could not
see the change happening because onclick was simply setting the className to
the value that onmouseover had already set it to. The solution? Assign a
value to the variable categorystyle instead of this.className, and then the
onmouseout event will assign it to this. classname. My new onclick event is
the following:

onclick="UnselectCategories();categorystyle='Categ ory_Selected';"

Problem Solved!
--
Nathan Sokalski

http://www.nathansokalski.com/

"Sam Hobbs" <_change_social_to_socal> wrote in message
news:...
>I don't know what you mean by generated code. Are you using some other
>software to generate code? If so then perhaps you have not read the
>documentation adequately.
>
> You are assuming what "this" is. It might not be what you assume it is. I
> am not a JavaScript expert by far but the documentation indicates that
> "this" is equivalent to "window" for this. Try using "window" instead; it
> is more specific and will eliminate some assumptions.
>
> Are you using "class" as a property? Are you sure it is a valid property?
>
> Also double check case. I assume you know that JavaScript is
> case-sensitive but I often overlook that so I know it is easy to overlook.
>
> Also it would help to move the statements out of the event parameter and
> into a function. In other words instead of:
>
> onclick="UnselectCategories();datCategories_ctl00_ lnkCategory.className='Category_Selected';"
>
> Create a function such as:
>
> function Whatever() {
> UnselectCategories();
> datCategories_ctl00_lnkCategory.className='Categor y_Selected';
> }
>
> And your onclick could be:
>
> onclick="Whatever()"
>
> One advantage is readability. Another advantage is that this makes it much
> easier to debug. You can add alert functions that could show data. Or you
> could create a text box that you can use for debugging and you could put
> diagnostic data into the text box(es) instead of using an alert.
>
>
> "Nathan Sokalski" <> wrote in message
> news:Oih%...
>>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
>>
>> http://www.nathansokalski.com/
>>
>
>

If ASP is relevant then this should have been posted in an ASP newsgroup.
Note that nowhere in your question do you say ASP. I have seen thousands
(literally thousands) of questions and answered thousands. I have seen many
questions in which people are not specific. You need to specify that you are
using ASP. Don't expect people to be psychic. You need to learn to say you
are using ASP if you are.

You said "I did not recognize this earlier because I could not see the
change happening". My suggestions were intended to help you diagnose
problems by allowing you to see things like that.


"Nathan Sokalski" <> wrote in message
news:...
> Apparently you are unfamiliar with the concept of server-side technology.
> Server-side technology is an application that runs on the web server and
> generates the appropriate html/javascript/css (or whatever else gets sent
> to the browser). I am using ASP.NET to generate my page, and when I said
> that I am using it to generate the JavaScript, I was referring to using it
> to determine the ids of the controls that would be used on the client (I
> didn't choose ids like datCategories_ctl00_lnkCategory because I thought
> they looked pretty!). Therefore, capitalization is definitely not the
> problem here, because the few other JavaScript properties/functions
> involved (all of which you can see in my postings for this thread) are
> correct. As for the this keyword, it refers to the element that triggers
> the event that uses it. If you look at the following code (which was
> previously posted, but here it is again):
>
> <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>
>
> You will notice that I use the this keyword in both the onmouseover and
> onmouseout events, both of which function correctly. Therefore, the this
> keyword should act exactly the same in the onclick event.
>
> But luckily, I have found the problem, and it had nothing to do with
> onclick at all. If you look at the onmouseover event, it sets
> categorystyle=this.className; which will be 'Category_Unselected' unless I
> am selecting the currently selected category. Therefore, after the onclick
> event, the the onmouseout event will usually occur, changing it back to
> 'Category_Unselected'. I did not recognize this earlier because I could
> not see the change happening because onclick was simply setting the
> className to the value that onmouseover had already set it to. The
> solution? Assign a value to the variable categorystyle instead of
> this.className, and then the onmouseout event will assign it to this.
> classname. My new onclick event is the following:
>
> onclick="UnselectCategories();categorystyle='Categ ory_Selected';"
>
> Problem Solved!
> --
> Nathan Sokalski
>
> http://www.nathansokalski.com/
>
> "Sam Hobbs" <_change_social_to_socal> wrote in message
> news:...
>>I don't know what you mean by generated code. Are you using some other
>>software to generate code? If so then perhaps you have not read the
>>documentation adequately.
>>
>> You are assuming what "this" is. It might not be what you assume it is. I
>> am not a JavaScript expert by far but the documentation indicates that
>> "this" is equivalent to "window" for this. Try using "window" instead; it
>> is more specific and will eliminate some assumptions.
>>
>> Are you using "class" as a property? Are you sure it is a valid property?
>>
>> Also double check case. I assume you know that JavaScript is
>> case-sensitive but I often overlook that so I know it is easy to
>> overlook.
>>
>> Also it would help to move the statements out of the event parameter and
>> into a function. In other words instead of:
>>
>> onclick="UnselectCategories();datCategories_ctl00_ lnkCategory.className='Category_Selected';"
>>
>> Create a function such as:
>>
>> function Whatever() {
>> UnselectCategories();
>> datCategories_ctl00_lnkCategory.className='Categor y_Selected';
>> }
>>
>> And your onclick could be:
>>
>> onclick="Whatever()"
>>
>> One advantage is readability. Another advantage is that this makes it
>> much easier to debug. You can add alert functions that could show data.
>> Or you could create a text box that you can use for debugging and you
>> could put diagnostic data into the text box(es) instead of using an
>> alert.
>>
>>
>> "Nathan Sokalski" <> wrote in message
>> news:Oih%...
>>>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
>>>
>>> http://www.nathansokalski.com/
>>>
>>
>>
>
>