Displaying a loading screen on button click

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 86609 Views - Last Post: 29 April 2011 - 10:50 PM Rate Topic: -----

#1 RedRabbit   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 71
  • Joined: 09-May 10

Displaying a loading screen on button click

Posted 26 April 2011 - 01:13 AM

I have to deliver a loading screen by today but the current code I've been given to work with is a bit funny and
would appreciate any help cause I can't find anything.

To explain the process....

When user clicks search:

1. Form is posted with values to server
2. Search process starts
3. Results are written to a html table
4. Javascript function is called to refresh the page on client side **
5. Process terminates and causes refresh for the second time on client side
6. Results are displayed in an accordion

** On the client page during the first refresh jquery puts the table in an accordion

My task is to create a loading screen that shows the server is currently busy while the above is taking place
because the way the app works now it had our first user very confused (not surprising).

I suggested dropping the javascript all together and creating an asp.net accordion which I got working last week
thanks to Nakor(Thanks again!) on this forum, but the lead developer told me its gonna take way too much time to get the accordion working and to display the results dynamically the way it currently does with the jquery.

What I want is any help or suggestions on how I can get this done the quickest way.

I was thinking along the lines of making an async post via ajax to the server and waiting for the response before removing the loading screen but have no idea how to go about this without making major changes to the current code

This post has been edited by RedRabbit: 26 April 2011 - 01:15 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Displaying a loading screen on button click

#2 marinus   User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 02:10 AM

To display a loading div\image is easy ,

do this

on you asp.net button , add this code

OnClientClick="DisplayLoadingDiv()"

J.S

function DisplayLoadingDiv()
{

document.getElementById("MyDivId").style.display = '';//displays the div

/*Inside this div place a loading.gif image*/


}



Do hide this div add this in body tag
<body onload='HideLoadingDiv()'>

Further work on this code

function DisplayLoadingDiv()
{

 document.getElementById("MyDivId").style.display = '';

//displays the div

/*Inside this div place a loading.gif image*/


}
function HideLoadingDiv()
{

  document.getElementById("MyDivId").style.display 'none'; 

//Hide the div

}




To disable a button after its been clicked , and working you can follow this tutorial of mine

http://www.dreaminco...-in-javascript/

This post has been edited by marinus: 26 April 2011 - 03:48 AM

Was This Post Helpful? 1
  • +
  • -

#3 RedRabbit   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 71
  • Joined: 09-May 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 03:36 AM

Thanks marinus Im busy going through the code you posted, much appreciated.
Was This Post Helpful? 0
  • +
  • -

#4 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 04:58 AM

If you're using an UpdatePanel then you can use the UpdateProgress control to display a loading screen.

UpdateProgress Control Overview

This control has a Template section where you can define you're loading screen using standard html. It will automatically display the template when an ajax call is made to the server. It also allows you to set a delay on it so that it won't show on ajax calls that are very quick.
Was This Post Helpful? 0
  • +
  • -

#5 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 05:05 AM

If you are not using UpdatePanels and just using JQuery for the ajax calls then Marinus approach would be best, although I'd make use of JQuery in writing the javascript functions as well

function DisplayLoadingDiv(id)
{

 $(id).css({"display":"block"});

//displays the div

/*Inside this div place a loading.gif image*/


}
function HideLoadingDiv(id)
{

  $(id).css({"display":"none"}); 

//Hide the div

}


Just pass the id of the div you want to hide or display to each of the methods. If you're using JQuery's $.ajax to make the ajax call then use the "complete" callback to execute the HideLoadingDiv function. I don't remember if $.post has a similar callback function.

This post has been edited by Nakor: 26 April 2011 - 05:13 AM

Was This Post Helpful? 0
  • +
  • -

#6 RedRabbit   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 71
  • Joined: 09-May 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 05:15 AM

I want to use an update panel the problem with the div method is that the page refreshes twice before it loads the accordion, the current code is soooo messed up to work with!
Was This Post Helpful? 0
  • +
  • -

#7 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 05:20 AM

what's causing the page refreshes?

oh and just realized if you're using jquery you could just do

$('div_ID').hide();
//and
$('div_ID').show();



to hide and display an element by it's ID, it's still a little early for me :P

This post has been edited by Nakor: 26 April 2011 - 05:21 AM

Was This Post Helpful? 0
  • +
  • -

#8 marinus   User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 05:21 AM

Quote

I want to use an update panel the problem with the div method is that the page refreshes twice before it loads the accordion, the current code is soooo messed up to work with!

This should not happen ...

Can you provide us with you .aspx page code??


To use the update panel refer to this link

http://forums.asp.net/t/1448287.aspx
Was This Post Helpful? 0
  • +
  • -

#9 RedRabbit   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 71
  • Joined: 09-May 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 05:38 AM

You see the screw up is the page is tied to a shopping cart.

What happens is this

When a user searches the server calls this refresh script...Ok just realized its not even a page refresh its a form submit!!

function pageRefresh()
{
document.formLand.submit();
}


var TSort_Data = new Array ('table1', 's');

/*what does this part below do*/
tsRegister();


The above gets called from the server with the following at the very end of the button click event:

                If (Not ClientScript.IsStartupScriptRegistered("Refresh")) Then

                    Page.ClientScript.RegisterStartupScript(Me.GetType(), "Refresh", "pageRefresh();", True)

                End If


I tried removing it the screw up its tied to a shopping cart. When the accordion loads it has a button "Add to cart" so you can add the item, If I remove this script the above screws up it doesn't add onclick.....Just realized something.

And Thanks a load for the help guys :)

Nakor if I were you I would go back to bed!!
Was This Post Helpful? 0
  • +
  • -

#10 marinus   User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 05:50 AM

the submit function also does a postback , this is why the page refreshes 2 times.


What happend when you try this

function pageRefresh()
	{
	document.formLand.submit();

        return false;

	}


and then where this function gets called .

 return pageRefresh()


BTW..

tsRegister();


That code is calling a function somewhere in you're script's, i dont know where that function is but , that is it's purpose

This post has been edited by marinus: 26 April 2011 - 05:52 AM

Was This Post Helpful? 1
  • +
  • -

#11 RedRabbit   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 71
  • Joined: 09-May 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 06:01 AM

Going to try that now and I will get back to you! :scooter:
Was This Post Helpful? 0
  • +
  • -

#12 RedRabbit   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 71
  • Joined: 09-May 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 06:34 AM

Marinus it worked! :stuart:

Now I have to sort out the other part, adding to cart stopped working!!

You would think what does this have to do with adding to cart!!!

This application they working on here is soo messed up its not even funny, I dont think Im gonna be sticking around this place for too long!

I bet you would cringe if you had to see the code Im working on!

Thanks for the help to you and Nakor! :tup:

This post has been edited by RedRabbit: 26 April 2011 - 06:35 AM

Was This Post Helpful? 0
  • +
  • -

#13 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 06:49 AM

You can't do a return false on the form submit or the form won't submit. Using return false prevents it from sending to the server.
Was This Post Helpful? 2
  • +
  • -

#14 marinus   User is offline

  • D.I.C Addict
  • member icon

Reputation: 138
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 07:04 AM

Nakor is right ,

this might be the add to chart submit button that has been canceled by return false;
Was This Post Helpful? 0
  • +
  • -

#15 Nakor   User is offline

  • Professional Lurker
  • member icon

Reputation: 448
  • View blog
  • Posts: 1,504
  • Joined: 28-April 09

Re: Displaying a loading screen on button click

Posted 26 April 2011 - 07:04 AM

Also the registerclientscript methods only register the scripts with the scriptmanager, they will not cause the script to automatically execute. And simply having a button that calls that function should not cause it to execute either unless there is an onload event somewhere that is calling that method
Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2