Skip to main content
Known Participant
September 21, 2015
Answered

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

  • September 21, 2015
  • 2 replies
  • 1310 views

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 has been closed for replies.
Correct answer BKBK

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
October 31, 2015

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

BKBK
Community Expert
BKBKCommunity ExpertCorrect answer
Community Expert
October 2, 2015

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>