UTF-8 encoding not working in JavaScript

Question

I have the following piece of code which I partly got from another thread in SO:

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] has a value "rueFrédéricMistral";
echo $origadd;   // This displays rueFrédéricMistral
?>

<html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var source = <?php echo json_encode($origadd); ?>;
        alert(source);  // This displays null
    </script>
    </head>
    ....
    ....
</html>

As I have mentioned in the comments, the echo statement gives me the original string. However, the alert box in JS gives me a null value because of which the subsequent code is failing.

I reopened it but you can't use `json_encode` like that. If you use `var source = '';` as my example and quoting it (something you didn't do), you will see your data is there. There are quite a few examples of this on the web. One of which https://stackoverflow.com/questions/40999171/json-encode-alert-message and https://stackoverflow.com/questions/18932686/how-to-alert-json-file-data-from-javascript — Funk Forty Niner, Oct 26 '17 at 13:58
See also https://stackoverflow.com/questions/34840643/php-json-encode-not-working-properly and https://stackoverflow.com/questions/4365738/how-to-access-php-session-variables-from-jquery-function-in-a-js-file — Funk Forty Niner, Oct 26 '17 at 14:00
@Fred-ii- Why can't you not use `json_encode` like that? It's in fact the preferred way to use it in a case like this. — deceze, Oct 26 '17 at 14:17
@Neeraj Show us the actual HTML being generated by this, specifically what the `var source = ...` line looks like exactly. Also show us how that string is encoded exactly with `echo bin2hex($origadd)`. — deceze, Oct 26 '17 at 14:19
var source = ''; worked Fred. Thanks a lot for your help. Thank you everyone. — Neeraj Saxena, Oct 26 '17 at 14:32
@NeerajSaxena that also. I did post something below but can add that to it. You are also welcome. — Funk Forty Niner, Oct 26 '17 at 14:34

Funk Forty Niner · Answer 1 · 2017-10-26T14:33:28.717

The problem here is an encoding issue and the accents played a major role here. Had the string been just "abc" for example, it would have alerted it properly. Everything needs to be UTF-8 if you want both contents to show up properly.

Therefore, you need to change the file's encoding to UTF-8 and also set the header as UTF-8.

This was tested with successful results.

<?php

header('Content-Type: text/html; charset=UTF-8');

$origadd = "rueFrédéricMistral";
echo $origadd;   // This displays rueFrédéricMistral

?>


<script type="text/javascript">
    var source = <?php echo json_encode($origadd); ?>;
    alert(source); 
</script>

Note: $origadd = "rueFrédéricMistral"; was used from the original post holding that value.

https://stackoverflow.com/revisions/46956093/1

where I stated that the string needed to be wrapped in quotes, otherwise it would have been treated as a constant. (To which someone deleted that comment I placed as being the first comment).

Note:

Using header('Content-Type: text/html; charset=ISO-8859-1'); instead of header('Content-Type: text/html; charset=UTF-8');, your initial HTML would have shown you rueFrÃ©dÃ©ricMistral instead of the intended rueFrédéricMistral.

Edit:

As said by the OP, my mentioning to quote it would have also worked.

var source = '<?php echo $origadd; ?>';

As per my comment above.

If you use var source = '<?php echo $origadd; ?>'; as my example and quoting it (something you didn't do), you will see your data is there.

UTF-8 encoding not working in JavaScript

1 Answers1