Access ASP.NET controls dynamic client ID in jQuery

Question

I have a hyperlink that's being generated dynamically. In addition I have a "p" tag that's being generated dynamically too, but it's hidden. I've attached IDs to both of them and want to use jQuery for the click event. When a user clicks on the hyperlink, it will show that only P tag above it. Normally, I would just add the ending part of the ID, but since you have two dynamic IDs generating, how would you connect them together without triggering others? Down below is a sample of my code:

<asp:ListView runat="server"...>
  <ItemTemplate>
    <p id="MsgClick" runat="server">You have click on this button></p>
    <asp:HyperLink ID="label" runat="server" NavigateURL='<%#Eval("Link")%>' Target="_blank" Text="Click Here"></asp:HyperLink>
  </ItemTemplate>
</asp:ListView>

<script type="text/javascript">
  $(document).ready(function(){
    $([id$='MsgClick']").hide();
    $("[id$='label']").on('click', function() {
      $("[id$='MsgClick']").show();
    })
  });
</script>

Shadi Shaaban · Accepted Answer · 2016-05-26 19:07:08Z

1

Use Class selector instead of Id:

<asp:ListView runat="server"...>
  <ItemTemplate>
    <p id="MsgClick" class="MsgClick" runat="server">You have click on this button</p>
    <asp:HyperLink ID="label" class="label" runat="server" NavigateURL='<%#Eval("Link")%>' Target="_blank" Text="Click Here"></asp:HyperLink>
  </ItemTemplate>
</asp:ListView>

<script type="text/javascript">
  $(document).ready(function(){
    $(".MsgClick").hide();
    $(".label").on('click', function() {
      $(this).prev(".MsgClick").show();
    })
  });
</script>

answered May 26, 2016 at 19:07

Shadi Shaaban

1,7081 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kluong Over a year ago

Thanks. This work. What happens if the P tag is not above the link/button and it's somewhere else?

Shadi Shaaban Over a year ago

If it's not directly above the link button and say in the same container, you could find it using the parent() - just make sure to put both of them inside one container like a <div>: $(this).parent().find(".MsgClick").show();

johnniebenson · Accepted Answer · 2016-05-26 18:48:51Z

0

You don't have to rely on id to accomplish this. jQuery provides different methods of traversing the DOM. Also, you can hide the <p> with CSS and not rely on JS.

For example:

$("a").on("click", function() {
    $(this).prev("p").show();
});

http://codepen.io/johnniebenson/pen/QELzLL

answered May 26, 2016 at 18:48

johnniebenson

5403 silver badges9 bronze badges

Collectives™ on Stack Overflow

Access ASP.NET controls dynamic client ID in jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related