clahti2
Posts: 107
|
| Posted: 02/15/2012, 1:41 PM |
|
So CCS seems to be a bit fragile when it comes to mucking around with the javascript stuff in html mode, so for those of you looking for a working solution to update a grid based on a timer here is how I solved it. The biggest use case for this is data that is inserted into the database from an outside process will magically appear on your grid in the specified interval, without a page refresh ( Ajax is so cool  ). Let's say your page name is mytest.ccp, this example assumes you have two update panels called Panel1 and Panel2, with a grid inside each panel.
First create a page and drop your update panels onto it. Then place your grid(s) in the update panels. Create a javascript file called js/mytestTimer.js and place the following javascript code inside (notice the interval of 10 seconds, this is adjustable by you of course):
// JScript source code
var secs
var timerID = null
var timerRunning = false
var delay = 1000
function InitializeTimer()
{
// Set the length of the timer, in seconds
secs = 10
StopTheClock()
StartTheTimer()
}
function StopTheClock()
{
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function StartTheTimer()
{
if (secs==0)
{
StopTheClock()
// fire the update panel refresh
AjaxPanel.reload($("Panel1"));
AjaxPanel.reload($("Panel2"));
//restart timer
InitializeTimer()
}
else
{
self.status = secs
secs = secs - 1
timerRunning = true
timerID = self.setTimeout("StartTheTimer()", delay)
}
}
No back to your mytest.ccp page in hmtl view, add the following line just before </head>
<script language="JavaScript" src="js/mytestTimer.js" type="text/javascript"></script>
Finally you need to call the InitializeTimer() function, this is accomplished by placing this as the last line of the "function bind_events()" autogenerated by CCS:
InitializeTimer();
That's it! I am sure you could further abstract this to work on multiple pages by passing the panel name to the function but I am too lazy to work more on this since it is working for me :)
Enjoy!
|
