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

New Here ,
Sep 20, 2015 Sep 20, 2015

Copy link to clipboard

Copied

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>

TOPICS
Database access

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Oct 02, 2015 Oct 02, 2015
Here is some pseudocodeAJAX...$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)> ...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 02, 2015 Oct 02, 2015

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 31, 2015 Oct 31, 2015

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines