how to trigger button click event inside listview with jquery in asp.net?

Question

This is my ListView control:

<asp:ListView ID="PortfolioListView" runat="server" onitemcommand="PortfolioListView_ItemCommand">
  <ItemTemplate>
    <li class="item brick1 <%# Eval(" CategoryName ")%> isotope-item">
      <a class="item-popup" href="Gallery/195x195/<%# Eval(" MainImage ") %>" title="<%# Eval(" ShortDesc ") %>">
        <img src="Gallery/195x195/<%# Eval("MainImage") %>" alt="<%# Eval("Title") %>" />
        <div class="hover">
           <span class="Popup">
            <i class="fa fa-search-plus"></i>
          </span>
           <span><%# Eval("CategoryName")%></span>
        </div>
      </a>
      <div class="bottom">
        <div class="isotope-title"><span><%# Eval("Title")%></span>
        </div>
        <div class="like">
          <a class="update">
            <i class="fa fa-thumbs-o-up"></i>
            <span><%# Eval("Counter")%></span>
          </a>
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
              <div class="flike">
                <asp:LinkButton ID="LikeLBTN" runat="server" CssClass="likeBTN" ClientIDMode="AutoID" CommandName="Like" CommandArgument="<%# Bind('GalleryID') %>">
                  <i class="fa fa-thumbs-o-up"></i>
                  <span><%# Eval("Counter")%></span>
                </asp:LinkButton>
              </div>
            </ContentTemplate>
          </asp:UpdatePanel>
        </div>
      </div>
    </li>
  </ItemTemplate>
</asp:ListView>

I have a LinkButton inside ListView and onitemcommand event of listview trigger by LinkButton(CommandName="Like" CommandArgument="<%# Bind('GalleryID') %>") .

My PortfolioListView_ItemCommand in aspx.cs:

protected void PortfolioListView_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    DBClass dbc = new DBClass();
    int index = int.Parse(e.CommandArgument.ToString());
    string cmd = e.CommandName;
    if (cmd == "Like")
    {
        string selstr = String.Format("Update Gallery set [Counter]=[Counter]+1 where GalleryID = {0}", index.ToString());
        int res = dbc.RunCommand(selstr);
        selstr = String.Format("SELECT GalleryID, Title, MainImage, Counter, ShortDesc, CategoryName FROM Gallery inner join GalleryCat on Gallery.CatID = GalleryCat.CatID Order By PDate desc");
        dbc.LoadInList(PortfolioListView, selstr);
    }
}

I want when click on a tag with class="update" in ListView, Click event of LinkButton trigger and my code in PortfolioListView_ItemCommand event be run. Now How this should be done with jquery or javascript? Thank.

Answer 1

I want when click on 'A' tag with class="update" in ListView, Click event of LiunkButton trigger

Try to add click event to tag a with class update then when the user click you can trigger another click on tag with id #LikeLBTN :

$('body').on('click', '.update', function(){
     $('#LikeLBTN').click();
})

Or i suggest to use another hidden link like :

<asp:LinkButton runat="server" ID="SomeControl" onclick="someControlClicked"
  style="display:none; />

And instead of $('#LikeLBTN').click(); you can call $('#SomeControl').click(); .

Hope this helps.

Answer 2

Usually client ID of an element is different than the id assigned at server. So try fetching clientId first and then try to trigger click.

document.getElementById('<%= LikeLBTN.ClientID %>').click

You can navigate to specific linkButton using class in div .

Following is a sample code using HTML elements:

 $(document).on("click", ".update", function() { var aTag = $(this); var contentPanel = $(aTag).next().find(".contentPanel"); var flike = $(contentPanel).find(".flike"); var linkBtn = $(flike).find('.linkBtn'); linkBtn.click(); }) $(document).on("click", ".linkBtn", function() { console.warn("Button clicked"); }) 

 div { margin: 5px; padding: 5px; border: 1px solid gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class="update">Link</a> <div class="updatePanel"> <div class="contentPanel"> <div class="flike"> <button class="linkBtn">Button</button> </div> </div> </div>