JavaScript onclick event only partially working

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

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.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.
 
Have you tried

this.style.class='Category_Selected';

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

Lit
 
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.
Click to expand...

You can try, but this.style.className might work better.
 
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='Category_Unselected';
datCategories_ctl01_lnkCategory.className='Category_Unselected';
datCategories_ctl02_lnkCategory.className='Category_Unselected';
datCategories_ctl03_lnkCategory.className='Category_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

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 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.
 
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.
 
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!
 
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 said:
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.
--
Click to expand...

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.
 
Nathan is a prolific cross-poster.

Bob Lehmann

Sam Hobbs said:
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.


onclick="UnselectCategories();datCategories_ctl00_lnkCategory.className='Cat
egory_Selected';" onmouseover="categorystyle=this.className;this.className='Category_Selected'
;" onclick="UnselectCategories();datCategories_ctl00_lnkCategory.className='Cat
egory_Selected';" onclick="UnselectCategories();datCategories_ctl00_lnkCategory.className='Cat
egory_Selected';" onmouseover="categorystyle=this.className;this.className='Category_Selected'
;"
Click to expand...
 
Back
Top