on click asp.net button in a listview

Question

<asp:ListView runat="server" ID="lsvAccessMode" ClientIDMode="Static" OnItemDataBound="lsvAccessMode_ItemDataBound">
     <ItemTemplate>
        <div class="col-xs-6 col-md-4 col-xs-12">
            <asp:RadioButton runat="server" clientidmode="static" CssClass="customSelectBox disabled" ID="rbAccessMode" GroupName="accessMode" Enabled='<%#Convert.ToBoolean(Eval("IsSelected"))%>'  />
            <div class="customBox disabled" id="customBox">
                <strong><%# Eval("Decode1") %></strong><br>
                <img src="<%# Eval("ImagePath") %>" style="height: 80px"><br>
                <span class="help-block"><%# Eval("Decode2") %></span>
            </div>
        </div>
     </ItemTemplate>
</asp:ListView>

I have the following code above. So when i click one of the buttons above, it will append a class to it. But I am facing the following problem, i do not know what to insert into id portion of the $(' ').click function.

Anyone able to help?

it contains three radio button and i am unsure what to put in the $(' ').click bracket. Usually we put the id name then .ClientID but it does not work here. — Hero1134, Oct 10 '16 at 12:30

Ted · Answer 1 · 2016-10-10T12:33:51.283

0

Why not use the css class?

$('.customSelectBox')

e.g.

// attach the handler on the DOM to include all dynamically generated controls, too
$(document).on('click', '.customSelectBox', function() {
   // to get the one that was clicked
   var $this = $(this);
   // do the rest 
});

edited Oct 10 '16 at 12:33

answered Oct 10 '16 at 12:31

Ted

3,985
1
20
33

@Hero1134 - yes it is. post your problematic code rather than just saying "it's not working" – Ted Oct 10 '16 at 12:35
Yea, i did. I implement an alert('hello') to check. But it isn't working on my side. Thanks. – Hero1134 Oct 10 '16 at 12:36
@Hero1134 - are you trolling me? show us the **code** that doesn't work by editing your question – Ted Oct 10 '16 at 12:37
Because it's running as part of a data bound template is it possible that the html written out by the asp.net server has a different id because there are multiple radio buttons? Maybe you can cut and paste the html the server actually generates. Or add a generic jquery function like the one in this article to figure out the id when you click on any radio button? https://stackoverflow.com/questions/18680735/how-to-get-the-id-of-the-element-clicked-using-jquery – Joel Oct 10 '16 at 12:46
@joel that's why I'm suggesting the use of the css class – Ted Oct 10 '16 at 12:49
I agree, your class reference should work. A sample of the code would help. – Joel Oct 10 '16 at 12:52

score 0 · Answer 2 · answered Oct 10 '16 at 12:34

0

use partial id like below

$('[id*="rbAccessMode"]').click(
    function() { $(this).addClass("yourClass");
});

answered Oct 10 '16 at 12:34

Imad

7,126
12
55
112

score 0 · Answer 3 · answered Oct 10 '16 at 12:59

You cannot use the ID for assigning a function to the click event for 2 reasons.

You use ClientIDMode="Static", so there will be muliple ID's on the page with the same value.

Even if you would remove ClientIDMode="Static", you are still not able to use the ID rbAccessMode because it is in a Control that repeats data, rbAccessMode will be turned into something like this lsvAccessMode_rbAccessMode_2 to ensure there are no duplicate ID's.

Remove all the ClientIDMode="Static" attributes and assign the click event based on the class name.

    <script type="text/javascript">
        $(".customSelectBox").click(function () {
            $(this).addClass("yourClass");
        });
    </script>

Hero1134 · Answer 4 · 2016-10-11T04:19:03.963

Thank you everyone, I managed to solved the question with all your help. Thanks to Joel and Ted's suggestions, I have changed the DOM structure of my code. Thanks to VDWWD, I have removed the ClientIDMode="Static" and got it working. Below is my working code.

    $(document).on('click', '#selectorBox', function () {
        $(this).children().addClass('active');
    });


<asp:ListView runat="server" ID="lsvAccessMode" ClientIDMode="Static" OnItemDataBound="lsvAccessMode_ItemDataBound">
 <ItemTemplate>
     <div id="selectorBox" class="col-xs-6 col-md-4 col-xs-12" runat="server" clientIDMode="Static">
         <asp:RadioButton runat="server" CssClass="customSelectBox disabled" ID="rbAccessMode" GroupName="accessMode" Enabled='<%#Convert.ToBoolean(Eval("IsSelected"))%>'  />
             <div class="customBox disabled" id="customBox">
                <strong><%# Eval("Decode1") %></strong><br>
                   <img src="<%# Eval("ImagePath") %>" style="height: 80px"><br>
                       <span class="help-block"><%# Eval("Decode2") %></span>
              </div>
      </div>
</ItemTemplate>

I added an additional ID in the parent class So instead of calling the button directly, I called its parent then navigate down using the .children() method. Thank you all once again. Hope my post could help people especially beginners who are new to asp.net.

on click asp.net button in a listview

4 Answers4