• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 887
  • Last Modified:

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?
0
Mike Miller
Asked:
Mike Miller
  • 4
  • 2
1 Solution
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now