A reader asked, “I want a tab to show a list of orders to approve. When the user selects an order to approve I want to approve the order selected, then refresh the list under the tab”.

So this one is for you. One way i gave before was to use the coldfusion javascript tags to deselect then reselect the tab which would refresh the content, as long as you had refreshonactivate set to true for the cflayoutarea. Now one thing i had mentioned before was that using the functions were flaky at best. So another method i used is the following.

AjaxEngine.js

var http;
var textResponse;
var returnFunction = "httpReturnResults";

function sendHttpRequest(params) {
// Create the HTTP Object
http = new getHTTPObject();

if (!isWorking && http) {
 if (params != "") {
 httpURL = url + "?nocounter=yes" + "&" + encodeURI(params); + "hash=" + Math.random();

http.open("POST", httpURL, true);
 http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 http.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
 http.onreadystatechange = handleTextHttpResponse;
 if (arguments[1]) {
 returnFunction = arguments[1];
 }
 isWorking = true;
 http.send(params);
 }
 }
}

function handleTextHttpResponse() {
results = "";
if (http.readyState == 4) {
 results = http.responseText;
 eval(returnFunction+"(results)");
 isWorking = false;
 }
}

function handleXmlHttpResponse() {
if (http.readyState == 4) {
 // XML Parsing
 xStr = "";
 xArray = new Array();
 var xmlDoc = http.responseXML;
 var xRoot = xmlDoc.getElementsByTagName('sources');
 for (x=0; x < xRoot.length; x++) {
 for (xx=0; xx < xRoot[x].childNodes.length; xx++) {
 xNodeName_id = xRoot[x].childNodes[xx].firstChild.nodeName;
 xNodeName_val = xRoot[x].childNodes[xx].lastChild.nodeName;
 xNodeId = xRoot[x].getElementsByTagName(xNodeName_id).item(xx).firstChild.data;
 xNodeValue = xRoot[x].getElementsByTagName(xNodeName_val).item(xx).firstChild.data;
 xStr += xRoot[x].getElementsByTagName(xNodeName_val).item(xx).firstChild.data + "\n";
 xArray[xx] = xNodeId + "_" + xNodeValue;
 }
 }
 results = xStr;
 }
 httpReturnResults(results);
 isWorking = false;
}

var isWorking = false;

function getHTTPObject() {
var xmlhttp;
// NOT SURE WHY THIS HAS TO BE HERE, BUT THE FUNCTION WILL NOT WORK IN IE WITHOUT IT...DO NOT REMOVE
/*@cc_on
@if (@_jscript_version >= 5)
 try {
 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e) {
 try {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (E) {
 xmlhttp = false;
 }
 }
@else
 xmlhttp = false;
@end @*/

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
 try {
 xmlhttp = new XMLHttpRequest();
 //xmlhttp.overrideMimeType("text/xml"); //this is for XML files only
 }
 catch (e) {
 xmlhttp = false;
 }
 }

if (!xmlhttp && window.createRequest) {
 try {
 xmlhttp = window.createRequest();
 } catch (e) {
 xmlhttp=false;
 }
}

return xmlhttp;
}

Index.cfm

<script type="text/javascript">
        <cfinclude template="ajaxEngine.js">
     function conReturn(obj){
         document.getElementById('divid').innerHTML = obj;
     }
     function senddata(){
          url = "approveorder.cfm";
          paramStr = 'urlparam=1';
          sendHttpRequest(paramStr,'conReturn');
     }
</script>

<cflayout type="tab" align="center" name="mainLayout" tabheight="620px">
      <cflayoutarea title="View Some Title" refreshonactivate="true" name="test2" source="test2.cfm">
      </cflayoutarea>
</cflayout>

Test2.cfm

     <div id="divid">
          <!---- content here ----->
          <input type="button" name="approveorder" id="approveorder" value="Approve Order" onClick="senddata();">
     </div>

approveorder.cfm

      <!----- once approve order button is clicked it will pass data to this page and then take the html that was produced here and replace divid with this content so you should make sure that the output of this page looks exactly like test2.cfm just does all the grabbing of updates and any other processing you want----->
      <!---- content here ----->
          <input type="button" name="approveorder" id="approveorder" value="Approve Order" onClick="senddata();">

After testing this a bit and trying out some of the javascript functions that are available from ColdFusion when the layout is included, i found this method to be more reliable to ensure the events fire correctly. I am sure there is a cleaner way to do this, so i invite any comments on your experience of making this happen.