Issue with Javascript in ASP.NET Webform

Question

I have a list of hrefs inside UL. When a user clicks a link, I need to apply a particular CSS style to that href (i.e. make it 'selected' and make all others 'unselected'). The script I used is given below. But it does not work. Any idea where it went wrong?

Thanks

Coaliza Anti-Cardiolipin Coamatic Antithrombin

    <script type="text/javascript" language="javascript"  >
        document.onclick = function(evt) {
            var el = window.event ? event.srcElement : evt.target;
            var aText = "";
            if (el && el.className == "unselected") {
                el.className = "selected";
                aText = el.innerText;

                for (var i = 0; i < document.links.length; ++i) {
                    var a = document.links[i];
                    if (a.className == "selected" && a.innerText != aText)
                        a.className = "unselected";


                }
                /*
                var siblings = el.parentNode.childNodes;
                for (var i = 0, l = siblings.length; i < l; i++) {
                var sib = siblings[i];
                if (sib != el && sib.className == "selected")
                sib.className = "unselected";
                }*/
            }
        }
</script>

Have you thought of using a Javascript framework like jQuery which would make this trivial? — BigJump
– BigJump, Commented Jul 7, 2011 at 5:44
What do you mean by "it does not work"? As a programmer, can you please be more specific? What is the current output? Any errors encountered? — Alex R.
– Alex R., Commented Jul 7, 2011 at 5:45

balexandre · Accepted Answer · 2011-07-07 05:53:35Z

3

Though I would like to see the HTML I would strongly suggest that you use a Javascript Framework, jQuery would give you a strong push with much less code.

Just add the script src to your document

and use only this code

<script type="text/javascript">

    // well all the DOM is written in the page and all elements are available do:
    $(document).ready( function() {

        // for each <a> tag bind the event click and now do:     
        $("a").click(function() {

            // 1st. remove all selected
            $("a.selected").removeClass("selected");

            // 2nd. assign selected to this clicked element only
            $(this).addClass("selected");

            // 3rd. let's return true so the <a> tag can jump to the href
            return true;    
        });
    });

</script>

There is no need to have unselected class, that's should be the default CSS.

answered Jul 7, 2011 at 5:53

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sanar Over a year ago

Hi.. found the culprit.. actually, this code resides in (ASP.NET) Master Page. When a user clicks a link, the target page (for which too, its the same master page), loads (along with the master page) and hence all the script functionality is lost. Will have to find a workaround. Thanks for all your replies!

Collectives™ on Stack Overflow

Issue with Javascript in ASP.NET Webform

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related