gulam
Posts: 55
|
| Posted: 12/27/2012, 12:58 PM |
|
Hi,
I have a search form that fetches records from a huge db and this process takes some time. I need to display a message like "Please...processing" when someone clicks on search.
I tried using panels with ajax hide/show feature but I am somehow failing to get this to work. Can someone guide me on how to achieve this.
Thanks
Gulam
|
 |
 |
SecureCloud
Posts: 51
|
| Posted: 01/02/2013, 11:20 AM |
|
i am also interested in this...
kinda like a jQuery Loading...
maybe a snippet to add-in, not just for searches, but even large recordsets displaying.
Maybe loading, or a progressbar of some sort...
One of you advanced CCS5 guys can answer this...
maybe an example and how and where to place it would help too...
_________________
-------------------------------------------------------------------------------------------------
If this helped You, Please Donate to SecureCloud Here, ANY amount Accepted.
http://securecloud.biz/donate/
Thank You, Your help Keeps us Going.
|
|
|
|
Lucius
Posts: 220
|
| Posted: 01/09/2013, 7:05 AM |
|
Hi,
What I did for full page load:
1. HTML
Put 2 divs in your page, preferably near <BODY> tag:
<div id="page_modal">
<div id="page_loader">
</div>
</div>
2. CSS
Put those 2 in your CSS file:
#page_modal {
background-image: url("/gfx/common/loader_bkg.png");
background-position: center center;
background-repeat: repeat;
background-color: transparent;
display: inline;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
}
#page_loader {
background-image: url("/gfx/common/preloader.gif");
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
display: inline;
width: 100%;
height: 100%;
position: absolute;
z-index: 1001;
}
First div contains some background small, semi-transparent png file. Second one is a "Loading..." animation in a gif.
Now the tricky part, you need to edit the UpdatePanel JS file (did I mention that the whole Grid/Record/Page should be under Update Panel?) 
Go to /js/pt/ and edit ajaxpanel.js
find, 2 functions: "_showProgress: function() {" and "_hideProgress: function() {" and make the code like so:
_showProgress: function() {
if ($("page_modal") != null) {
return false;
}
var progressSpan = document.createElement("div");
progressSpan.style.position = "fixed";
progressSpan.style.zIndex = 1000;
progressSpan.style.top = "0px";
progressSpan.style.right = "0px";
progressSpan.id = "page_modal";
progressSpan.innerHTML = "<div id=\"page_loader\"> </div>";
document.body.appendChild(progressSpan);
},
_hideProgress: function() {
if ($("page_modal") == null) {
return false;
}
document.body.removeChild($("page_modal"));
},
This will make your "Loading.." appear and disappear just like standard small, red, upper-right corner Loading does on Update Panel, just with more bling 
|
|
|
|
|
