asked on

ASP.NET - Displaying a div on clientClick

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>

Pratima

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()");

Deja Anbu

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

feesu

ASKER

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?

Deja Anbu

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.

feesu

ASKER

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?

Pratima

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

Deja Anbu

which of the links you are following ? and did u try changing the javascript as i suggested?

ASKER CERTIFIED SOLUTION

Deja Anbu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Deja Anbu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial