How to detect current element using jQuery within nested ASP.NET listview

Question

I have a nested listview containing multiple rows that each contain a ddl and a textbox, E.G.:

<ItemTemplate>
    <tr>
        <td>
            <asp:DropDownList id="myDDL" runat="server" CssClass="aDDL"
                onfocus="javaScript:$(function() { 
                $(<selector>).siblings.RemoveClass('wrappedElement');
                $(<selector>).addClass('wrappedElement');
             })" /></td>
        <td><asp:TextBox id="myTextBox" runat="server" CssClass="aTextBox"
                onfocus="javaScript:$(function() { 
                $(<selector>).siblings.RemoveClass('wrappedElement');
                $(<selector>).addClass('wrappedElement');
             })" /></td>
    </tr>
</ItemTemplate>

What I want to do is wrap the element that was clicked on. What is happening is that I am wrapping all "aDDL" or "aTextBox" elements. I need to find the selector for the element that was just focused on.

I tried this article, but "this" or $(this) winds up pointing to the entire document.

Not an answer to your question, but just minor comment: you don't need to use the javascript: prefix on event handlers. It is only necessary when using javascript in the href of the <a> tag. — freefaller
– freefaller, Commented Feb 12, 2013 at 19:37

andleer · Accepted Answer · 2013-02-14 16:53:00Z

1

A couple of items:

You don't need to prefix your code with javascript: which is only needed for link element that instead invoke a function on the href attribute <a href="javascript:...">. (Likely better in that case to bind to the click event.)

You also don't need to wrap your inline function with the jQuery object. Instead of coding: onfocus="javaScript:$(function() { })", try onfocus="function()".

Lastly, you can pass the event object as part of your handler call to gain access to the selector. Not sure it can be in-lined:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script>
        function select(e) {
            var selector = e.target; // "select#options"
            var $selector = $(e.target) // jQuery object wrapping <select>
        }
    </script>
</head>
<body>
    <select id="options" onfocus="select(event)">
        <option value="1">Dog</option>
        <option value="2">Cat</option>
        <option value="3">Horse</option>
    </select>
</body>
</html>

answered Feb 14, 2013 at 16:53

andleer

22.6k8 gold badges65 silver badges85 bronze badges

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

2 Comments

Bob Jones Over a year ago

Andy nailed it. The key is to use the event object because it always has an unambiguous event.target.id value.

andleer Over a year ago

Bob, found this and it could affect your use. target is no available in IE which uses srcElement instead. Use this to find your target: var target = event.target || event.srcElement; stackoverflow.com/a/5301667/64262

Ann L. · Accepted Answer · 2013-02-12 19:31:52Z

0

I would try defining your javascript in one place, outside of the template. Something like this (from memory):

$(".aDDL").focus(function() {
     $(".wrappedElement").RemoveClass('wrappedElement');
     $(this).addClass('wrappedElement');
 });

// etc.

In my experience it works better to assign functions from outside the elements via selectors than to set them up as part of the HTML tag.

answered Feb 12, 2013 at 19:31

Ann L.

14k5 gold badges39 silver badges67 bronze badges

2 Comments

Bob Jones Over a year ago

$(this) selects the whole window, not the current element

Ann L. Over a year ago

Out of curiosity: do you still have the $(this) problem if you attach the handler to the elements via jQuery, as Sen Jacob and I suggested? I'm wondering if the way you attached the function is causing $(this) to have a different meaning.

Sen Jacob · Accepted Answer · 2013-02-14 04:12:18Z

0

In Javascript

$(function() { 
    $(".aDDL,.aTextBox").focus(function() {
        $(".aDDL,.aTextBox").RemoveClass('wrappedElement');
        $(this).addClass('wrappedElement');
    });
});

And use this as your item template

<ItemTemplate>
    <tr>
        <td>
            <asp:DropDownList id="myDDL" runat="server" CssClass="aDDL" /></td>
        <td>
            <asp:TextBox id="myTextBox" runat="server" CssClass="aTextBox" /></td>
    </tr>
</ItemTemplate>

If you still want to do it inline, try like the following.

onfocus="$(function() { 
            var $this = $(document.activeElement);
            $this.siblings.RemoveClass('wrappedElement');
            $this.addClass('wrappedElement');
         })"

edited Feb 14, 2013 at 4:12

answered Feb 13, 2013 at 8:46

Sen Jacob

3,4703 gold badges37 silver badges66 bronze badges

3 Comments

Bob Jones Over a year ago

$(this) selects the whole window, not the current element. That's the problem I am trying to solve.

Sen Jacob Over a year ago

$(this) is referring to which selector element you are using to fire the event. In your case, you are adding/removing the class in document.ready function itself, that is the reason your $(this) is referring to the current document.

Sen Jacob Over a year ago

I've edited my answer above. Please check whether it helps you out.

Collectives™ on Stack Overflow

How to detect current element using jQuery within nested ASP.NET listview

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related