• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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.2K

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

Community Expert , Oct 02, 2015 Oct 02, 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)>

 

...

Votes

Translate

Translate
Community Expert ,
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>

Votes

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

Votes

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
Resources
Documentation