jQuery ajax seems to alter SVG data sent to coldfusion server

Question

I'm using $.ajax() to send a string to a coldfusion server where it is stored in a table. When I later query and try to use that data I get an error; "null Enclosed Exception: Invalid byte 2 of 3-byte UTF-8 sequence".

First I grab the SVG from the DOM and send it to an action page. It should just be a string, right?

var lclSVG = $('#myDiv')[0].innerHTML; // SVG Code (XML?)
$.ajax({
  url: "myAction.cfm",
  type: "POST",
  data: ({myInfo: lclSVG}),
});

On the myAction.cfm page I update the data into a table.

<CFQUERY NAME="postSVG">
  UPDATE myTable
  SET svg = '#form.myInfo#' 
  WHERE  ID = 1
</CFQUERY>

SVG2PNG.cfm: When I attempt to query and use the svg data I get an error "Invalid byte 2 of 3-byte UTF-8 sequence". The error occurs on the .transcode line.

<CFQUERY NAME="getSVG">
  SELECT svg
  FROM myTable
  WHERE  ordID = 1
</CFQUERY>
<cfset svg = getSVG.svg>
<cfscript>
  transcoder = createObject("java", "org.apache.batik.transcoder.image.PNGTranscoder").init();
  inputStream = createObject("java", "java.io.StringBufferInputStream").init(svg);
  input = createObject("java", "org.apache.batik.transcoder.TranscoderInput").init(inputStream);
  OutFile = expandPath("myTest2.png");
  outputStream=CreateObject("java", "java.io.FileOutputStream").init(OutFile);
  output=CreateObject("java", "org.apache.batik.transcoder.TranscoderOutput").init(outputStream);
  transcoder.transcode(input, output);
  outputStream.close();
</cfscript>

I've used jQuery's ajax method several times without much difficulty. I'm doing something wrong here and I can't seem to get a handle on it...

Answer 1

I haven't used the framework you've used, however should the line where you set the svg variable use the getSVG query?

<cfset svg = getSVG.svg>

Answer 2

Couple of things:

1. I assume your storing the SVG in a UTF-8 compatible field?
2. Can you confirm that the SVG is correct after grabbing it from the DOM and before posting it?
3. In your ColdFusion Administrator, go to your datasource settings and click 'Show Advanced Settings'. Make sure the box labeled 'Enable High ASCII characters and Unicode for data sources configured for non-Latin characters' is checked.

Answer 3

I've continued working on and refining this issue and have narrowed the problem down. I have posted Well this doesn't really answer my question (not being a $.ajax() fix) but it does fix the issue... Instead of using jQuery ajax() to pass the svg code I created a css-hidden div with a form and a iFrame in it. I use jQuery code to load the ID and svg into inputs in the hidden div. Then I use jQuery to submit that form into the iFrame. It works very smoothly in the background. Later when I query the SVG from the table, it doesn't throw a utf-8 error.

Sharing the code for whoever it might help:

<div id="zeroDiv" style="display:none">
  <form id="svgForm" action="saveSVG.cfm" method="post" target="zeroFrame" accept-charset="utf-8">
    <input name="ordID" id="ordID" type="hidden" value="" />
    <input name="svgCode" id="svgCode" type="hidden" value="" />
  </form>
  <iframe id="zeroFrame" name="zeroFrame" src="" style="width:0;height:0;border:0px solid #fff; display:none"></iframe>
</div>

This is the javascript/jQuery which calls and submits it:

var lclSVG = $('#holderDiv')[0].innerHTML;
lclSVG = lclSVG.replace(/"/g,"");
$('#ordID').val(ordID);
$('#svgCode').val(lclSVG);
$('#svgForm').submit();

This is the CF code on the saveSVG.cfm page. It could be any server side tech...

<cfif isDefined("form.ordID") AND Val(form.ordID) AND isDefined("form.svgCode") AND Len(Trim(form.svgCode))>
  <CFQUERY NAME="saveSVG">
    UPDATE sketch
    SET sketch_svg = '#form.svgCode#' 
    WHERE  ordID = #Val(form.ordID)#
  </CFQUERY>
</cfif>