Skip to main content
Known Participant
Sep 21, 2015 5:19 AM UTC
Answered

how do I save a variable, using AJAX, to a mySQL database using Coldfusion?

I have a jquery script that picks a background color from an image using AJAX. I would like to save the variable, var rgba=e.rgba() to a MySQL databse. The individual who created the script said to use: $.post("color.php",{rgba:reba}); to save to a database with AJAX. How do I save the var rgba using coldfusion to do the CF side?

The script:

<script>

;(function($){

    $.fn.canvasify = function(f){ // faster than dynamically converting a pixel at a time

        return this.map(function(){

            if (this.nodeName=="IMG"){

                var canvas=$('<canvas>')

                this.src = this.src // IE fix

                $(this).one('load',function(){

                    canvas.attr({width:this.width,height:this.height})

                    canvas[0].getContext('2d').drawImage(this,0,0,this.width,this.height)

                    $(this).replaceWith(canvas)

                })

                return canvas[0]

            }else{

                return this

            }

        })

    }

    function Rgba(rgba){

        this.rgba = rgba

        this.toString = function(){ return "rgba("+Array.prototype.join.call(this.rgba,',')+")" }

    }

    $.Event.prototype.rgba=function(){

        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),

            y =  this.offsetY || (this.pageY - $(this.target).offset().top),

            nodeName = this.target.nodeName

        if (nodeName==="CANVAS")

            return new Rgba(this.target.getContext('2d').getImageData(x,y,1,1).data)

        else if (nodeName==="IMG"){

            var canvas=document.createElement("canvas")

            canvas.width=1

            canvas.height=1

            canvas.getContext('2d').drawImage(this.target,x,y,1,1,0,0,1,1)

            return new Rgba(canvas.getContext('2d').getImageData(0,0,1,1).data)

        } else return null

    }

})(jQuery)

    $(function() {

        $("figure").append("<p class="rgba">")

        $('img').canvasify().click(demo)

    //    $('img').click(demo)

        function demo(e){

            var rgba=e.rgba(),

                figure = $(this).parent()

            figure.css('background-color',rgba).find("p").text(rgba)

        }

    });

    </script>

    <style>

    p.rgba {

        background:white;

        color:black;

        border:1px solid red;

        min-height:20px;

    }

    </style>

This topic is closed to new replies. Start a new post to keep the conversation going.
BKBK
BKBKCorrect answer
Community Expert
Oct 2, 2015 12:31 PM UTC

Here is some pseudocode

AJAX

...

$data = {rgba:$rgba,var1=$var1,var2=$var2, etc.};

...

var ajaxResponse = $.ajax({

    type: "POST",

    url: "../../dir/Settings.cfc?method=saveBGColor,

    contentType: "application/json; charset=utf-8",

    data: JSON.stringify($data),

    etc.

});

Settings.cfc

<cfcomponent>

  <cffunction name="saveBGColor" access="remote">

    <cfset requestBody = toString(getHttpRequestData().content)>

    <!--- Double-check to make sure it's a JSON value. --->

    <cfif isJSON(requestBody)>

        <!--- Extract background colour from request body--->

        <!--- Save background colour to database --->

    </cfif>

  </cffunction>

</cfcomponent>

2 replies

Known Participant
Oct 31, 2015 4:37 PM UTC

Sorry it has taken so long to get back. Your suggestion worked perfectly. Thank you

Translate
BKBK
Community Expert
BKBKCommunity ExpertCorrect answer
Community Expert
Oct 2, 2015 12:31 PM UTC

Here is some pseudocode

AJAX

...

$data = {rgba:$rgba,var1=$var1,var2=$var2, etc.};

...

var ajaxResponse = $.ajax({

    type: "POST",

    url: "../../dir/Settings.cfc?method=saveBGColor,

    contentType: "application/json; charset=utf-8",

    data: JSON.stringify($data),

    etc.

});

Settings.cfc

<cfcomponent>

  <cffunction name="saveBGColor" access="remote">

    <cfset requestBody = toString(getHttpRequestData().content)>

    <!--- Double-check to make sure it's a JSON value. --->

    <cfif isJSON(requestBody)>

        <!--- Extract background colour from request body--->

        <!--- Save background colour to database --->

    </cfif>

  </cffunction>

</cfcomponent>

Translate