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
694 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:mwmiller78
  • 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:mwmiller78
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 42

Expert Comment

by:Rob Jurd, EE MVE
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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

Author Comment

by:mwmiller78
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 500 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:mwmiller78
ID: 40472631
Got the value, thanks!
0
 

Author Comment

by:mwmiller78
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

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

773 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