单击按钮显示Div

Question

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#)?

Answer 1

You have to select jQuery version from left menu, jsFiddle does not support to interpret asp.net code and generate html as asp.net engine do.

Live Demo

$(document).ready(function (e) {
    $('#BtnSend').click(function () {
        $('#loading').slideToggle("slow");
    });
});

If you are trying to do same in asp.net and your BtnSend is server control which does not have ClientIDMode set to static then you will need to use ClientID to bind event.

$(document).ready(function (e) {
    $('#<%= BtnSend %>').click(function () {
        $('#<%= loading.ClientID %>').slideToggle("slow");
    });
});

The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains, Reference .