PDA

View Full Version : Ajax Includes and Special Characters?



MizzBia
11-06-2009, 04:51 AM
1) Script Title: Ajax Includes Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm


Hello,
I am using the ajax includes script in combination with a perl/cgi shopping cart. I am using the ajax script to display my homepage content for 2 pages, one in english and one in french.

The english page works fine. The problem is with my french page. Every time I use a special character for french accents (example: ), the text does not display properly.

In firefox, it replaces the letter with a question mark character � and in IE, nothing shows at all.

Does anyone know how I can fix this? I REALLY want to use this script but I need to be able to use french accents :(

Please help....

molendijk
11-06-2009, 12:28 PM
Some time ago, I posted something about this problem here (http://www.dynamicdrive.com/forums/showthread.php?t=33313).
Maybe it helps.
===
Arie Molendijk.

MizzBia
11-06-2009, 05:53 PM
Hello,
thank you for replying. I'm a little confused about what I to do. Am I supposed to use your code instead of the ajax script or in combination with it?? If it is in combination with, what am I adding or changing?

Thank you

molendijk
11-07-2009, 02:10 AM
My code contains both ajax and object-include. Just follow the instructions in the demo. I don't have much time right now, but if you send me a link to your site, I'll try to look into it as soon as I've got the time (within a week).
In the meantime, if someone else has an alternative solution to the foreign characters problem, that would be great.
Arie.

jscheuer1
11-07-2009, 04:38 AM
Just because I'm responding here, don't miss molendijk's most recent post (which probably came before I posted this and after your last response in this thread, and before you checked back - I hope you understand) immediately before mine here.

That said, this is generally an issue of character encoding. Like say you have a specific encoding for your page that you are importing to that allows the French characters to display. That's great, but when other content is imported via AJAX, generally that will default to UTF-8 (the most common) or whatever the server is set to.

It is my opinion, and this has come up numerous times, that the best solution is to make sure that your host server is set to serve all pages of this type with the desired character encoding. I'm not 100% sure of that, though I know it has worked for others, and have conducted tests with PHP headers that confirm that method.

This requires that you have some control over the server that is acting as your host, and this can be in various ways. Like if your host supports PHP, the imported pages may be given the PHP extension (usually .php) and an appropriate PHP header to set the desired encoding (other server side languages, possibly asp and others, that support this type of action - setting the character encoding a page is served as, may also be used). Or, if you are allowed to set encoding for the files on your host via .htaccess files, that can also work. Or your host may be willing to work with you to resolve this. Also, if your host is your own server, or allows you wide latitude in configuration of your site, this type of thing may be set in the server/site/folder configuration settings.

An example PHP (if this is available to you) header (before anything else on the page) for an imported file with the .php extension would be:


<?php
header('Content-type: text/html; charset=utf-8');
?>

Substitute your desired encoding for utf-8.

The main issue is that meta tags on the page, which are more or less the last fall back for setting character encoding when all else fails, ex:


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

will not be respected on AJAX imported content, rather defaulting to the encoding that the server is set to default to, or directed to serve for the given page.

molendijk
11-07-2009, 04:36 PM
MizzBia, if you don't have control over your server (see post by John above), then do as indicated below. Try to understand what happens, then adapt to your needs.
(i) Put the following in your main page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html
<head>
<title>Including external content with ajax + object</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
/***********************************************
* Ajax Includes script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var rootdomain="http://"+window.location.hostname

/*This line replaces the original function ajaxinclude(url) {*/
document.ajaxinclude = function (url) {

var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null);

//This line added to the original
document.write('<div style="display:none">');

writecontent(page_request)

//This line added to the original
document.write('<\/div>');
}

function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}


/****************ADDED to the Ajax-script*****************/


/* This is used to replace the ajax-HTML that is fetched with the Ajax-function above, but it leaves the external js and css intact. Used because Ajax-calls don't handle foreign characters well. Fetching external HTML with the help of a hidden object solves this problem. You don't have to put content in blank.html*/
document.write('<object type="text/html" data="blank.html" width="0" height="0" name="object"><\/object>');

