JavaScript onclick event only partially working

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Nathan Sokalski - 07 Sep 2007 22:38 GMT

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.className='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='Category_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.

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

Reply to this Message

Lit - 07 Sep 2007 23:12 GMT

Have you tried

this.style.class='Category_Selected';

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

Lit

>I have a DataList which contains several LinkButtons, which are used to
>select a category in my application. I want the currently selected category
[quoted text clipped - 33 lines]
> the keyword this) is no different than the second statement in the
> onmouseover event. What is making them different? Thanks.

Reply to this Message

Randy Webb - 07 Sep 2007 23:30 GMT

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.

Signature

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

Reply to this Message

Lit - 07 Sep 2007 23:36 GMT

Both work

Lit

> Lit said the following on 9/7/2007 6:12 PM:
>> Have you tried
[quoted text clipped - 4 lines]
>
> You can try, but this.style.className might work better.

Reply to this Message

Nathan Sokalski - 08 Sep 2007 00:39 GMT

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

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

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

> Both work
>
[quoted text clipped - 8 lines]
>>
>> You can try, but this.style.className might work better.

Reply to this Message

Lit - 08 Sep 2007 01:06 GMT

Nathan

I always use:
document.getElementById('datCategories_ctl00_lnkCategory').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

>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
[quoted text clipped - 30 lines]
>>>
>>> You can try, but this.style.className might work better.

Reply to this Message

Nathan Sokalski - 08 Sep 2007 02:18 GMT

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.

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

> Nathan
>
[quoted text clipped - 44 lines]
>>>>
>>>> You can try, but this.style.className might work better.

Reply to this Message

Anthony Jones - 09 Sep 2007 07:50 GMT

> 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
[quoted text clipped - 9 lines]
> 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.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Dave Anderson - 12 Sep 2007 17:28 GMT

> 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-HTML/html.html#ID-95362176

Signature

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.

Reply to this Message

Sam Hobbs - 08 Sep 2007 17:30 GMT

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='Category_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.

Reply to this Message

Nathan Sokalski - 08 Sep 2007 18:54 GMT

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.className='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='Category_Selected';"

Problem Solved!

Signature

Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/

>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
[quoted text clipped - 69 lines]
>> and the keyword this) is no different than the second statement in the
>> onmouseover event. What is making them different? Thanks.

Reply to this Message

Sam Hobbs - 09 Sep 2007 01:28 GMT

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.

> Apparently you are unfamiliar with the concept of server-side technology.
> Server-side technology is an application that runs on the web server and
[quoted text clipped - 112 lines]
>>> id and the keyword this) is no different than the second statement in
>>> the onmouseover event. What is making them different? Thanks.

Reply to this Message

Bob Lehmann - 09 Sep 2007 20:42 GMT

Nathan is a prolific cross-poster.

Bob Lehmann

> 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
[quoted text clipped - 22 lines]
> >
> > <a

onclick="UnselectCategories();datCategories_ctl00_lnkCategory.className='Cat
egory_Selected';"

> > id="datCategories_ctl00_lnkCategory" class="Category_Selected"

onmouseover="categorystyle=this.className;this.className='Category_Selected'
;"

> > onmouseout="this.className=categorystyle;"
> > href="javascript:__doPostBack('datCategories$ctl00$lnkCategory','')"
[quoted text clipped - 36 lines]
> >> 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='Cat
egory_Selected';"

> >> Create a function such as:
> >>
[quoted text clipped - 19 lines]
> >>>
> >>> <a

onclick="UnselectCategories();datCategories_ctl00_lnkCategory.className='Cat
egory_Selected';"

> >>> id="datCategories_ctl00_lnkCategory" class="Category_Selected"

onmouseover="categorystyle=this.className;this.className='Category_Selected'
;"

> >>> onmouseout="this.className=categorystyle;"
> >>> href="javascript:__doPostBack('datCategories$ctl00$lnkCategory','')"
[quoted text clipped - 25 lines]
> >>> id and the keyword this) is no different than the second statement in
> >>> the onmouseover event. What is making them different? Thanks.

Reply to this Message

Rate this thread:

JavaScript onclick event only partially working

Free Magazines