ASP.NET show div on button click

Question

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" />

the div is set to runat server so that I can change its visibility also through code.

Did you check whether in the HTML generated by ASP.NET, the button retains the ID specified in the aspx file? I am 100% sure that the ID you see in the file is not the same one it'll have in the page when the button is part of a custom user control. — Geeky Guy
– Geeky Guy, Commented Jul 22, 2013 at 20:30
Note: The ID is a server control is not [usually] the same as the ClientID. The ClientID (aka DOM ID) uses the control ID, the control hierarchy, and mapping rules to create the derived ClientID. — user2246674
– user2246674, Commented Jul 22, 2013 at 20:32
from both sides for validation in case javascript is turned off — user1986761
– user1986761, Commented Jul 22, 2013 at 20:35
Do you want to do this server or client side? If you want client side you need to not use the onClick because it will look in the code behind for the function and run that; instead use onClientClick and make your jquery a function with a name and call the name. If you do want server side, please show us the server side code. — B-M
– B-M, Commented Jul 22, 2013 at 20:41

B-M · Accepted Answer · 2013-07-22 20:54:38Z

3

Use the onClientClick for the asp button. Then make the jquery function that you ahve called BtnSend_Click

If you want to do it via Client side:

jQuery

function BtnSend_Click () {
     $('#<%= loading.ClientID %>').toggle("slow");
}

ASP Button

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

If you want to do it via the server:

C#

protected void BtnSend_Click(object sender, EventArgs e){
     loading.Visibility = 'visible' //not sure on syntax to show it in code behind off the top my head
}

ASP Button

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

edited Jul 22, 2013 at 20:54

answered Jul 22, 2013 at 20:31

B-M

1,2881 gold badge21 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jim · Accepted Answer · 2013-07-22 20:32:11Z

0

The ASP.Net AJAX library has an UpdateProgress control that sounds like it would fit your needs.

answered Jul 22, 2013 at 20:32

Jim

6,88113 gold badges48 silver badges72 bronze badges

Comments

rtpHarry · Accepted Answer · 2013-07-22 20:45:16Z

0

I've tried adding in a prevent default, as the code as described below would postback before the loading div was shown otherwise.

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

Another thing I've noticed is you have set Visible="false":

<div id="loading" class="Loading" runat="server" visible="false">

This means the div doesn't exist as its not output from the server side. Look in the view source when the page loads, it wont be there and hidden, its just not there. Remove the visible="false" and use CSS to hide it to start off with.

edited Jul 22, 2013 at 20:45

answered Jul 22, 2013 at 20:30

rtpHarry

13.2k4 gold badges45 silver badges64 bronze badges

5 Comments

user1986761 Over a year ago

its just a css class to customise the div. still not working though.

rtpHarry Over a year ago

oh i see now, you did ClientID for the div but not the button! Updating snippet

rtpHarry Over a year ago

actually you have ClientIDMode static so its probably not that, but the visible false issue.

rtpHarry Over a year ago

which one are you referring to?

user1986761 Over a year ago

was refering to your clientID which was set to static. I removed the visible="false" and set style="display:none;" but div still not shown when button is clicked

Collectives™ on Stack Overflow

ASP.NET show div on button click

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related