CODEWITHSUNDEEP
jquerycssasp.netupdatepanel
Richu R
Richu R

Reputation: 71

Css class changes to its initial state when update panel of asp.net triggers

Hi I have a search control div which shows only when I clicked on the anchor tag for showing the search div. Same time I changing the filter icon placed within the anchor tag get updated to close icon. I achieved it using toggleClass method. My problem is when ever the update panel updates its content or postback occurs, the icon resets to the first filter icon, thus mismatches the logic of its own existence note that I added all these controls inside the asp.net update panel. Here is my code snippet. 

 <asp:UpdatePanel runat="server" ID="Up1">
        <ContentTemplate>

            <div class="row">
                <div class="col-lg-4">
                </div>
                <div class="col-lg-4">
                </div>
                <div class="col-lg-4 text-right">
                    <a id="SearchControl" href="#"><i id="SearchIcon" class="fa fa-filter"></i>&nbsp;Search</a>
                </div>
            </div>
            <div id="filterControlDiv" class="row">
                <div class="col-lg-12 bg-secondary" style="height: 150px;">
                </div>

            </div>
            <div class="row">
                <div class="col-lg-12">
                    <asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
                    </asp:GridView>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

and the script used is,

 [![<script>
        $(function () {
            InitialSearch();

            $('#SearchControl').click(function ()
            {
                $('#filterControlDiv').slideToggle();
                $('#SearchIcon').toggleClass("fa-filter fa-times");
            });
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            $('#SearchControl').click(function () {
                $("#filterControlDiv").slideToggle();
                $('#SearchIcon').toggleClass("fa-filter fa-times");
            });
        }); 
        function InitialSearch() {
            $('#filterControlDiv').hide();
        }
    </script>][1]][1]

Thanks in advance. enter image description here

enter image description here

Upvotes: 0

Views: 721

Answers (1)

H.Mikhaeljan
H.Mikhaeljan

Reputation: 813

Since this is only a clientside change the server does not recognize it and changes it back to the original. You have to either change this from server side or move the part outside the updatepanel. I guess your using the updatepanel for the gridview so you could just do.

<asp:UpdatePanel runat="server" ID="Up1">
   <ContentTemplate>
       <div class="row">
         <div class="col-lg-12">
            <asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
             </asp:GridView>
         </div>
      </div>
   </ContentTemplate>
</asp:UpdatePanel>

Upvotes: 1

Related Questions