javascript unable to display japanese characters ?

[anatak]

Hello,

I started a topic in php help but maybe it is a javascript problem.
this is the thread
http://www.phpfreaks.com/forums/index.php/topic,122898.0.html

what I am wondering about is if Javascript is unable to display Japanese characters. (2byte characters)

I am trying to get a dynamic dropdown and the first dropdown does not have the problem. (japanese is displayed correctly)
the second dropdown wich is generated using a javascript function does have the problem. (japanese is not displayed correctly)

If i display the results directly in html the japanese text is displayed correctly.

did anybody encounter something similar before and if yes could you solve it or is it impossible ?

kind regards
anatak

[anatak]

Hello,

I figured out what is happening but I don't know how to solve the problem.

The array with the japanese values is here

ken_array[41].city = new Array();
ken_array[41].city[143] = '福岡';
ken_array[41].city[144] = '北九州';
ken_array[41].city[145] = '久留米市';

the array holds the values correctly but when they are displayed by the script they show up like this in html

<select name="city">
<option value="143">&amp;#31119;&amp;#23713;</option>
<option value="144">&amp;#21271;&amp;#20061;&amp;#24030;</option>
<option value="145">&amp;#20037;&amp;#30041;&amp;#31859;&amp;#24066;</option>
</select>

for some reason the '福岡' is changed into &amp;#21271;&amp;#20061;&amp;#24030;
The & is transformed into &amp;

Can anybody explain why this is happening and how to make it not happen ?

thanks
anatak

[mainewoods]

where is the javascript code that creates the dropdown? 

[anatak]

Here is the full script
I replaced the script tags with DELETED

[code]
<?php
function new_location_edit($city01, &$dbread, $time, $default_language)
{
$userlang_ken="KenNameLan_".$_SESSION['userlanguage'];
$defaultlang_ken="KenNameLan_".$default_language;
$userlang_city="CityNameLan_".$_SESSION['userlanguage'];;
$defaultlang_city="CityNameLan_".$default_language;;
// echo "userlang: ".$userlang_ken;
$TableName1 = 'ken';
$TableName2 = 'city';
//$Query is the query that select the list of prefecture ordered by name
$QuerySelectKen = "SELECT $TableName1.*
FROM $TableName1
WHERE KenId <> 1
order by KenNameLan_1 ASC;";
//echo $QuerySelectKen . '<BR>';
$Result1= $dbread->CacheGetAll($time,$QuerySelectKen);
foreach($Result1 AS $Row1){
if($Row1[$userlang_ken]==null){
$kens[($Row1['KenId'])]['name'] = $Row1[$defaultlang_ken];
}else{
$kens[($Row1['KenId'])]['name'] = $Row1[$userlang_ken];
}

// $kens[($Row1['KenId'])]['name'] = $Row1['KenNameLan_1'];
$QuerySelectCity = "SELECT $TableName2.*
FROM $TableName2
WHERE $TableName2.KenId = $Row1[KenId]
OR $TableName2.KenId = '0'
ORDER BY CityNameLan_1 ASC;";
// echo $QuerySelectCity . '<BR>';
$Result2 = $dbread->CacheGetAll($time,$QuerySelectCity);
foreach($Result2 AS $Row2){
if($Row2[$userlang_city]==null){
//echo "<br />".$Row2['CityId']."null";
$kens[($Row1['KenId'])]['city'][($Row2['CityId'])] = $Row2[$defaultlang_city];
}else{
echo  "<br />".$Row2['CityId'].": ".$Row2[$userlang_city]." ".$Row2[$defaultlang_city];
$kens[($Row1['KenId'])]['city'][($Row2['CityId'])] = $Row2[$userlang_city];
}
}
}
//get the ken and city for this user
if($city01!=null){
$QuerySelectKenCity = "SELECT $TableName2.*, $TableName1.KenNameLan_1
FROM $TableName2
LEFT JOIN {$TableName1} ON {$TableName2}.KenId = {$TableName1}.KenId
WHERE $TableName2.CityId = $city01;";
}else{
//echo "city = null";
$QuerySelectKenCity = "SELECT $TableName2.*, $TableName1.*
FROM $TableName2
LEFT JOIN {$TableName1} ON {$TableName2}.KenId = {$TableName1}.KenId
WHERE $TableName2.CityId = 1;";

}
echo $QuerySelectKenCity;
$Row3 = $dbread->CacheGetRow($time,$QuerySelectKenCity);
//echo "KEN: ".$Row3['KenNameLan_1'].$Row3['KenId'];
//echo "CITY: ".$Row3['CityNameLan_1'].$Row3['CityId'];

print <<<LLL
<DELETEDlanguage="Javascript" type="text/javascript">
<!--
function showKens(){
var kenList = document.form1.ken;
var cityList = document.form1.city;
var kenId = kenList.options[kenList.selectedIndex].value;
var cityName = '';

cityList.options.length = 0;

i = 0;
for (y in ken_array[kenId].city){
cityName = ken_array[kenId].city[y];
cityList.options[i] = new Option(cityName, y);
i++;
}
}
var ken_array = new Array();
LLL;
foreach ($kens as $kenId=>$kenDetails){
$kenName = $kenDetails['name'];
print <<<LLL

ken_array[$kenId] = new Array();
ken_array[$kenId].name = '$kenName';
ken_array[$kenId].city = new Array();
LLL;
foreach ($kenDetails['city'] as $cityId=>$city){
print <<<LLL

ken_array[$kenId].city[$cityId] = '$city'
LLL;
}
}
print <<<LLL

document.write('<select name="ken" onchange="showKens()">');
LLL;
if($Row3[$userlang_ken]==null){
print <<<LLL
document.write('<option value="$Row3[KenId]">$Row3[$defaultlang_ken]</option>');
LLL;
}else{
print <<<LLL
document.write('<option value="$Row3[KenId]">$Row3[$userlang_ken]</option>');
LLL;
}
print <<<LLL
for (var i in ken_array){
document.write('<option value="'+i+'">'+ken_array[i].name+'</option>');
}
document.write('</select>');
document.write('<input name="kenname" type="hidden" value="$Row3[KenNameLan_1]">');
LLL;
if($Row3[$userlang_city]==null){
print <<<LLL
document.write('<select name="city"><option value="$Row3[CityId]">$Row3[$defaultlang_city]<option></select>');
LLL;
}else{
print <<<LLL
document.write('<select name="city"><option value="$Row3[CityId]">$Row3[$userlang_city]<option></select>');
LLL;
}
print <<<LLL
document.write('<input type="hidden" name="cityname" value="$Row3[CityNameLan_1]">');
-->
</DELETED>
LLL;
}
?>
[/code]

