Search code examples
javascriptjqueryajaxcoldfusioncfajaxproxy

Coldfusion: Displaying Updated total count from Database cfajaxproxy

I'm not good in javascript, Ajax & Jquery but I still have to finish one task. I'm trying to show an updated record count at runtime. This will be live report for management, the number should change without refreshing the page. I tried to write a script but still failed. Found one jquery script online, I modified it but I'm not getting the desired result, I'm getting an error. I didn't find a helpful example from a google search. If you have have any supporting or helpful example, please share.

This is what I did so far:

CFC: counter function just running one loop but actually here ill fetch data from database.

<cfcomponent>
<cffunction name="counter" returntype="any" access="remote" >
    <cfset var o= 1>
    <cfloop index="b" from="1" to="1000">
        <cfset o = b>
        <cfset sleep = 1000>
     </cfloop>
<cfreturn o>
</cffunction>

CFM File:

<cfajaxproxy cfc="async" jsclassname="asyncjs" />
<!DOCTYPE html>
<html>
  <body>
    <div id="saa"><span class="count">200</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">1421</span></div>
<br />
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

     <script type="text/javascript">
        var objCfc =  new asyncjs();
            objCfc.setAsyncMode();

            alert(objCfc.counter());
            $('.count').each(function () {
                var i =300;
                $(this).prop('Counter',0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function () {
                        //$(this).text(Math.ceil(now)

                        $(this).text(i);
                    }
                });
            });
        </script>
  </body>
</html>

Please advise...

Solution 

  • <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX CFM</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#noteDiv').load('content_notes.cfm?_=' +Math.random()).fadeIn("slow");
}, 1000); // refresh every 10000 milliseconds

</script>
</head>

<body>


<cfdiv id="noteDiv" bind="url:content_notes.cfm"></cfdiv>


</body>
</html>

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
     <br>
	     ...DIV Content - Date Time : <cfoutput> #now()# </cfoutput> 
     <br>
</body>
</html>