Force String in JavaScript to be UTF-8? - javascript

my JS-File is UTF-8 encoded, my html document also.
I also have this in the head part of the HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
Every umlaut that I typed in the HTML is displayed properly.
But if I try to set a new value with $('#test').text('Test öäü') I get Test öäü.
How is this possible? Even console.debug/log and alert() display the same.
I also tried to set the charset attribute on my script-tag, but nothing worked.
Can anybody help me with this issue?

I found the issue. I use minify to combine my css/js and minify had $min_serveOptions['contentTypeCharset'] set to iso-8859-1.

Related

Powershell HTML Export is not working properly

I have another interesting mystery for you to solve.
Situation
I basicly use a PowerShell script to generate HTML pages. A meanigful example for this Powershell script would be as following: (Please note this is not the real complete code, but to understand the problem it should be enough)
function New-HTMLPage {
$htmlexport = #"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
</head>
<body>
...further HTML code blabla
"#
return $htmlexport
}
$htmlexport = New-HTMLPage
$htmlexport | Out-File -FilePath "C:\Test.html"
Today i tried to implement a Side Navigationbar into my HTML Code. For this Navigation i used JavaScript in my HTML which i imported like so within the body tag:
<script src="assets/js/sidebar.js"></script>
This is how the Sidebar looks like without powershell:
But when i generate this HTML Page with my Powershell Script (like the example above) it looks completly shredded.
=> Now the interesting part is, that when i copy the generated Powershell HTML Output and paste it into a clean HTML file it looks perfectly fine (like the first picture). Nothing shredded ?!
So my conclusion is, that it is wether a general HTML syntax problem nor a issue in powershell.
Does anyone have an idea what i am missing out or maybe what i can try to solve the issue ?
P.S: If you require any further information please do not hesitate to ask. I have deliberately not included every detail here so there are not too much information.
Thank you very much for your help!
Thank you very much to #mkelement,#jdweng,#Theo for providing this answer.
Finally the paramter -Encoding from the Out-File helped to sove the problem.
To find out the right encoding it followed the instructions from #Theo's comment.
Finally the correct CMDLet was:
Out-File -Encoding utf8 -FilePath "$Filepath"

Facebook Open Graph Sharing Debugger not reading my code well

When I check my url on open graph debugger and click on scrape again
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.tvsrbija.online%2Findex.php
I get an strange error
our page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.
But everything with my code is fine when you look into the source.
I tried scraping blank index.php file, and when i do, here is what Facebook sees
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head></html>
But there is no such code, If i go to blank index.php page of my site and check the source it is blank...
BUT, when i use index.html instead of index.php Facebook sees no code as it should with an empty index.php
Problem is my script is php and not html so i can not use html extension to fix problem. I even tried rewriting .php extension to html because I thought maybe Facebook handles it differently but with no luck.
Also I try pausing Cloudflare for couple of days and the same thing...
What can it be?
EDIT: Here you can see how Facebook sees my source code https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Fwww.tvsrbija.online%2Findex.php
In the provided source link, your output does not have a page head. It must have a valid head and body node to be valid html markup. You can see this in the first three lines of the response body provided by facebook:
<!DOCTYPE html>
<html><body>
<p>
Facebook is likely converting your <head> tag into a <body> tag because your source does not contain a <body>. Your index.php page should scrape like this to be correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body></body></html>
In the future, validate your html markup using the w3c validator to be sure it is correct:
https://validator.w3.org/
Try changing encoding to UTF8 without boom instead of just utf8. This has been a headache for many developers because utf8 adds info before file indicating file is utf8

Hindi Content are not displaying through JQuery

I am trying to display some Hindi words using JQuery because these are the common content which should be display on each page of the web site.
Note - This is a static website only. Using HTML and JQuery/javascript.
My JS file is below -
include.js
$(document).ready(function(){
var text="<div class='header-main'>मुख्य पृष्ठ कुछ हिंदी के शब्द </div>";
$(".header__fixed").html(text);
});
my html file is -
index.html
<body>
<header class="header header__fixed">
</header>
</body>
But it is displaying something like -
????????? in the header div.
Please help me to solve this problem.
Here is the screen shot of the error when i am saving the .js file.
Please help me to get out this problem.
I already included the in my html file.
Add <meta charset="utf-8"> to the <head> of your HTML.
hi first off all you need to add this two things in to html tag encoding="UTF-8" charset="UTF-8" like..
<html encoding="UTF-8" charset="UTF-8">
and yes the second is the main thing that you need to save this html with Encoding in UTF-8 option this will make hindi characters available try this by creating example locally this will run
I got the answer of my problem... It is so simple.. Just save the file with Unicode character set. I am using dreamweaver and have changes the character type by saving as file.
<html encoding="UTF-8" charset="UTF-8">

Linking javascript file to html

I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well

Print japanese with jQuery

I'm trying to print some Japanese to a page dynamically using jQuery, and it display nothing recognizable. I don't know what went wrong, I reduced the code to the most straight-forward, and it doesn't fix it. Or maybe it's just me being thick.
I use:
$('body').append('<p>日本語</p>');
Which should work, right?
And I get:
日本語
Huh?
Have you made sure that your page is set to use the Japanese character set? If not, make sure that your charset is defined in your <head></head> node :
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
In some cases Utf-8 character set would be helpful. Add this in your Head node as below.
<head>
<meta charset="utf-8" />
</head>

Categories

Resources