Search code examples
asp.netwebformsfont-awesomeupdatepanel

Click on FontAwesome icon cause Full Postback in asp.net


I have some pages in Asp.Net webforms with some update panel (with UpdateMode="Conditional") and inside it an asp:LinkButton with inside a fontawesome icon like this

<asp:LinkButton ID="btn" runat="server" CssClass="btn btn-success  btn-responsive">
    <span aria-hidden="true" class="fa fa-user-circle"></span> Foo
</asp:LinkButton>

When i click precisely on the icon the page goes full postback and and non partial postback as I expect

Searching i understand that the problem might be event propagation, so i create a script like that:

$('.fa').click(function (event) {
    event.stopPropagation();
    if (!(this.parentNode === null)) {
        this.parentNode.click();
    }
});

This works for html button with runat="server" tag, but not working with asp:linkbutton, also i have thousand of link button and i can't override them all. Any suggestion?

Best regards

UPDATE:

Here is the page:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Iscr.aspx.vb" Inherits="Iscr" %>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="UpdatePanelIscr" UpdateMode="Conditional" >
    <ContentTemplate>

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

            prm.add_endRequest(function () {
                load();
                loadScript();
            });

            $(document).ready(function () {
                loadScript();
            });

            function loadScript() {

            }

        </script>

    ...form....

        <div class="floatingButtonBar">
    <asp:LinkButton ID="btn" runat="server" CssClass="btn btn-success  btn-responsive">
            <span aria-hidden="true" class="fa fa-user-circle"></span> Foo
        </asp:LinkButton>
        </div>

    </ContentTemplate>
</asp:UpdatePanel>


Solution

  • Change your update panel attribute called UpdateMode to Conditional

    Example :

     <asp:UpdatePanel UpdateMode="Conditional" ID="UpdatePanel1" runat="server">
    

    Update:

    Also make sure that page directive ClientIDMode is AutoID Example :

    <%@ Page Title="" ClientIDMode="AutoID" Language="C#"%>
    

    Update :

    Seems that ClientIDMode="Static" is not working with update panel , please check the fix : Possible solution to UpdatePanel and ClientIDMode="Static"