I think the problem is with the new Option() function

if i try this
cityList.options[i] = new Option('&#31119;&#23713;', y);
the japanese text shows up like this
'&amp;#31119;&amp;#23713; it should be like '&#31119;&#23713;
the & is changed into &amp;

any help very much appreciated
anatak

I attach 4 files
1 to create the city table
2 to create the ken table
3 is the function
4 is the form that uses the dropdown


Here is a piece of the code I took from my browser output. That way you don't have to mess with the uploaded files (hindsight 20/20 )
[code]
<script language="Javascript" type="text/javascript">
<!--
document.write('<form name="form1" method="post" action="/kyushunetwork/public_html/index.php">');
-->
</script>

<script language="Javascript" type="text/javascript">
<!--
function showKens(){
var kenList = document.form1.ken;
var cityList = document.form1.city;
var kenId = kenList.options[kenList.selectedIndex].value;
var cityName = '';
cityList.options.length = 0;
document.write('<select name="city"><option value="1">&#24066;&#12434;&#36984;&#12435;&#12391;</option>');
i = 0;
for (y in ken_array[kenId].city){
cityName = ken_array[kenId].city[y];
//cityList.options[i] = new Option(cityName, y);
//cityList.options[i] = new Option('&#31119;&#23713;', y);
document.write('<option value="'+y+'">'+ken_array[kenId].city[y]+'</option>');
i++;
}
document.write('</select>');
}
var ken_array = new Array();
ken_array[46] = new Array();
ken_array[46].name = '&#23470;&#23822;';
ken_array[46].city = new Array();
ken_array[46].city[151] = 'Miyazaki';
ken_array[41] = new Array();
ken_array[41].name = '&#31119;&#23713;';
ken_array[41].city = new Array();
ken_array[41].city[143] = '&#31119;&#23713;';
ken_array[41].city[144] = '&#21271;&#20061;&#24030;';
ken_array[41].city[145] = '&#20037;&#30041;&#31859;&#24066;';
ken_array[43] = new Array();
ken_array[43].name = '&#38263;&#23822;';
ken_array[43].city = new Array();
ken_array[43].city[147] = 'Nagasaki';
ken_array[43].city[148] = 'Sasebo';
document.write('<select name="ken" onchange="showKens()">');
document.write('<option value="1">&#30476;&#12434;&#36984;&#12435;&#12391;</option>');
for (var i in ken_array){
document.write('<option value="'+i+'">'+ken_array[i].name+'</option>');
}
document.write('</select>');
document.write('<input name="kenname" type="hidden" value="Select Prefecture" />');
document.write('<select name="city"><option value="1">&#24066;&#12434;&#36984;&#12435;&#12391;</option></select>');
document.write('<input type="hidden" name="cityname" value="Select city" />');
//-->
</script></form>
<script language="Javascript" type="text/javascript">
document.write(ken_array[41].city[143]);
document.write(ken_array[41].city[144]);
</script>
<select>
<option value="143">&amp;#31119;&amp;#23713;</option>
<option value="144">&amp;#21271;&amp;#20061;&amp;#24030;</option>
<option value="145">&amp;#20037;&amp;#30041;&amp;#31859;&amp;#24066;</option>
</select>
&#31119;&#23713;
&#31119;&#23713;<br />
&amp;#21271;&amp;#20061;&amp;#24030;<br />
&amp;#20037;&amp;#30041;&amp;#31859;&amp;#24066;<br />
</td>

[/code]

[attachment deleted by admin]

[mainewoods]

