Member Avatar for cirbab4

I am trying to show a loading div on button click, but it is not working at the moment.

Javascript :

<script type="text/javascript">
        $(document).ready(function (e) {      
            $('#BtnSend').click(function () {
                $('#<%= loading.ClientID %>').toggle("slow");
            });
        });
    </script>

Div:

<div id="loading" class="Loading" runat="server" visible="false">
  <div class="loadingImg">
    <img src="../Images/loading.gif" alt="loading" />
    </div>
  </div>

button:

<asp:Button ID="BtnSend" runat="server" Text="SEND" 
            onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />

Also how can I call the same javascript code in the jsfiddle above within code (c#)?

  • 5 Contributors
  • 6 Replies
  • 3K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by arun1123

Dani AI

Generated

— the core issue flagged is still the starting point: a Web Forms control with Visible="false" is not emitted to the browser, so client-side code cannot find it. Keep the runat="server" div if you need server access, but render it hidden with CSS (for example style="display:none" or a .hidden class) so it exists in the DOM. See the control Visible docs for details: System.Web.UI.Control.Visible.

Two practical approaches depending on whether you do a full postback or use UpdatePanel async postbacks:

  • Full postback: show the loader immediately on the client using the server control’s OnClientClick. Keep this synchronous (set display or add a class) rather than an animated toggle, because animations may be interrupted by the browser unloading the page. Also consider disabling the button to avoid double submits.
<asp:Button ID="BtnSend" runat="server" Text="SEND"
    OnClick="BtnSend_Click"
    OnClientClick="document.getElementById('<%= loading.ClientID %>').style.display='block'; this.disabled=true;" />
  • UpdatePanel async postbacks: hook the ASP.NET AJAX lifecycle so the loader shows for every partial request. The PageRequestManager beginRequest/endRequest handlers are ideal. If you prefer no code, ’s UpdateProgress suggestion is a simpler alternative.
<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function(){ document.getElementById('<%= loading.ClientID %>').style.display='block'; });
prm.add_endRequest(function(){ document.getElementById('<%= loading.ClientID %>').style.display='none'; });
</script>

To emit client script from server code during partial rendering, use ScriptManager.RegisterStartupScript (ClientScript methods won’t run reliably in async postbacks): ScriptManager.RegisterStartupScript

Accessibility: make the loader discoverable to assistive tech (for example role="status" aria-live="polite" or role="progressbar"). See the WAI ARIA technique notes: ARIA22.

Note: ’s jQuery slide/ toggle ideas work well for client-side UX, but avoid relying on slow animations right before a full postback.

Recommended Answers

All 6 Replies

Member Avatar for JorgeM

The main problem you have here is that you decided to add the runat attribute to the "loading" div, then you also set the visible attribute to "false". This visible attribute is not the same as display="none". With your code, when you run your page, you will notice that if you look at the source code, the "loading" div related HTML is not included... Therefore, that is why the jQuery doesnt seem to work. In your case, there is no "loading" div present in the HTML.

Here is another alternative... remove the runat attribute, but that will also require you to remove the "ClientID" related code in your jQuery block, but that's OK because it looks like you discovered the "ClientIDMode" and set it to false... so you can simply refer to your div's ID in the jQuery block now.

<%@ Page Language="VB"  %>

<script runat="server">
    Protected Sub BtnSend_Click(sender As Object, e As EventArgs)
        ' button related code
    End Sub
</script>

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <style>
            .pressbutton2 { }
            #loading {display:none;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="loading" class="Loading">
            <div class="loadingImg">
                <img src="../Images/loading.gif" alt="loading" />
            </div>
        </div>
        <asp:Button ID="BtnSend" runat="server" Text="SEND" onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />

        <script>
            $(document).ready(function (e) {
                $('#BtnSend').click(function () {
                    $('#loading').toggle("slow");
                });
            });
        </script>
        </form>
    </body>

</html>
Edited by JorgeM
Member Avatar for cirbab4

Thanks for your reply. The runat server is needed to I can access the div from the code and so is the visible = false; so that through code I can set the visiblity of the div.

Member Avatar for JorgeM

so is the visible = false; so that through code I can set the visiblity of the div.

Ok, that's fine then add the runat=server back to the div. However, do not inlcude the visible=false because if you do, the HTML for the div is not generated. Like I said before, the visible attribute should not be used when what you are trying to do is simply hide it. What I would recommend is that you simply set the style to display:none as I included in my example.

Edited by JorgeM
Member Avatar for BMXDad

Have you tried the jQuery Toggle

$('#< %= btnName.ClientID %>').click(function() {
    $('#DivId').slideToggle('slow');
});
Edited by BMXDad because: minify
Member Avatar for arun1123

You can use JQuery to dynamically add or remove any HTML element you can think of. It is really simple and worth trying. In fact you can design an entire web page dynamically using .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.