3

My page generates random variables from a cfquery on the page to be used as a random prize and random employee who have won the prize.

<cfset prizeID="#prize.prize_ID[variables.prizeRow]#"> 

I then have a cfform on the page where I set the text inputs to these variables and use the below code to submit it to the server action page where the database updates my table indicating the prize is claimed:

function submitClaim() { 
ColdFusion.Ajax.submitForm('claimyourprize', 'claim.cfm');
}

I'm trying to find an alternative to this where I use Ajax to send the variables (prizeID, winnerID, etc) to the server.

Here is as close as I have gotten:

    function Claim() {
        $.ajax({
            type: "POST",
            url: "claim.cfm",
            data: { claimedPrize: "#prizeID#", claimedEmployee: "#employeeID#"}
        }).done(function( ) {
            alert( "claimed" );
        })
    }

Currently I'm calling the function on button click to "claim" the prize.

Here is one of the queries on my claim.cfm:

    <cfquery name="updateQuantity" datasource="christmas">
    UPDATE PRIZES
    SET QUANTITY = QUANTITY - 1
    WHERE prize_ID = [ID sent from the client needs to go here]
    </cfquery>
6
  • Your question is a bit confusing as you're mixing client side (AJAX) and server side (<cfset>) terminology as if they are somehow related or can interact. Where is #thisSpin.spinnumber#, #prizeID# and #employeeID# coming from? WHat are you getting back on the server after the post is made? Can you please edit the code to include where this stuff comes from and make it clear what is client side code and what is server side code (this is to help YOU understand what you're doing) Sep 13, 2013 at 16:52
  • I use cfset to set my employee/prize variables to a random row in a cfquery. This is all triggered on the client side page (index.cfm). I updated the original post to have more detail. Sep 13, 2013 at 17:18
  • Thanks for updating your question. I think it might help if you dispense with the idea of "page" and instead think of "CFML code" and "Javascript code" because whilst the two might reside in the same file, they are not executed at the same time. Reading this might help: cfmlblog.adamcameron.me/2012/10/…. You didn't answer my question as to what actually happens when you call Claim(). Your question doesn't really actually make it clear what the problem is. I get that it doesn't do "what you want", but which part? Sep 13, 2013 at 18:21
  • Also perhaps read this: cfmlblog.adamcameron.me/2012/12/… and this cfmlblog.adamcameron.me/2013/09/… Sep 13, 2013 at 18:21
  • Currently when I call claim() the claim.cfm action page successfully gets the cfform data and executes the queries to update the quantity of prizes and log the employee who won said prize, but I would like to do this in ajax/jquery with less reliance on cfform and Coldfusion.Ajax. I'll take a look at your blog, ty. Sep 13, 2013 at 18:29

2 Answers 2

5

You are submiting form to claim.cfm page. On the claim.cfm page you will have form scope available. I would suggest You to add some response, so you can have some sort of result on client.

function Claim() {
    $.ajax({
        type: "POST",
        url: "claim.cfm",
        data: { claimedPrize: "#prizeID#", claimedEmployee: "#employeeID#"}
    }).done(function(returnresult) {
        alert( returnresult );
    })
}

And this would be the claim.cfm page

<cfif isDefined("form.claimedPrize")>
    <cfquery name="updateQuantity" datasource="christmas">
      UPDATE PRIZES
      SET QUANTITY = QUANTITY - 1
      WHERE prize_ID = <cfqueryparam value="#form.claimedPrize#" cfsqltype="CF_SQL_INTEGER" />
    </cfquery>
    SUCCESS!
<cfelse>
    SOMETHING WENT WRONG!
</cfif>

butmuch better solution is to have cfc (component) unstead cfm (template) and to submit form in to cffunction.

claim.cfc file :

<cfcomponent displayName="My claim Component">
 <cffunction name="claim" output="false" access="remote" returntype="string">
     <cfargument name="claimedPrize" required="true" type="numeric"/>
     <cfargument name="claimedEmployee" required="true" type="numeric"/>
     <cfquery name="updateQuantity" datasource="christmas">
       UPDATE PRIZES
       SET QUANTITY = QUANTITY - 1
       WHERE prize_ID = <cfqueryparam value="#arguments.claimedPrize#" cfsqltype="CF_SQL_INTEGER" />
     </cfquery>
<cfreturn "OK" />
 </cffunction>
</cfcomponent>

Then ajax call would look like this :

function Claim() {
    $.ajax({
        type: "POST",
        url: "claim.cfc?method=claim",
        data: { claimedPrize: "#prizeID#", claimedEmployee: "#employeeID#"}
    }).done(function(returnresult) {
        alert( returnresult );
    })
}
0

Is your question as simple as this bit:

 WHERE prize_ID = [ID sent from the client needs to go here]

?

In which case, as you're making a POST with the AJAX, the data you send with the AJAX request will be passed as form fields and end up in the 'FORM' scope, so you need to change that code to be along the lines of:

WHERE prize_ID = <cfqueryparam value="#form.claimedPrize#" cfsqltype="CF_SQL_INTEGER">

(I'm guessing it's an integer)

But you really really are not making it clear what your specific problem is. Not the task you are trying to accomplish, but the specific problem you are having accomplishing the task.

Like "the form scope is not populating", or "claim.cfm is never being called" or "I am getting a JS error" etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.