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
661 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now