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 = '<?php echo $origadd; ?>'; 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 stackoverflow.com/questions/40999171/json-encode-alert-message and stackoverflow.com/questions/18932686/… — Funk Forty Niner
– Funk Forty Niner, Commented Oct 26, 2017 at 13:58
See also stackoverflow.com/questions/34840643/… and stackoverflow.com/questions/4365738/… — Funk Forty Niner
– Funk Forty Niner, Commented Oct 26, 2017 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
– deceze ♦, Commented Oct 26, 2017 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
– deceze ♦, Commented Oct 26, 2017 at 14:19

Funk Forty Niner · Accepted Answer · 2017-10-26 14:33:28Z

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.

Collectives™ on Stack Overflow

UTF-8 encoding not working in JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related