ASP.NET - Displaying a div on clientClick

feesu
feesu used Ask the Experts™
on
Hi experts,
I have an asp standard button that does some routine in the codebehind, but I wish to have this button show a loading panel once its clicked. And I think that the loading panel would look better if it was called from client side, so I created the below javascript function, and called it on clientClick of the button. Below are the Div definition, the button definition, and the function. It is not working as expected!

-----------------------------------------------------------------------------------
Function
-----------------------------------------------------------------------------------
function ShowDiv() {
    var div = document.getElementById('div_loading');
    var left = (screen.width/2)-(div.width/2);
    var top = (screen.height/2)-(div.height/2);
    div.syle="display:inline;";
    div.top=top;
    div.left=left;
}
-----------------------------------------------------------------------------------
Button
-----------------------------------------------------------------------------------
                                        <asp:Button
                                            ID="btn_upload"
                                            runat="server"
                                            CausesValidation="False"
                                            CssClass="button"
                                            Text="Upload"
                                            OnClientClick="ShowDiv();"  
                                            >
                                           
                                        </asp:Button>
-----------------------------------------------------------------------------------
Div
-----------------------------------------------------------------------------------
                        <div id="div_loading" class="loadingPanel"
                                style="position:absolute; top:315; left:368; height:100;width:300; display:none;">
                                <table width="100%px">
                                <tr>
                                    <td>
                                    Please wait while we upload your photo and create your canvas.<br>
                                    This may take up to 60secs, for larger images.
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src="images/loading1.gif" style="width: 51px; height: 7px" />
                                    </td>
                                </tr>
                                </table>
                        </div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try like this

BUTTON

<asp:Button ID="btn_upload" runat="server" CausesValidation="False" CssClass="button" Text="Upload"
                        ></asp:Button>

DIV


<div id="div_loading" class="loadingPanel" style="DISPLAY:none; ">
                        <table width="100%">
                              <tr>
                                    <td>
                                          Please wait while we upload your photo and create your canvas.<br>
                                          This may take up to 60secs, for larger images.
                                    </td>
                              </tr>
                              <tr>
                                    <td>
                                          <img src="images/loading1.gif" style="WIDTH: 51px; HEIGHT: 7px">
                                    </td>
                              </tr>
                        </table>
                  </div>

Javascript Function


function ShowDiv() {
            
    var div = document.getElementById('div_loading');
    var left = (screen.width/2)-(div.width/2);
    var top = (screen.height/2)-(div.height/2);
    div.style.display="inline";
    div.top=top;
    div.left=left;
}


In Codebehind on Page_Load

                  btn_upload.Attributes.Add("onclick", "ShowDiv()");  
                  

Commented:
var left = (screen.width/2)-(div.width/2);
    var top = (screen.height/2)-(div.height/2);
div.syle="display:inline;";
    div.top=top;
    div.left=left;

should be

var left = (screen.width/2)-(div.style.width/2);
    var top = (screen.height/2)-(div.style.height/2);
div.syle.display="inline";
  div.style.top=top;
  div.style.left=left;

Open in new window


but , your button will call this JS Function and will then execute the server side call atonce and hence will post back.. so the div wont display..


so check the following links

http://www.codeproject.com/KB/aspnet/FileUploadingWithLoading.aspx
http://www.ezzylearning.com/tutorial.aspx?tid=8964873
http://codeclimber.net.nz/archive/2007/05/17/how-to-make-a-gmail-like-loading-indicator-with-asp.net-ajax.aspx

Author

Commented:
pratima_mcs,
The code did not change anything, I still don't see that Div.

dejaanbu,
I have the upload control, but showing that div on clicking the button because it does some functions and takes long time if the uploaded image is big, so keeping the user waiting, I wanted to show that loading div in between. So do you still insist that I should read these links?
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Commented:
exactly,  those links are examples of showing loading image when a server process happens.. just check them,  if u have any pbms , let us know.

Author

Commented:
Well yes, actually the Div is showing but not in the center of the screen. Is there anything wrong with the logic of that function?
put this code in cod behind

private void btn_upload_Click(object sender, System.EventArgs e)
            {
                  
                  for(int i=0; i<250000; i++)
                                                  {
                  Response.Write("run");
                  }
                  
            }

Div will display till the process completes in , hide afterwords

Commented:
which of the links you are following ? and did u try changing the javascript as i suggested?
Commented:
try centering the div to center of the screen in normal state(just for making sure it is in center of the screen), instead of using javascript
Commented:
remove the style attribute for loading div and give css like this

.loadingPanel{
height: 100px;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: absolute;
    top: 50%;
    width: 300px;
}

Open in new window



<table width="100%px">  remove "px" here

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial