Posted in ColdFusion | Posted on 07-19-2007 | 15,474 views
I was wondering what I could do to improve the AJAXyness (yes, it is word, because I said so) of ColdFusionBloggers.org, and I came up with a cool trick. On the right hand side of the site is a stats pod. While the number of feeds won't change, and the number of entries won't change often, the number of users will go up and down. I wanted the information to update without user action and this is what I came up with. (As a note, the code attached to the zip is now old.)
First I took the block of code and moved it to a new file, stats.cfm. I then edited my layout page and changed the stats pod to this:
2</cfdiv>
The CFDIV is binding to a url, stats.cfm. Again, that's where I moved the stat text. So far so good. Next I added this to my body tag:
And added this JavaScript function:
2function updatestats() {
3 ColdFusion.navigate('stats.cfm','statsdiv');
4 window.setTimeout('updatestats()',60000);
5}
6</script>
And that's it. Now when it loads you will get a loading grapic, as it is now for me, and I'm hoping it's just the flakey Airport wifi. (But I shouldn't complain, it's free.)
Thoughts?
this is what you do with your current solution right:
<body onload="window.setTimeout('updatestats()',60000)">
<script>
function updatestats() {
ColdFusion.navigate('stats.cfm','statsdiv');
window.setTimeout('updatestats()',60000);
}
</script>
if you use prototype.js the code looks like this:
<script>
new Ajax.PeriodicalUpdater('statsdiv', 'stats.cfm', {
method: 'get', frequency: 3, decay: 2
});
</script>
Looks more concise and easier to me, but I could be partial.
The prototype Ajax.PeriodicalUpdater() IS rather handy, however. I particularly like the "decay" feature.
This is what you do with your current solution right:
<body onload="window.setTimeout('updatestats()',60000)">
<script>
function updatestats() {
ColdFusion.navigate('stats.cfm','statsdiv');
window.setTimeout('updatestats()',60000);
}
</script>
if you use prototype.js the code looks like this:
<script>
new Ajax.PeriodicalUpdater('statsdiv', 'stats.cfm', {
method: 'get', frequency: 3, decay: 2
});
</script>
<body onload="window.setInterval(function(){ColdFusion.navigate('stats.cfm','statsdiv');},60000)">
ColdFusion.navigate('/Finished.cfm','content');
}
so it submits the form and updates the content cfdiv to show the finished page which runs two queries to get the new customer name and the new business unit and display them in an ordinary html table. Unfortunately, the old customer shows up like it never ran the queries. If I dump the session I can see that the form was submitted and the data saved and read into the session scope but it doesn't show up on the finished.cfm page
var dsIssues = new Spry.Data.JSONDataSet("issuesxml.cfm?id=#p.getID()#&stupid=#rand("SHA1PRNG")#",{path:"data", pathIsObjectOfArrays: true});
<script language="javascript">
submitMe = function() {
ColdFusion.Ajax.submitForm('frmChangeCustomer','/Admin/ChangeCustomerProcess.cfm');
ColdFusion.navigate('/Finished.cfm?rn=<cfoutput>#Rand("SHA1PRNG")#</cfoutput>','content');
}
</script>
ColdFusion.Ajax.checkImportedTag('CFFORM');
Of course on my main index page that contains the cfdiv tags, I have the following line near the top:
<cfajaximport tags="cfform, cfpod, cftextarea, cftooltip, cfwindow">
am i missing something?
on the form:
I got rid of the javascript function in the head and changed the button back to cfinput type="submit"
now the form uses the intended cfform submit routines built in (stays in the same container)
on the processing page, I just use a cfinclude instead of navigating. since the processing page doesn't display anything, the user only sees the results page (or the source page)
I get no Ajax.checkImportedTag error and I can cfif which page to cfinclude and the best part is that the page contains updated results so the user can see the results of their changes immediately
So right after the cfform tag I have something like this:
<script>
callback = function(){
ColdFusion.navigate('/WorklogFinished.cfm','content');
}
</script
http://www.multilistmanager.com/views/formtest.cfm...
JS CODE:
-------------------
<script type="text/javascript">
function doSendContactAgent() {
ColdFusion.Ajax.submitForm('contactAgent', '/cfm/invokeForms.cfc?method=sendContactAgent', resultInsertHandler,insertErrorHandler);
}
function resultInsertHandler() {
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "<p>Employee Added.</p>";
}
function insertErrorHandler(id, message) {
alert("Error while updating\n Error code: "+id+"\n Message: "+message);
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "<p>Employee NOT Added.</p>";
}
</script>
FORM CODE:
-------------------
<cfform name="contactAgent" format="html">
<cfinput type="text" id="subjectid" name="subject" value="x" tabindex="1" disabled="yes">
<cfinput type="text" id="emailid" name="email" value="" tabindex="1">
<cfinput type="text" id="nameid" name="name" value="" tabindex="2">
<cfinput type="text" id="telephoneid" name="telephone" value="" tabindex="3">
<cftextarea id="commentsid" name="comments" rows="2" cols="5" tabindex="4" ></cftextarea>
<cfinput name="send" type="button" onClick="javascript:doSendContactAgent();" value="Send Info"/>
<cfinput name="send" type="reset" value="Reset"/>
</cfform>
invokeForms.cfc CODE:
-------------------
<cffunction name="sendContactAgent" access="remote">
<cfmail to="xerranomx@gmail.com" from="#form.name#" replyto="#form.email#" server="mail.multilistmanager.com" username="info.multilistmanager.com" password="info266" subject="WEB LEAD #form.subject#">
-----Message------
<cfmailparam name="X-Priority" value="1">
</cfmail>
</cffunction>
Thanks in advance guys
<div id="totalSales">#totalSales#</div>
but this value never seems to refresh.
TIA
Thanks
Note: If your CFDIV is positioned at the bottom of your page you may need to provide it with a height in the CSS.
Otherwise scrolling can 'jump up' to what it thinks is the bottom of the page once the CFDIV has been refreshed.
Sam.
I'm building a shoutbox and i have it wrapped in a (div id="shoutbox"></div> tag. All that happens in the shoutbox is a query to grab the name, message, date. I have a link below the box that you click that launches a popup window using cfwindow. In the cfwindow is a form with a name field, message field, and a submit button. The date field is hidden. When you click the submit button is points to a script that insert the data into the database.
I'm using the Codlfusion.AJAX.submitform to submit the form. Now all I want to do is add some code to my JS function to refresh only that div after the script is run. Right now i think it keeps triggering before the submit happens because i keep getting errors the variable form.name isn't defined.
Anyone know a simple way to refresh a specific div based on an event. I don't want to keep refreshing and refreshing, that will be annoying.
Please could really use the help/
So -- whats the secret?
Just Kidding
Thanks A Million...
[Add Comment] [Subscribe to Comments]