CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Auto Refresh Ajax Update Panel HowTo

Print topic Send  topic

Author Message
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!
View profile  Send private message
denkoupny

Posts: 1
Posted: 02/25/2012, 11:46 PM

Hi, clahti2.
Can you help me. All grids disappear after the first ajax refresh. The project on Coldfusion.
View profile  Send private message
clahti2

Posts: 107
Posted: 03/05/2012, 11:38 AM

sorry I do not know very much about cold fusion, my code is ajax and php so you may have to do some tweaking to get this to work. I didn't even know cold fusion was still around :-)
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

MS Access to Web

Convert MS Access to Web.
Join thousands of Web developers who build Web applications with minimal coding.

CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.