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 `` tag. — freefaller, Feb 12 '13 at 19:37

score 1 · Accepted Answer · answered Feb 14 '13 at 16:53

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>

Andy nailed it. The key is to use the event object because it always has an unambiguous event.target.id value. — Bob Jones, Feb 20 '13 at 00:46
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;` http://stackoverflow.com/a/5301667/64262 — andleer, Feb 20 '13 at 04:59

score 0 · Answer 2 · answered Feb 12 '13 at 19:31

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 '13 at 19:31

Ann L.

13,760
5
35
66

$(this) selects the whole window, not the current element – Bob Jones Feb 13 '13 at 21:31
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. – Ann L. Feb 13 '13 at 21:56

Sen Jacob · Answer 3 · 2013-02-14T04:12:18.670

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 '13 at 04:12

answered Feb 13 '13 at 08:46

Sen Jacob

3,384
3
35
61

$(this) selects the whole window, not the current element. That's the problem I am trying to solve. – Bob Jones Feb 13 '13 at 21:32
$(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 Feb 14 '13 at 03:37
I've edited my answer above. Please check whether it helps you out. – Sen Jacob Feb 14 '13 at 04:13

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

3 Answers3