I recently changed some of my pages to be displayed via ajax and I am having some confusion as to why the utf8 encoding is now displaying a question mark inside of a box, whereas before it wasn't.
Fore example. The oringal page was index.php. charset was explicitly set to utf8 and is in the <head>. I then used php to query the database
Heres is the original index.php page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Title here</title>
</head>
<body class='body_bgcolor' >
<div id="main_container">
<?php
Data displayed via php was simply a select statement that output the HTML.
?>
</div>
However, when I made the change to add a menu that populated the "main_container" via ajax all the utf8 encoding stopped working. Here's the new code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Title here</title>
</head>
<body class='body_bgcolor' >
About Us
<div id="main_container"></div>
The "display_html()" function calls the javascript page which uses jquery ajax call to retrieve the html stored inside a php page, then places the html inside the div with an id of "main_container". I'm setting the charset in jquery to be utf8 like:
$.ajax({
async: false,
type: "GET",
url: url,
contentType: "charset=utf-8",
success: function(data)
{
$("#main_container").html(data);
}
});
What am I doing wrong?
Encoding is more than specifying the meta tag and content type - the files themselves must really be in the encoding you specify, or you'll get mojibake.
Check that everything is using UTF-8, your database, database connection, table columns. Check that any static files you are including are also encoded in UTF-8.
You wrote
The "display_html()" function calls
the javascript page which uses jquery
ajax call to retrieve the html
stored inside a php page
What do you mean with "the html stored inside a php page"? If you want to load data and display there as a contain of <div> the loaded data should be formated correspondent. I mean that it should be real a code fragment of HTML. Moreover Together with 'contentType' it would be a good idea to specify 'dataType' as "html" or "text". If you don't specity anything the last version of jQuery will "intelligently try to get the results, based on the MIME type of the response". If you know the 'dataType', it would be better to specify there. And if you use ajax use also default 'async: true' and not 'false'.
You should also verify whether jQuery.load method (see http://api.jquery.com/load/) is the best choice for you. You can load with the mathod a full html page if required and display only a part of there: $('#main_container').load('ajax/about_us.html #container');
And about UTF-8 encoding don't forget to save the file really UTF-8 encoded. Use corresponding option of your editor (in Notepad choose "Save As" and then choose as encoding "UTF-8" and not "ANSI").
Make sure all your files are saved as UTF-8 (or UTF-8 w.o. BOM).
If you have uploaded them by FTP or with a web tool, check if they are still UTF-8.
In my case neither of the solutions worked until I placed
header('Content-type: text/html; charset=utf-8');
Related
I am facing a strange issue with wkhtmltopdf. While in Footer and Content, all special characters are shown as supposed, in the header file, they don't show up or get replaced by blocks with a question mark. All of the three files are built the same:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
Is there some kind of trick to tell the header to use utf-8 to?
Btw, I am already telling wkhtmltopdf to use utf-8 not only as meta but also in the script call:
--encoding utf-8
EDIT: I am using an html-header (as you can see on the code I posted). Every 3 HTML files are built the same way. But while it is working in the content, the header don't likes my special chars. Maybe it is a problem that the content in the header comes from a $_POST variable while in the content, the text is built out of the db?
I edit the post, and for many changes i have 1error : there is no attribute X
You have used the attribute named above in your document, but the
document type you are using does not support that attribute for this
element. This error is often caused by incorrect use of the "Strict"
document type with a document that uses frames (e.g. you must use the
"Transitional" document type to get the "target" attribute), or by
using vendor proprietary extensions such as "marginheight" (this is
usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in
the document type you are using, as an undefined element will have no
supported attributes; in this case, see the element-undefined error
message for further information.
How to fix: check the spelling and case of the element and attribute,
(Remember XHTML is all lower-case) and/or check that they are both
allowed in the chosen document type, and/or use CSS instead of this
attribute. If you received this error when using the element
to incorporate flash media in a Web page, see the FAQ item on valid
flash.
Line 71, column 16: there is no attribute "property"
<meta property='og:locale' content='en_US'/>
How can i fix this?
Thanks in advanced.
1 Update:
I replace the
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
with :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
The error didn't any more, but i have any other errors.
2 update
i replace in the header.php the
<meta http-equiv="content-language" content="en_US" />
to:
<meta http-equiv="content-language" content="en_us" />
The second thing that i have done:
In the opengraph.php (Yoast plugin) i replace the:
if ( $echo )
echo "<meta property='og:locale' content='" . esc_attr( $locale ) . "'/>\n";
else
return $locale;
to:
if ( $echo )
echo "<meta property='og:locale' content='en_us'/>\n";
else
return $locale;
But the result is the same. 1 error.
The <meta> tag doesn't have an attribute called "property". You appear to be validating Open Graph protocol tags using the W3C's HTML validator. This is pretty much guaranteed not to work. It might be advantageous to look at Facebook's debugger tool. It should provide feedback on OG markup.
I seem to have an obscure issue with a razor template forcing browsers into quirks mode. It is a simple razor template in umbraco 5. The following code makes chrome, firefox, IE all go into quirks mode:
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
</body>
</html>
If I move the razor syntax completely or move it down so it is not before the doctype it goes into standards compliance mode. I've tried adding various X-UA-Compatible meta tags to no effect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
</body>
</html>
Anyone any ideas what could be the cause? It's as though the browsers think it is rendering something before the doctype but there is nothing I can see.
Thanks
You don't need a semi-colon on your #using statements, perhaps this is what the browser is seeing?
So e.g.
#using Umbraco.Cms.Web;
can just be
#using Umbraco.Cms.Web
Same here
It looks like that it places extra chars (whitespace) right before opening tag < of doctype. I think that it is an editor bug.
Try to remove the opening "<" and insert it back and save after that. also doctype should be 1st line of the file.
The # statements are translated to whitespace. The doctype is expected to be the first line of the document. In this case, the first line is blank, so the doctype is defined as an empty line, which triggers quirksmode.
Given a view with layout, how can I load static files (CSS and JS, essentially) into the <head> from the view file?
layout.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{=T.accepted_language or 'en'}}">
<head>
<title>{{=response.title or request.application}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- include requires CSS files
{{response.files.append(URL(request.application,'static','base.css'))}}
{{response.files.append(URL(request.application,'static','ez-plug-min.css'))}}
-->
{{include 'web2py_ajax.html'}}
</head>
<body>
{{include}}
</body>
</html>
myview.html
{{extend 'layout.html'}}
{{response.files.append(URL(r=request,c='static',f='myview.css'))}}
<h1>Some header</h1>
<div>
some content
</div>
In the above example, the "myview.css" file is either ignored by web2py or stripped out by the browser.
So what is the best way to load page-specific files like this CSS file? I'd rather not stuff all my static files into my layout.
In myview.html reverse the first two lines
{{response.files.append(URL(r=request,c='static',f='myview.css'))}}
{{extend 'layout.html'}}
Mind that 1.78.1 and 1.78.2 had a bug did not allow this to work. It was fixed in 1.78.3 on the same day. The response.file.append(...) can also be moved in the controller action that needs it. You are not supposed to put logic before extend but you define variables to be passed to the extended view.
I'm using AJAX inside my JSF portlet. When the session expires, We are suppose to get the following message(this is the response of AJAX request when session expires)
This page is used to hold your data while you are being authorized for your request.
You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.
<CONTINUE BUTTON>
In IE 6 and 7 I can see the continue button. But in Firefox I don't see that button. Only the text is visible.But in the source code I can see that section, but it is grayed in Firebug.I've the screenshot uploaded to http://img31.imageshack.us/img31/619/firefoxcontinue.jpg
Ideally it should automatically forward the user to the login page, since AJAX cannot redirect that, it just displays the response.So Continue button has to be shown inside the portlet. Can someone please tell me why the HTML form is not shown in Mozilla Firefox.
Thanks
I created a test page. The problem is there when we try to insert the Form inside a table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script type="text/javascript">
function insertAjax(){
// alert('inside ajax');
document.getElementById("wpsportlet").innerHTML='This page is used to hold your data while you are being authorized for your request.<br/><br/>You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.<form action="http://www.google.com" method="get" name="AUTOSUBMIT"><input type="submit" value="Continue"/></form>';
}
</script>
<input type=button value="Submit" onclick="insertAjax();">
<div id="wpsportlet">
</div>
</BODY>
</HTML>
If I nest the form inside a table then the Form is not displayed in Firefox. Can someone please help a work around for this.
Your generated DOM is invalid. Character data (text) and <br>, <form> and <script> elements may not be child elements of elements - only <tbody>, <thead> and <tfoot> element may (although in XHTML you can have <tr> elements too).
For those elements to exist inside a table, they must appear entirely within a table cell.
Given broken HTML, Firefox will do a good job of compensating for author errors, but when the broken DOM is generated with JS, you bypass some of the autocorrection routines.
As an aside, your Doctype (HTML + Transitional + No system identifier) triggers Quirks mode - which doesn't generally help matters.
I suggest:
Switch to a Doctype that triggers Standards mode
Validate your markup
Build the content you are adding with JavaScript using plain HTML instead
Make that validate
Write JavaScript to generate the DOM you have now tested as being valid
Why don't you add a button using JavaScript when the response is shown to the screen?
This way should work on all browsers...
function addButton() {
//Create an input type dynamically.
var element = document.createElement('input');
//Assign different attributes to the element.
element.setAttribute('type', 'button');
element.setAttribute('value', 'Continue');
element.setAttribute('name', 'somename');
element.setAttribute('id', 'someid');
var foo = document.getElementById("fooBar");
//Append the element in page
foo.appendChild(element);
}