CODEWITHSUNDEEP
c#javascriptasp.net
user1986761
user1986761

Reputation: 229

Show Div on Button Click

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

Upvotes: 0

Views: 1697

Answers (1)

Adil
Adil

Reputation: 148120

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.

enter image description here

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.

Upvotes: 5

Related Questions