Search code examples
jqueryasp.netlistviewupdatepanellinkbutton

Why the element shows again when I hide it using jquery


I have a listview control in web page and in listview, I have a LinkButton. My LinkButton inside updatepanel control. When I click on LinkButton, Counter field +1. I use ClientIDMode="AutoID" for my page does not full postpack. Now, I want when click on LinkButton, display of LinkButton be equal 'none'. For this, I use script below:

<script type="text/javascript">
function updateTextArea() {
    $('.like').on('click', 'a', function () {
        $(this).hide();
    });
}

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(updateTextArea);
</script>

Now, my problem is: When i click on LinkButton, LinkButton is hide and show again. Where is my fault. Please help me. Thank a lot.

This is my aspx code:

<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="title"><span><%# Eval("Title")%></span></div>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
                            <div class="like"><asp:LinkButton ID="LikeLBTN" runat="server" ClientIDMode="AutoID" OnClientClick="updateTextArea()" CommandName="Like" CommandArgument="<%# Bind('GalleryID') %>"><i class="fa fa-thumbs-o-up"></i><span><%# Eval("Counter")%></span></asp:LinkButton></div>
                            </ContentTemplate></asp:UpdatePanel>
                        </div>
                    </li>
                </ItemTemplate>
            </asp:ListView>

Solution

  • This is happing due to auto-post feature of asp.net controls.Update your java-script function, rest code will same.

    function updateTextArea() {
            $('.like').on('click', 'a', function () {
                $(this).hide();
                return false;
            });
        }