Highlighted

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

New Here ,
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>

Adobe Community Professional
Correct answer by BKBK | Adobe Community Professional

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>

TOPICS
Database access

Views

1.0K

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

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

New Here ,
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>

Adobe Community Professional
Correct answer by BKBK | Adobe Community Professional

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>

TOPICS
Database access

Views

1.0K

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
Sep 20, 2015 0
Adobe Community Professional ,
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
Reply
Loading...
Oct 02, 2015 1
New Here ,
Oct 31, 2015

Copy link to clipboard

Copied

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
Reply
Loading...
Oct 31, 2015 0