CODEWITHSUNDEEP
javascriptasp.net
Anjali
Anjali

Reputation: 2708

show and hide panel on the click of the asp:button

My panel is originally hidden. I want to show the panel on the click of the <asp:button. Below is my code:

 <asp:Button ID="btnSubmit" runat="server" Text="Submit"  Width="167px" 
             data-icon="check" OnClick="btnSubmit_Click" 
             OnClientClick="showProgress();"     />

My panel code is like so:

 <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" Visible="false">
        <div id="imageDiv">
            <div style="float: left; margin: 9px">
                <img src="Images/loader.gif" id="img1" width="32px"
                     height="32px" style="display:none"/>
            </div>
            <div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
                Loading. Please wait...
            </div>
        </div>
    </asp:Panel>

on button click, I have a javascript function called showProgress() like so:

function showProgress() {
      

            if (Page_IsValid) {
                // panel visible code here
            }

        }

Upvotes: 0

Views: 567

Answers (2)

Purvesh Sangani
Purvesh Sangani

Reputation: 305

You need to add this jquery code and check it's working fine

Also, please add proper your button id and panel id then after working properly

<script type="text/javascript">
            $(function() {
                $("#btnSubmit").click(function(evt) {
                    evt.preventDefault();
                    $('#pnlPopup').toggle('fast');
                });
            });
    </script>

Upvotes: 0

Hainan Zhao
Hainan Zhao

Reputation: 2092

Instead of using Visible = "false" on your panel, use CSS class instead. That visible = "false" will not render the div in the generated html.

<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress hidden">
...
</asp:Panel>

function showProgress() {          
    if (Page_IsValid) {
      $("div[name$='pnlPopup']").removeClass("hidden");              
    }
    return false; //To prevent triggering of postback
}

Upvotes: 3

Related Questions