Link to home
Start Free TrialLog in
Avatar of Member_2_1242703
Member_2_1242703

asked on

Show/Hide ASP.NET controls with JQuery best practices

I'm currently hiding an ASP.NET panel on load using the following

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= pnlNewPlayer.ClientID %>").hide();
    });
</script>

Open in new window


Then I show it based on a dropdown change (based on the return of a webmethod), hide it again with a cancel button using...

<script type="text/javascript">
    function clearThis() {
        $("#<%= pnlNewPlayer.ClientID %>").hide();
    };
</script>

Open in new window


I'm trying to figure out how to control showing and hiding on postback after the initial load? Obviously with my setup, the panel will be hidden on every post back. What is the best way to control showing and hiding a control?
Avatar of Rajar Ahmed
Rajar Ahmed
Flag of India image

There are many option available , some are shown below :

  • If you are okay with Update Panel :

<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div align="center">
        <h1>
            Click the button to see the UpdateProgress!</h1>
        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
    </div>
</ContentTemplate>
</asp:UpdatePanel>

Open in new window


Complete Source :
http://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx


  • Web Method : Ajax method will take care of all this .

 search: function (e, u) {
                $(this).addClass('loader');
            },

response: function (e, u) {
                $(this).removeClass('loader');
            }

Open in new window


http://www.aspsnippets.com/Articles/Display-Loading-Animated-GIF-Image-Progress-Indicator-in-jQuery-AutComplete-Textbox.aspx

  • Simple Example which can be configured as per your need :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).ajaxStart(function(){
        $("#wait").css("display", "block");
    });
    $(document).ajaxComplete(function(){
        $("#wait").css("display", "none");
    });
    $("button").click(function(){
        $("#txt").load("demo_ajax_load.asp");
    });
});
</script>
</head>
<body>

<div id="txt"><h2>Let AJAX change this text</h2></div>

<button>Change Content</button>

<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='demo_wait.gif' width="64" height="64" /><br>Loading..</div>

</body>
</html>

Open in new window

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxcomplete

Drop your queries for further assistance .

Thanks
Rajar
ASKER CERTIFIED SOLUTION
Avatar of Kyle Abrahams, PMP
Kyle Abrahams, PMP
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Member_2_1242703
Member_2_1242703

ASKER

No way...that was too easy. Thanks!
FInal solution was I added this to my page load:

ClientScript.RegisterClientScriptBlock(Me.GetType(), "isPostBack", String.Format("var isPostback = {0};", IsPostBack.ToString().ToLower()), True)

Then just changed my document ready script to:

<script type="text/javascript">
    $(document).ready(function () {
        if (isPostback) {
            // Postback specific logic here
        }
        else {
            $("#<%= pnlNewPlayer.ClientID %>").hide();
        }
    });
</script>