Using JavaScript, how do I get the value of a selected item in a listbox inside an ASP.NET repeater in the respective repeater row?

I have this code that appears inside a repeater

<asp:TextBox ID="tbShippingInstructions" Text=<%#Eval("ShippingInstructions")%> runat="server" Wrap="False" Width="176" Font-Names="Verdana" ForeColor="#666666"></asp:TextBox>
   <cc1:DropDownExtender ID="ddeShippingInstructions" DropDownControlID="lbShippingInstructions"
        runat="server" DynamicServicePath="" Enabled="True" TargetControlID="tbShippingInstructions"
        HighlightBackColor="WhiteSmoke">
    </cc1:DropDownExtender>
        <asp:ListBox ID="lbShippingInstructions" runat="server"
        CssClass="alwaysontop" Height="85px">
</asp:ListBox>

Open in new window


How do I get the value of lbShippingInstructions when selected using JavaScript?
Mike MillerSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Mixing server-side controls with client-side processing is always a bit of a mess.
To make it less of a pain to maintain I usually decouple the logic completely.

So, first thing to keep in mind is that server-side controls "just" render normal HTML controls.
In your case, an ASP ListBox control renders a <select> element on the browser.
Knowing this, you just need to wrap your repeater in a <div> which you know the client id and handle the change event of the <select> element normally with jQuery.
<!-- declare a known container div to help you find the listboxes -->
<div id="repeaterContainer" size="10">
    <!-- here put your repeater that will render the listboxes -->
    <select size="5">
        <option value="1">text1</option>
        <option value="2">text2</option>
        <option value="3">text3</option>
        <option value="4">text4</option>
        <option value="5">text5</option>
    </select>
</div>

Open in new window

// handle the change event of all listboxes inside our container
$('#repeaterContainer select').on('change', function(){
    console.log(this.value);
});

Open in new window

I can't give you a working sample in ASP.net but here's a fiddle that tries to mimic the same thing:
http://jsfiddle.net/AlexCode/0pbqmrwd/
0
Mike MillerSoftware EngineerAuthor Commented:
What is the fiddle example supposed to do when the listbox selection is changed?
Here's what I've tried...nothing happening.

<script>
// handle the change event of all listboxes inside our container
$('#repeaterContainer select').on('change', function(){
    alert(this.value);
});
</script>

Open in new window


<div id="repeaterContainer">
'...my listbox stuff/repeater
<asp:TextBox ID="tbSpecialWorkOrderNotes" class="tbSpecialWorkOrderNotes" name="tbSpecialWorkOrderNotes" Text=<%#Eval("SpecialWorkOrderNotes")%> runat="server" Wrap="False" Width="176" Font-Names="Verdana" ForeColor="#666666"></asp:TextBox>
   <cc1:DropDownExtender ID="ddeSpecialWorkOrderNotes" DropDownControlID="lbSpecialWorkOrderNotes"
        runat="server" DynamicServicePath="" Enabled="True" TargetControlID="tbSpecialWorkOrderNotes"
        HighlightBackColor="WhiteSmoke">
    </cc1:DropDownExtender>
        <asp:ListBox ID="lbSpecialWorkOrderNotes" runat="server"
        CssClass="alwaysontop" Height="85px">
</asp:ListBox>
</div>

Open in new window

0
RobOwner (Aidellio)Commented:
window.onload = function() {
     document.getElementById('ddeShippingInstructions').onchange = function() {
          // do what you need to here... Changed!
    }
}

Open in new window


vanilla js example: http://jsbin.com/buceji/1/edit?js,console,output
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Mike MillerSoftware EngineerAuthor Commented:
Rob,

Tried this. Not sure it will work because of the repeater the control is in. When I use this for a control outside of the repeater, it works great. Once inside...nada. Thats my struggle, getting the value of a control in a repeater or gridview since the ID technically is different for each instance of the row, etc.
0
Alexandre SimõesManager / Technology SpecialistCommented:
@Rob,
you can't get the element neither by ID neither specially by that ID.
ddeShippingInstructions is the server side ID which is something else when rendered on the browser.
Also, as this is a repeater, you'll have several elements with the same client ID which won't behave as expected (it will only attach to the first one that the selector finds).

@mwmiller78
Are you putting that script block last thing before the end of the body?
Another option is to use it as a delegate so it won't really matter if the repeater is rendered or not:
// handle the change event of all listboxes inside our container
$(document).on('change', '#repeaterContainer select', function(){
    alert(this.value);
});

Open in new window

http://jsfiddle.net/AlexCode/0pbqmrwd/1/
Sorry if the fiddle demo doesn't have a repeater but I can't give if a working .net sample.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike MillerSoftware EngineerAuthor Commented:
Got the value, thanks!
0
Mike MillerSoftware EngineerAuthor Commented:
jQuery question relating to the same code if you're interested:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28571740.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.