?
Solved

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?

Posted on 2014-11-29
7
Medium Priority
?
790 Views
Last Modified: 2014-11-30
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
Comment
Question by:Mike Miller
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40472453
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
 

Author Comment

by:Mike Miller
ID: 40472475
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
 
LVL 43

Expert Comment

by:Rob
ID: 40472501
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Mike Miller
ID: 40472558
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
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 40472581
@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
 

Author Closing Comment

by:Mike Miller
ID: 40472631
Got the value, thanks!
0
 

Author Comment

by:Mike Miller
ID: 40472645
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question