the 'fromCharCode' javascript function returns unicode strings(2 byte) so maybe that could work for you:
http://www.w3schools.com/jsref/jsref_fromCharCode.asp

[anatak]

puttinf the fromCharcode into the Option does not work
cityList.options[i] = new Option(fromCharcode(cityName), y);

gives a weird result.

[BugX]

I try this code:
[quote]
<script>
city = new Array();
city[0] = '福岡';
city[1] = '北九州';
city[2] = '久留米市';
alert(city[0]);
</script>

<form>
<input type="text" name="av">
<input type="button" onclick="av.value=city[1]"/>
</form>
[/quote]
It works.. What I did is just save the html file with utf-8 encoding (by default it use ANSI encoding).
Hope it'll solve ur problem..

Regards,
Andre

[anatak]

Hello Andre,

this may sound stupid.
How do you save a php file with utf-8 encoding ?

kind regards
anatak

[mainewoods]

[code]fromCharcode(cityName)[/code]
--the function fromCharcode requires an integer as it's parameter.  Your cityname field contains an '&' and '#' at the beginning of the field.  They would have to be stripped off and converted to int before using, like this:
[code]// strip off first 2 characters and convert to integer:
var intcityname = parseInt(cityname.substr(2));
// now use it in 'fromCharcode'
fromCharcode(intcityname);[/code]

[BugX]

I assume you used notepad or textpad as a texteditor (or maybe you can use any other tools),
when u try to save the file, eg:
file - save as -
there's an option called "encoding", change the ANSI (default choice) with UTF-8.

Regards,
Andre

[anatak]

I have been trying to get this to work for the last 2 months but I can not find a solution.

I don't know how much work is needed on the script but I don't think it is a lot of work for an experienced Javascripter. (I am totaly ignorant about Javascript)

I will give 2000 yen (18 dollars or so) to PHPfreaks using Paypall if someone can get me a solution.

Here is the script as it is generated from php.
[code]
<script language="Javascript" type="text/javascript">
<!--
document.write('<form name="form1" method="post"

action="/kyushuinfo/public_html/index.php">');
-->

</script>
SELECT ken.*
FROM ken
WHERE KenId <> 1
order by KenNameLan_2 ASC, KenNameLan_1

ASC;<br /> <script language="Javascript" type="text/javascript">
<!--
function showKens(){
var kenList = document.form1.ken;
var cityList = document.form1.city;
var kenId = kenList.options[kenList.selectedIndex].value;
var cityName = '';

cityList.options.length = 0;

i = 0;
for (y in ken_array[kenId].city){
cityName = ken_array[kenId].city[y];


cityList.options[i] = new Option(cityName, y);
i++;
}
}
var ken_array = new Array();
ken_array[36] = new Array();
ken_array[36].name = 'Yamaguchi';
ken_array[36].city = new Array();
ken_array[36].city[134] = 'Shimonoseki';
ken_array[36].city[135] = 'Shuunan';
ken_array[36].city[136] = 'Ube';
ken_array[36].city[137] = 'Yamaguchi';
ken_array[22] = new Array();
ken_array[22].name = 'Yamanashi';
ken_array[22].city = new Array();
ken_array[22].city[82] = 'Gifu';
ken_array[22].city[83] = 'Oogaki';
ken_array[2] = new Array();
ken_array[2].name = '&#21271;&#28023;&#36947;';
ken_array[2].city = new Array();
ken_array[2].city[2] = 'Asahikawa';
ken_array[2].city[3] = 'Hakodate';
ken_array[2].city[4] = 'Kushiro';
ken_array[2].city[5] = 'Obihiro';
ken_array[2].city[6] = 'Otaru';
ken_array[2].city[7] = 'Sapporo';
ken_array[2].city[8] = 'Tomakomai';
ken_array[46] = new Array();
ken_array[46].name = '&#23470;&#23822;';
ken_array[46].city = new Array();
ken_array[46].city[151] = 'Miyazaki';
ken_array[41] = new Array();
ken_array[41].name = '&#31119;&#23713;';
ken_array[41].city = new Array();
ken_array[41].city[143] = '&#31119;&#23713;';
ken_array[41].city[144] = '&#21271;&#20061;&#24030;';
ken_array[41].city[145] = '&#20037;&#30041;&#31859;&#24066;';
ken_array[43] = new Array();
ken_array[43].name = '&#38263;&#23822;';
ken_array[43].city = new Array();
ken_array[43].city[147] = 'Nagasaki';
ken_array[43].city[148] = 'Sasebo';
document.write('<select name="ken" onchange="showKens()">');

document.write('<option value="1">&#30476;&#12434;&#36984;&#12435;&#12391;</option>'); for

(var i in ken_array){
document.write('<option value="'+i+'">'+ken_array[i].name+'</option>');
}
document.write('</select>');
document.write('<input name="kenname" type="hidden" value="Select Prefecture" />');

document.write('<select name="city"><option

value="1">&#24066;&#12434;&#36984;&#12435;&#12391;</option></select>');

document.write('<input type="hidden" name="cityname" value="Select city" />');
-->
</script></form>
[/code]

desperately anatak