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
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
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.