'Unexpected' behaviour when calling ColdFusion code (server-side code) from javascript event handlers

Question

I have a simple YUI dialog with 2 buttons - Accept and Decline. I would like to call ColdFusion code together with JavaScript code when each of the buttons is clicked. When I introduce CF code together with JS code unfortunately both CF code present in each of the functions get triggered.

All the code is shown below:

<script type="text/javascript"> 

function displayForm() {
   YAHOO.namespace("example.container");    
        if (!YAHOO.example.container.Form) {     
      YAHOO.example.container.Form = new          
                           YAHOO.widget.SimpleDialog("Form", {
       modal: true,
       icon: YAHOO.widget.SimpleDialog.ICON_WARN,
       visible: false,
       fixedcenter: true,
       constraintoviewport: true,
       width: "500px",
       role: "alertdialog",
       draggable: false, 
       buttons: [ { text:"Accept", handler:handleAccept, isDefault:true }, { text:"Decline", handler:handleDecline} ]
      });    
      YAHOO.example.container.Form.setHeader("Info");      
                    YAHOO.example.container.Form.setBody("Body");   
      YAHOO.example.container.Form.render(document.body);
     }   
     YAHOO.example.container.Form.show();   
   }     


   function handleAccept() {
       this.cancel();
       <CFQUERY name="UpdTable" datasource="test>
           UPDATE t 
           set a = '1'
           where b = '1'
       </CFQUERY>
   }

   function handleDecline() {
       this.cancel();     
       <CFQUERY name="UpdTable" datasource="test>
           UPDATE t 
           set a = '2'
           where b = '1'
       </CFQUERY>
   }

   displayForm();

</script>

The problem is that when handleAccept() is triggered automatically the handleDecline() CF code is getting triggered so I am ending up with a = '2' in the database rather than a = '1'.

Is there a workaround or a simple solution to this? Ideally, I do not want to use JS redirection.

Answer 1

Both of your queries are being evaluated on the server before the page renders on the user's browser.

Rather than having the queries inline like you have them, put the queries in a separate template and use your YUI code to run the appropriate template.

ColdFusion is a server-side language and will always run before the user sees anything.

Answer 2

ColdFusion code is executed when the browser requests the page. That is, when the code is sent to the browser, the two coldfusion cfquery's are executed (so every time someone views the page with the above code, those 2 queries are executed). This is how ColdFusion works:

1. Browser requests page from webserver
2. Webserver processes all the ColdFusion Code
3. Webserver sends resulting text to browser
4. Browser interprets text as web page

Your problem occurs at 4. The ColdFusion code is no longer there! (View source of the page to see) The ColdFusion code was already been processed back at stage 2, and isn't sent to the browser.

So how do you fix your problem? Well, since ColdFusion processing occurs after a page request, you'll need to request a page. Because you're changing data on the server, you'll want to do a post, see http://developer.yahoo.com/yui/examples/connection/post.html for an example of doing a post with the YUI connection manager.

For simplicity, have two pages, one that is requested for accept and one that is for decline. In the page, just do the related CFQUERY. Now, in your handleAccept & handleRequest functions, request those pages like in the YUI connection manager example above. eg.

var callback = 
{ 
    success: function(o){}, 
    failure: function(o){}, 
    argument: [] 
};  
var request = YAHOO.util.Connect.asyncRequest('POST', "accept.cfm", callback, "");