/*With this function, we load html into the object, from which the loaded content will be extracted with the help of function Transfer_To(InternalId) (below) */
function Load_External(url){frames['object'].location.replace(url)}

/* This is for transporting the entire content of an external file from the object to an internal div, or span etc.*/
function Transfer_To(InternalId){
try{document.getElementById(InternalId).innerHTML=window.frames['object'].body.innerHTML;}
catch(e){document.getElementById(InternalId).innerHTML=window.frames['object'].document.body.innerHTML;}
}

/* This removes 'old' extracted content. Use it if you want to replace an external file with another one*/
function Remove(tag,SomeClass) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == SomeClass){
/*while (els.item(i).firstChild)
els.item(i).removeChild(els.item(i).firstChild);*/
els.item(i).innerHTML='';

}
}
}

/*This is not sympathetic AT ALL, but I'll keep it here until Opera handles object-elements correctly */
if(window.opera){alert("You're using Opera. On this site, the links for importing external documents don't work with this browser. Please use another browser.");history.back()}
</script>

<!-- Put as many includes as you want. It replaces the original <script type="text/javascript">ajaxinclude("afile.htm")</script> -->
<script type="text/javascript">
document.ajaxinclude("external1.html");document.ajaxinclude("external2.html");
</script>

<style type="text/css">
body{font-family:verdana; font-size:80%;margin:10px}
</style>

<body>

<a href="javascript:;" onmousedown="Load_External('external1.html');" onclick="Remove('div','inserted'); Transfer_To('somediv1');">external1.html</a> |

<a href="javascript:;" onmousedown="Load_External('external2.html')" onclick="Remove('div','inserted'); Transfer_To('somediv2')">external2.html</a>

&nbsp;<button style="padding:0 .25em 0 .25em; width:auto; overflow:visible;" onclick="Remove('div','inserted')">Remove external</button>

<!-- The divs in which the external contents are loaded -->
<div id="somediv1" class="inserted" ></div>
<div id="somediv2" class="inserted" style="position:absolute;left:150px"></div>

</body>

</html>

(ii) The file external1.html could be something like:

<html>

<head>

<style type="text/css">
.styles1{color:darkred;padding:3px;background:#dedede;border:1px solid red; width:350px; margin-bottom:2px;}
</style>

<script type="text/javascript">
function alarm1() {alert('External script, called from "external1.html"')}
</script>

</head>

<body>
<div class="styles1">
This is some part of <i>external1.html</i>.<br>
Foreign characters remain intact during the transfer: , , , .<br>
The external scripts and styles are not lost during the process.<br>
Click <a href="javascript:void(0)" onclick="alarm1()">here</a> to see an external script at work.
</div>

</body>

</html>


(iii) External2.html:

<html>

<head>

<style type="text/css">
.styles2{color:darkred;padding:3px;background:lightyellow;border:1px solid red;width:350px;margin-bottom:2px;}
</style>

<script type="text/javascript">
function alarm2(){alert('External script, called from "external2.html"')}
</script>
</head>

<body >

<div class="styles2">
This is some part of <i>external2.html</i>.<br>
Foreign characters remain intact during the transfer: , , , .<br>
The external scripts and styles are not lost during the process.<br>
Click <a href="javascript:void(0)" onclick="alarm2()">here</a> to see an external script at work.
</div>

</body>

</html>

===
Good luck,
Arie.
===

molendijk
11-07-2009, 09:59 PM
There's also another solution: convert the external files to Unicode with this handy tool (http://www.let.rug.nl/molendyk/converters/convert_to_unicode.html). Just copy the external page(s) and put them in the converter.
===
Arie.

MizzBia
11-09-2009, 05:12 AM
Thank you so much for all of your help! I will try using your fixes and keep my fingers crossed that it works. I really appreciate you taking the time to help me :)