JavaScript onclick event only partially working

Discussion in 'ASP .Net' started by Nathan Sokalski, Sep 7, 2007.

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

    http://www.nathansokalski.com/
     
    Nathan Sokalski, Sep 7, 2007
    #1
    1. Advertising

  2. Nathan Sokalski

    Lit Guest

    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.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
    >
    > http://www.nathansokalski.com/
    >
     
    Lit, Sep 7, 2007
    #2
    1. Advertising

  3. Nathan Sokalski

    Randy Webb Guest

    Randy Webb, Sep 7, 2007
    #3
  4. Nathan Sokalski

    Lit Guest

    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/
     
    Lit, Sep 7, 2007
    #4
  5. 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

    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 Sokalski, Sep 8, 2007
    #5
  6. Nathan Sokalski

    Lit Guest

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

    >>
    >>

    >
    >
     
    Lit, Sep 8, 2007
    #6
  7. 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_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:...
    >>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
    >>
    >> 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 Sokalski, Sep 8, 2007
    #7
  8. Nathan Sokalski

    Sam Hobbs Guest

    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%...
    >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
    >
    > http://www.nathansokalski.com/
    >
     
    Sam Hobbs, Sep 8, 2007
    #8
  9. 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

    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='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%...
    >>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
    >>
    >> http://www.nathansokalski.com/
    >>

    >
    >
     
    Nathan Sokalski, Sep 8, 2007
    #9
  10. Nathan Sokalski

    Sam Hobbs Guest

    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.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
    >
    > 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='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%...
    >>>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
    >>>
    >>> http://www.nathansokalski.com/
    >>>

    >>
    >>

    >
    >
     
    Sam Hobbs, Sep 9, 2007
    #10
  11. "Nathan Sokalski" <> wrote in message
    news:%23gA$...
    > 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
     
    Anthony Jones, Sep 9, 2007
    #11
  12. Nathan Sokalski

    Bob Lehmann Guest

    Nathan is a prolific cross-poster.

    Bob Lehmann

    "Sam Hobbs" <_change_social_to_socal> wrote in message
    news:%23%...
    > 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='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
    > >
    > > 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='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%...
    > >>>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
    > >>>
    > >>> http://www.nathansokalski.com/
    > >>>
    > >>
    > >>

    > >
    > >

    >
    >
     
    Bob Lehmann, Sep 9, 2007
    #12
  13. "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-HTML/html.html#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.
     
    Dave Anderson, Sep 12, 2007
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Earl Teigrob
    Replies:
    0
    Views:
    369
    Earl Teigrob
    Jul 17, 2003
  2. Rob Zoldan

    HTML pages only partially appear

    Rob Zoldan, Nov 5, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    364
    Kevin Spencer
    Nov 6, 2003
  3. Lee
    Replies:
    7
    Views:
    592
  4. Markus Barchfeld

    InputStreamReader reads data only partially

    Markus Barchfeld, Nov 3, 2003, in forum: Java
    Replies:
    5
    Views:
    979
    Gordon Beaton
    Nov 6, 2003
  5. BillK
    Replies:
    0
    Views:
    394
    BillK
    Mar 6, 2008
Loading...

Share This Page