Referencing a drop down menu in jQuery from ASP.NET

Question

This is a newbie question. I've been using jQuery for a day or so.

I simply want to capture each change in a drop down menu.

Here's my drop down menu and reference:

 <script src="Scripts/insertRootCauseElements.js" type="text/javascript"></script>
 <asp:DropDownList ID="DropDownListRootCause" runat="server" > </asp:DropDownList>

Here's my handler:

    $(document).ready(function () {

    //    var selectedValue = $('#DropDownListRootCause').selectedValue;
    //var selectedIndex = $('#DropDownListRootCause').selectedIndex;
    alert("HERE");
    $('#DropDownListRootCause').change(function () {
    alert("Changed " + $('#DropDownListRootCause').selectedIndex);
})
.change();
//    if ($('#DropDownListRootCause').change) {
//        alert("dd change " + selectedIndex);
//    }


})

I've tried a lot of variations but nothing is working for me. On debugging, it seems my jQuery doesn't know what "DropDownListRootCause" is.

I set AutoPostBack=true in my dd control which finds my jQuery but

$('#DropDownListRootCause').change(function () {
    alert("Changed " + $('#DropDownListRootCause').selectedIndex);
})

Still evals to false.

I added DropDownListRootCause to 'Watch' when debugging which reveals 'DropDownListRootCause' is undefined'. I've tried double and single quotes but no luck.

It must be something simple but I can't see it. Can someone help?

Could you provide a jsFiddle of your example ?

Luc Morin
– Luc Morin

2012-10-19 16:35:44 +00:00
Commented Oct 19, 2012 at 16:35 — Luc Morin
– Luc Morin, Commented Oct 19, 2012 at 16:35

Gromer · Accepted Answer · 2012-10-19 17:00:38Z

If you notice in your source HTML, ASP.Net changes the ID a great deal. A lot of times, it'll end up looking something like: $ctr001_DropDownListRootCause. This is why your selector isn't working.

There are two ways to select your select menu correctly:

$('[id$="DropDownListRootCause"]') This is doing an attribute ends with selector.
$('#<%=DropDownListRootCause.ClientID %>') ASP.Net will write out that full id into your selector. NOTE: you can only use this when your javascript is INSIDE your .aspx file. If you try to use this in a .js file, it won't work, as ASP.Net doesn't do anything with those files when rendering the page.

Also, the ends with selector can be modified to be more specific:

$('select[id$="DropDownListRootCause"]')

Edit:

There are pitfalls to the ends with selector. If this select element is inside a GridView row, or a Repeater, the selector will match them all. Say you have this GridView:

<asp:GridView ID="gv"
    runat="server"
    AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:DropDownList ID="DropDownListRootCause" runat="server" ></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

(I've removed fluff from it) It'll generate HTML that looks something like this:

<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$0&#39;)">
    <td>
        <select name="gv$ctl03$DropDownListRootCause" id="gv_DropDownListRootCause_0"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$1&#39;)">
    <td>
        <select name="gv$ctl04$DropDownListRootCause" id="gv_DropDownListRootCause_1"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$2&#39;)">
    <td>
        <select name="gv$ctl05$DropDownListRootCause" id="gv_DropDownListRootCause_2"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$3&#39;)">
    <td>
        <select name="gv$ctl06$DropDownListRootCause" id="gv_DropDownListRootCause_3"></select>
    </td>
</tr>
<tr onclick="__doPostBack(&#39;gv&#39;,&#39;Select$4&#39;)">
    <td>
        <select name="gv$ctl07$DropDownListRootCause" id="gv_DropDownListRootCause_4"></select>
    </td>
</tr>

Again, I've removed a lot of the markup that isn't needed to show what I'm talking about. With that rendered HTML, using $('[id$="DropDownListRootCause"]') will select 5 select elements. If you are trying to wire up the same event code to all 5 elements, you're fine. BUT, if you're trying to do something with only one of them, you'll need to make the selector more specific.

Collectives™ on Stack Overflow

Referencing a drop down menu in jQuery from ASP.NET

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related