title: Javascript error when html passed in JSON packet
body: <p>I am going mad trying to resolve this issue. I have implemented a Coldfusion Ajax-like File Upload that uploads a file using a hidden frame and then grabs the contents returned by the frame. It is based on this article: <a href="http://www.bennadel.com/blog/1244-ColdFusion-jQuery-And-AJAX-File-Upload-Demo.htm" rel="nofollow">http://www.bennadel.com/blog/1244-ColdFusion-jQuery-And-AJAX-File-Upload-Demo.htm</a></p>
  
  <p>So, everything is working great, EXCEPT when I send back HTML in the data. So, if you look in the code below, I have provided the action page that streams data back to the hidden frame. The first line works, the second line with html does not. </p>
  
  <pre><code>    &lt;!--- Create the return HTML. Remember, we are going to be treating the BODY of the returned document as if it were a JSON string. ---&gt;
      &lt;cfsavecontent variable="strHTML"&gt;
  
          &lt;cfset var sResponse = {} /&gt;
          &lt;!--- THIS WORKS ---&gt;
          &lt;cfset sResponse = {SUCCESS = true, ERRORS = [], DATA = "Hello World", RETURNID=""} /&gt;
          &lt;!--- THIS DOES NOT WORK ---&gt;
          &lt;cfset sResponse = {SUCCESS = true, ERRORS = [], DATA = #HtmlEditFormat('&lt;div&gt;Hello World&lt;/div&gt;')#", RETURNID=""} /&gt;
  
          &lt;cfoutput&gt;
              &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
              &lt;html&gt;
              &lt;head&gt;&lt;/head&gt;
              &lt;body&gt;#SerializeJSON( sResponse )#&lt;/body&gt;
              &lt;/html&gt;
          &lt;/cfoutput&gt;
      &lt;/cfsavecontent&gt;
  
  &lt;!--- Create binary response data. ---&gt;
  &lt;cfset binResponse = ToBinary( ToBase64( strHTML ) ) /&gt;
  
  &lt;!--- Tell the client how much data to expect. ---&gt;
  &lt;cfheader name="content-length" value="#ArrayLen( binResponse )#" /&gt;
  
  &lt;!--- Stream the "plain text" back to the client .---&gt;
  &lt;cfcontent type="text/html" variable="#binResponse#" /&gt;
  </code></pre>
  
  <p>The javascript for doing all of this is below. The line that it errors on when HTML is passed back is:</p>
  
  <p><strong>// Assuming that our return data is in JSON format, evaluate the body html to get our return data.
  var objData = eval( "(" + jBody.html() + ")" );</strong></p>
  
  <pre><code>//ShareForm Photo Upload Form Process (simulated Ajax)
  $(document).ready(function() {
      // Attach an event to the submit method. Instead of submitting the actual form to the primary page, we are going to be submitting the form to a hidden iFrame that we dynamically create.
      $( "#frmShareForm" ).submit(
          function( objEvent ){
              var jThis = $( this );
              var photoUploadAction = $("#photoUploadAction").val();
  
              // Create a unique name for our iFrame. We can do this by using the tick count from the date.
              var strName = ("uploader" + (new Date()).getTime());
  
              // Create an iFrame with the given name that does not point to any page - we can use the address "about:blank" to get this to happen.
              var jFrame = $( "&lt;iframe name=\"" + strName + "\" src=\"about:blank\" /&gt;" );
  
              // We now have an iFrame that is not attached to the document. Before we attach it, let's make sure it will not be seen.
              jFrame.css( "display", "none" );
  
              // Since we submitting the form to the iFrame, we will want to be able to get back data from the form submission. 
              // To do this, we will have to set up an event listener for the LOAD event of the iFrame.
              jFrame.load(
                  function( objEvent ){
                      // Get a reference to the body tag of the loaded iFrame. We are doing to assume that this element will contain our return data in JSON format.
                      var objUploadBody = window.frames[ strName ].document.getElementsByTagName( "body" )[ 0 ];
  
                      // Get a jQuery object of the body so that we can have better access to it.
                      var jBody = $( objUploadBody );
  
                      // Assuming that our return data is in JSON format, evaluate the body html to get our return data.
                      var objData = eval( "(" + jBody.html() + ")" );
                      alert(objData);
  
                      // A JSON-format struct is returned that will be used to do callback functionality
                      SharePhotoAjaxResponseHandler(objData);
  
                      // Remove the iFrame from the document. Because FireFox has some issues with "Infinite thinking", let's put a small delay on the frame removal.
                      setTimeout
                      (
                          function()
                          {
                              jFrame.remove();
                          }, 100
                      );
                  }
              );
  
              // Attach to body.
              $( "body:first" ).append( jFrame );
  
              // Now that our iFrame it totally in place, hook up the frame to post to the iFrame.
              jThis
                  .attr( "action",  photoUploadAction)
                  .attr( "method", "post" )
                  .attr( "enctype", "multipart/form-data" )
                  .attr( "encoding", "multipart/form-data" )
                  .attr( "target", strName );
      });
  });
  </code></pre>
  
  <p>The javascript error I get is usually something like:
  "unterminated regular expression literal"</p>
  
  <p>I have also tried removing the SerialiseJson on the CFM page, and the eval in the javascript, which both result in other js errors. I have also tried removing the surrounding html as well as change .html() to .text(), remove the eval() and combinations of all of them. No luck.</p>
  
  <p>Please can someone tell me what the problem is. I know I can't be far off as it works without html. </p>
  
  <p>Thanks</p>
  
  <p>UPDATE: I ran the JSON output that Coldfusion generates through the JSON validator and it failed, due to (from what I can see) the double quotation marks:</p>
  
  <pre><code>{""RETURNID"":"""",""DATA"":""&amp;lt;div&amp;gt;Hello World&amp;lt;\/div&amp;gt;"",""SUCCESS"":true,""ERRORS"":[]}
  </code></pre>
  
  <p>Now I really don't know why Coldfusion is doing double quotations?? Anyone have any ideas?</p>