title: Why do my German Umlaut characters not get displayed correctly when content is dynamically loaded?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/346531/utf8-problem-with-mysql-5">UTF8 problem with MySQL 5</a>  </p>
  </blockquote>
  
  
  
  <p>I'm having trouble displaying "German Umlaute" characters on a HTML page.</p>
  
  <p>The actual page is saved <code>UTF-8 without BOM</code> encoded, has it's <code>UTF-8 metatag</code>, it is requested via AJAX and I'm manually setting the <code>response header to UTF-8</code>, too. Still, all German characters are broken.</p>
  
  <p>I also place another AJAX call for dynamic content, which is returned correctly (in Firebug), but when displayed in the browser, the Umlaute are broken again.</p>
  
  <p>I can fix everything by setting <code>iso-8859-1</code> in all Ajax response headers, but I thought <code>UTF-8</code> can handle special characters and I wouldn't have to mix character encoding.</p>
  
  <p><strong>Question</strong>:<br>
  Shouldn't UTF-8 handle characters correctly? Or do I need another charset? Am I missing something obvious? </p>
  
  <p>Thanks! </p>
  
  <p><strong>EDIT:</strong><br>
  Here is a screenshot: <img src="https://i.stack.imgur.com/WTbIa.jpg" alt="enter image description here"></p>
  
  <p>Code next.</p>
  
  <p><strong>EDIT:</strong><br>
  THis is what I'm getting back from the server:
  <img src="https://i.stack.imgur.com/NLdRk.jpg" alt="enter image description here"></p>
  
  <p>And the response header also shows the content being delivered to be UTF-8
  <img src="https://i.stack.imgur.com/iDQ4G.jpg" alt="enter image description here"></p>
  
  <p>So from my unknowing point of view, the server response seems to be correct in <code>UTF-8</code> and foreign characters showing, is it so?</p>
  
  <p>The actual page is requested by Jquery Mobile, so I can't say what's happening there. The dynamic content, I'm doing myself. This is the call from my application controller:</p>
  
  <pre><code>var form = "",
      service = "../services/views.cfc",
      method = "byPass",
      returnformat = "json",
      targetUrl = "",
      formdata = "form_submitted=getUsers&amp;method="+method+"&amp;returnformat="+returnformat,
      successHandler = function(objResponse, cbk) {
          cbk( objResponse );
      };
  
  ajaxFormSubmit( form, service, formdata, targetUrl, successHandler, "yes", "", returnformat, cbk );
  </code></pre>
  
  <p>which triggers:</p>
  
  <pre><code>var ajaxFormSubmit = 
      function ( form, service, formdata, targetUrl, successHandler, dataHandler, errorHandler, returnformat, type ){
      var override = null;
  
      if ( type !== "" &amp;&amp; type !== "post" ){
          override = type;
          type = "get";
      }
  
      $.ajax({
          async: false,
          type: type == "" ? "get" : type,
          url: service,
          data: formdata,
          dataType: returnformat,
          success: function( objResponse ){
              if (objResponse.SUCCESS == true || typeof objResponse === "string" ){
                  dataHandler == "yes" ? successHandler( objResponse, override ) : successHandler( override );
              } else {},  
          error: function (jqXHR, XMLHttpRequest, textStatus, errorThrown) {}
          });
      }
  </code></pre>
  
  <p>On the server (I'm using <code>Coldfusion8</code> and <code>MySQL 5.0.88</code>. I'm ending up in this view:</p>
  
  <pre><code>&lt;cffunction name="getUsers_abc" access="public" returntype="any" output="false" hint="JSON vcard library"&gt;
      &lt;cfargument name="local" type="struct" required="true" hint="Local Object" /&gt;
      &lt;cfscript&gt;
          var THAT = local;
          THAT.displayStart = 0;
          THAT.displayLength = 10;
          THAT.count = 0;
          THAT.loginid = Session.id;
      &lt;/cfscript&gt;
      &lt;cftry&gt;
      &lt;!--- Database call ---&gt;
      &lt;cfquery datasource="#Session.datasource#" name="getUsers"&gt;
          SELECT 
              tn.iln, 
              tn.typ, 
              ...
          FROM table AS Tn
          WHERE tn.freigeschaltet != "5"
          AND tn.typ = "abc"
          LIMIT #THAT.displayStart#,#THAT.displayLength# 
      &lt;/cfquery&gt;
  
      &lt;!--- CREATE JSON ---&gt;
      &lt;cfsavecontent variable="jsonRetailers"&gt;
          &lt;cfoutput&gt;{"data":[&lt;/cfoutput&gt;
              &lt;cfloop query="getUsers"&gt;
                  &lt;cfset THAT.count = THAT.count + 1&gt;
                      &lt;cfoutput&gt;
                          &lt;cfoutput&gt;{&lt;/cfoutput&gt;
                              &lt;cfoutput&gt;"type":"#getUsers.typ#",&lt;/cfoutput&gt;
                              ...
                              &lt;cfoutput&gt;}]&lt;/cfoutput&gt;
                          &lt;cfoutput&gt;}&lt;/cfoutput&gt;
                      &lt;/cfoutput&gt;
                      &lt;cfif getUsers.recordcount LT THAT.displayStart + THAT.displayLength&gt;
                          &lt;cfif THAT.count is not getUsers.recordcount&gt;&lt;cfoutput&gt;, &lt;/cfoutput&gt;&lt;/cfif&gt;
                      &lt;cfelse&gt;
                          &lt;cfif THAT.count LT THAT.displayLength&gt;&lt;cfoutput&gt;, &lt;/cfoutput&gt;&lt;/cfif&gt;
                      &lt;/cfif&gt;
                  &lt;/cfloop&gt;
                  &lt;cfoutput&gt;]&lt;/cfoutput&gt;
                  &lt;cfoutput&gt;,"SUCCESS":true,"Count":#getUsers.recordcount#}&lt;/cfoutput&gt;
              &lt;/cfsavecontent&gt;
              &lt;cfset variables.alredayBinary = "false"&gt;
  
              &lt;!--- GZIP if possible ---&gt;
              &lt;cfif cgi.HTTP_ACCEPT_ENCODING contains "gzip"&gt;
                  &lt;cfinvoke method="gzip" stringToZip="#jsonRetailers#" returnvariable="passBackObject"&gt;&lt;/cfinvoke&gt;     
                  &lt;cfheader name="Content-Encoding" value="gzip"&gt;
                  &lt;cfset variables.alredayBinary = "true"&gt;
              &lt;/cfif&gt;
              &lt;!--- setting UTF-8 ---&gt;
              &lt;cfheader name="Content-Type" value="text/json; charset=UTF-8"&gt;
              &lt;cfheader name="Content-Length" value="#len(passBackObject)#" &gt;
              &lt;cfif variables.alredayBinary EQ "false"&gt;
                  &lt;!--- send to browser ---&gt;
                  &lt;cfcontent reset="no" variable="#CharsetDecode(passBackObject, "UTF-8")#" /&gt;
              &lt;cfelse&gt;
                  &lt;cfcontent reset="no" variable="#passBackObject#" /&gt;    
              &lt;/cfif&gt;
              &lt;cfreturn  /&gt;
  &lt;/cffunction&gt;
  </code></pre>
  
  <p>So, no PHP unfortunately. THe code is not telling me where the problem is, but maybe you see something, I don't .</p>
  
  <p>Thanks!</p>