0

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
29
Views
4 Years
Discussion Span
Last Post by arun1123
0

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

0

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.

0

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

0

Have you tried the jQuery Toggle

$('#< %= btnName.ClientID %>').click(function() {
    $('#DivId').slideToggle('slow');
});

Edited by ggamble: minify

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.