|
|
|
date: Fri, 7 Sep 2007 17:38:15 -0400,
group: microsoft.public.inetsdk.programming.scripting.jscript
back
JavaScript onclick event only partially working
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.
--
Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/
date: Fri, 7 Sep 2007 17:38:15 -0400
author: Nathan Sokalski
Re: JavaScript onclick event only partially working
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%23gdZ8HHA.3900@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.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.
> --
> Nathan Sokalski
> njsokalski@hotmail.com
> http://www.nathansokalski.com/
>
date: Fri, 7 Sep 2007 15:12:04 -0700
author: Lit
Re: JavaScript onclick event only partially working
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
njsokalski@hotmail.com
http://www.nathansokalski.com/
"Lit" wrote in message
news:e7srxwa8HHA.484@TK2MSFTNGP06.phx.gbl...
> 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
>
>
>
>
> "Nathan Sokalski" wrote in message
> news:uknhUha8HHA.1204@TK2MSFTNGP03.phx.gbl...
>>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 Sokalski
>> njsokalski@hotmail.com
>> http://www.nathansokalski.com/
>>
>> "Lit" wrote in message
>> news:OlHHJ%23Z8HHA.1484@TK2MSFTNGP06.phx.gbl...
>>> Both work
>>>
>>> Lit
>>>
>>> "Randy Webb" wrote in message
>>> news:e9WdnbCmS9MoTXzbRVn_vw@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/
>>>
>>>
>>
>>
>
>
date: Fri, 7 Sep 2007 21:18:59 -0400
author: Nathan Sokalski
Re: JavaScript onclick event only partially working
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.
"Nathan Sokalski" wrote in message
news:Oih%23gdZ8HHA.3900@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.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.
> --
> Nathan Sokalski
> njsokalski@hotmail.com
> http://www.nathansokalski.com/
>
date: Sat, 8 Sep 2007 09:30:14 -0700
author: Sam Hobbs _change_social_to_socal
Re: JavaScript onclick event only partially working
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!
--
Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/
"Sam Hobbs" <samuel@social.rr.com_change_social_to_socal> wrote in message
news:uMSohVj8HHA.1936@TK2MSFTNGP06.phx.gbl...
>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.
>
>
> "Nathan Sokalski" wrote in message
> news:Oih%23gdZ8HHA.3900@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.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.
>> --
>> Nathan Sokalski
>> njsokalski@hotmail.com
>> http://www.nathansokalski.com/
>>
>
>
date: Sat, 8 Sep 2007 13:54:03 -0400
author: Nathan Sokalski
Re: JavaScript onclick event only partially working
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:OiX54Ek8HHA.484@TK2MSFTNGP06.phx.gbl...
> 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!
> --
> Nathan Sokalski
> njsokalski@hotmail.com
> http://www.nathansokalski.com/
>
> "Sam Hobbs" <samuel@social.rr.com_change_social_to_socal> wrote in message
> news:uMSohVj8HHA.1936@TK2MSFTNGP06.phx.gbl...
>>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.
>>
>>
>> "Nathan Sokalski" wrote in message
>> news:Oih%23gdZ8HHA.3900@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.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.
>>> --
>>> Nathan Sokalski
>>> njsokalski@hotmail.com
>>> http://www.nathansokalski.com/
>>>
>>
>>
>
>
date: Sat, 8 Sep 2007 17:28:18 -0700
author: Sam Hobbs _change_social_to_socal
Re: JavaScript onclick event only partially working
"Nathan Sokalski" wrote in message
news:%23gA$2Yb8HHA.5360@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
date: Sun, 9 Sep 2007 07:50:01 +0100
author: Anthony Jones
Re: JavaScript onclick event only partially working
Nathan is a prolific cross-poster.
Bob Lehmann
"Sam Hobbs" <samuel@social.rr.com_change_social_to_socal> wrote in message
news:%23%23pZpgn8HHA.1188@TK2MSFTNGP04.phx.gbl...
> 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:OiX54Ek8HHA.484@TK2MSFTNGP06.phx.gbl...
> > 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='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','')"
> > 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!
> > --
> > Nathan Sokalski
> > njsokalski@hotmail.com
> > http://www.nathansokalski.com/
> >
> > "Sam Hobbs" <samuel@social.rr.com_change_social_to_socal> wrote in
message
> > news:uMSohVj8HHA.1936@TK2MSFTNGP06.phx.gbl...
> >>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='Cat
egory_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.
> >>
> >>
> >> "Nathan Sokalski" wrote in message
> >> news:Oih%23gdZ8HHA.3900@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='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','')"
> >>> 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.
> >>> --
> >>> Nathan Sokalski
> >>> njsokalski@hotmail.com
> >>> http://www.nathansokalski.com/
> >>>
> >>
> >>
> >
> >
>
>
date: Sun, 9 Sep 2007 13:43:20 -0600
author: Bob Lehmann
|
|
