Learn VBA & Macros in 1 Week!

JavaScript - Chinese Flashcard Dhtml App (utf8 Problem)

Full Excel VBA Course - Beginner to Expert

Chinese Flashcard Dhtml App (utf8 Problem)	View Content

*** This is FireFox Code - it will not work in IE***

i'm trying to finish up this Chinese Flashcard App (i need to cram for my HSK test). The problem is, whenever i try to load a UTF8 file (has chinese characters in it) i get the following error:

"utf8str is null"

it is trying to load a file from the C:\ directory. The file is there. If it wasn't there, it wouldn't show up in the directory listing of my app's file browser.

since i have the HTML and JS in 4 different files, i uploaded them as a single RAR file to a file sharing website. I'll also post the code he

http://www.2shared.com/file/11421487...83b/Final.html

any suggestions would be greatly appreciated!

main HTML file

Code:

// Set Global Variables
var ChineseCard = new Array();
var PinYinCard = new Array();
var EnglishCard = new Array();
var Records = new Array();
var Know = 0;
var DontKnow = 0;
var CurrentCard = 0;
var NumberOfCards = 0;
//var DataFile;
var Directory = "C:\\";
var Delimeter = ",";

function ClickShowPinYin()
{
 document.getElementById("PinYin").value = PinYinCard[CurrentCard];
}

function ClickShowEnglish()
{
 document.getElementById("English").value = EnglishCard[CurrentCard];
}

function ClickKnow()
{
Know = Know + 1;

     if(CurrentCard == NumberOfCards)
       {
         // Display the score
         alert("You scored " + Know + " out of " + NumberOfCards -1);
         CurrentCard = 0;
         Know = 0;
         DontKnow = 0;
         // clear all textboxes and put index(0) chinese character into the chinese character textbox
         
       }
CurrentCard = CurrentCard + 1;

document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}

function ClickDontKnow()
{
DontKnow = DontKnow + 1
   if(CurrentCard == NumberOfCards)
       {
         // Display the score
         alert("You scored " + Know + " out of " + NumberOfCards -1);
         CurrentCard = 0;
         Know = 0;
         DontKnow = 0;
         // clear all textboxes and put index(0) chinese character into the chinese character textbox
       }
CurrentCard = CurrentCard + 1;

document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value  = ChineseCard[CurrentCard];
}

function ClearEditor()
{
 // Clear all the text boxes in the editor
 document.getElementById("EditChinese").value = "";
 document.getElementById("EditPinYin").value = "";
 document.getElementById("EditEnglish").value = "";
}

function WriteData()
{
 // Conicate the Record data
 var WriteData = document.getElementById("EditChinese").value  + Delimeter + 
 document.getElementById("EditPinYin").value  + Delimeter + 
 document.getElementById("EditEnglish").value + Delimeter + "\r";
 
 // Load the data file's current contents
 var OldData = LoadFromDisk(DataFile);
 
 if (OldData == null)
    {
	 var WriteDataUTF8 = utf8Encode(WriteData);
	 // The file was blank, so don't try to append null content data
	 SaveToDisk(DataFile, WriteDataUTF8 + "\n");
	}
	else
	{
	 var OldDataUTF8 = utf8Decode(OldData);
	 var AppendData = OldDataUTF8 + WriteData + "\n";
	 
	 var UTF8data = utf8Encode(AppendData)
     // Write the data to the file
     SaveToDisk(DataFile, UTF8data);
	}
 
 // Clear the TextBoxes to prepare for the next entry
 ClearEditor();
}

function LoadFlashCard(DataFile)
{
 // Hide the file browser
 document.getElementById("FileBrowser").style.visibility = "hidden";
 
 // Show the Flashcard Player DIV  and load the current flashcard datafile
 document.getElementById("FlashCardPlayer").style.visibility = "visible";
 
 // Add the directory path onto the Filename
 DataFiletmp = Directory + DataFile;
 DataFile = DataFiletmp;
 
 // Load the FlashCard Information from the DataFile into the Arrays
 var LoadData = LoadFromDisk(DataFile);
 
 // Convert the Datafile from UTF8  to ASCII
 var LoadDataUTF8 = utf8Decode(LoadData);
 
 Records = LoadDataUTF8.split(Delimeter);
 
 // Load the Elements in to the   ChineseText, PinYin, and English   Arrays
 
 NumberOfCards = (Records.length -1) / 3;
 
 // Load the Chinese Characters 
 var Ptr = 0;
  for (var x = 0; x < NumberOfCards * 3; x = x + 3)
     {
	  ChineseCard[Ptr] = Records[x];
	  Ptr++;
	 }
	 
 Ptr = 0;
 // Load the PinYin
  for (var x = 1; x < NumberOfCards * 3; x = x + 3)
     {
	  PinYinCard[Ptr] = Records[x];
	  Ptr++;
	 }
	 
 Ptr = 0;
 // Load the English
  for (var x = 2; x < NumberOfCards * 3; x = x + 3)
     {
	  EnglishCard[Ptr] = Records[x];
	  Ptr++;
	 }
	 
// Load the First Flashcard   Showing the Chinese Character First
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}

here's Menu.js

Code:

function init()
{
 document.getElementById("FlashCardPlayer").style.visibility = "hidden";
 document.getElementById("FlashCardEditor").style.visibility = "hidden";
 document.getElementById("MainMenu").style.visibility = "visible";
}

function ShowPlayer()
{
 document.getElementById("MainMenu").style.visibility = "hidden";
 document.getElementById("FlashCardEditor").style.visibility = "hidden";
 
 // Display the File Browse Dialogue to choose a Data File
 document.getElementById("FileBrowser").style.visibility = "visible";
 document.getElementById("FileBrowserToolbar").style.visibility = "visible";
 FileBrowser("FileBrowser", Directory);
}

function ShowEditor()
{
 document.getElementById("FlashCardEditor").style.visibility = "visible";
 document.getElementById("FlashCardPlayer").style.visibility = "hidden";
 document.getElementById("MainMenu").style.visibility = "hidden";
}

function ShowMain()
{
 document.getElementById("MainMenu").style.visibility = "visible";
 document.getElementById("FlashCardPlayer").style.visibility = "hidden";
 document.getElementById("FlashCardEditor").style.visibility = "hidden";
 document.getElementById("FileBrowser").style.visibility = "hidden";
    document.getElementById("FileBrowserToolbar").style.visibility = "hidden";

}

function FileBrowser(div, Path)
{
 // Get a list of files in the directory
 var FileList = new Array();
 GetFileList(Directory, FileList)
 
 // Generate the HTML data for the DIV
 
 	var HTMLdata;
	for(var x = 0; x < FileList.length -1; x++)
    {
	 // Strip the Filename Extension off of the eBook File Name
     var LableName = FileList[x];
	 LableName = LableName.replace(Directory, "");
	 if ( FileList[x].search('csv') > -1)
	    {
	     HTMLdata = HTMLdata + "<input type='button' value='" + LableName + "'" + " onClick=LoadFlashCard('" + FileList[x] + "')><br>";
	    }
	}

    // firefox puts 'undefined' into the first string - for no logical reason
	// this will remove it
	HTMLdata = HTMLdata.replace("undefined", "");
	
	// Write the HTML data to the DIV
	document.getElementById(div).innerHTML = HTMLdata
}

function FileManager(div, Path)
{
// Get a list of files in the directory
 var FileList = new Array();
 GetFileList(Directory, FileList)
 
 // Generate the HTML data for the DIV
 
 	var HTMLdata;
	for(var x = 0; x < FileList.length -1; x++)
    {
	 // Strip the Filename Extension off of the eBook File Name
     var LableName = FileList[x];
	 LableName = LableName.replace(Directory, "");
	 	 
	 var FileClass = "<input type='button' value='" + LableName + "'>&nbsp;&nbsp;&nbsp;";
	 var RenameButton = "<img src='delete.png' onClick='RemoteFile('" + FileList[x] + "');'>"
	 var DeleteButton = "<img src='rename.png' onClick='RenameFile('" + FileList[x] + "');'>"
	 
	 HTMLdata = HTMLdata + FileClass + RenameButton + DeleteButton + "<br>";
	}
	
    // firefox puts 'undefined' into the first string - for no logical reason
	// this will remove it
	HTMLdata = HTMLdata.replace("undefined", "");
	
	// Write the HTML data to the DIV
	document.getElementById(div).innerHTML = HTMLdata
	
	// Hide the Top-Level DIV
	document.getElementById("MainMenu").style.visibility = "hidden";
    document.getElementById("FlashCardEditor").style.visibility = "hidden";
 
    // Display the FileBrowser DIV
    document.getElementById("FileBrowser").style.visibility = "visible";
    document.getElementById("FileBrowserToolbar").style.visibility = "visible";
}

function RenameFile(FileName)
{
 // Display the Rename File Dialogue Box
 document.getElementById("RenameBox").style.visibility = "visible";
 
 // 
 
 
 
 // Reload the Filemanager with updated content
 FileManager("FileBrowser", Directory);
}

function RemoveFile(FileName)
{
 // Delete the file from the file system
 DeleteFile(FileName)
 alert("File Deleted");
 
 // Reload the Filemanager with updated content
 FileManager("FileBrowser", Directory);
}

here's Flashcard.js

Code:

// Set Global Variables
var ChineseCard = new Array();
var PinYinCard = new Array();
var EnglishCard = new Array();
var Records = new Array();
var Know = 0;
var DontKnow = 0;
var CurrentCard = 0;
var NumberOfCards = 0;
//var DataFile;
var Directory = "C:\\";
var Delimeter = ",";

function ClickShowPinYin()
{
 document.getElementById("PinYin").value = PinYinCard[CurrentCard];
}

function ClickShowEnglish()
{
 document.getElementById("English").value = EnglishCard[CurrentCard];
}

function ClickKnow()
{
Know = Know + 1;

     if(CurrentCard == NumberOfCards)
       {
         // Display the score
         alert("You scored " + Know + " out of " + NumberOfCards -1);
         CurrentCard = 0;
         Know = 0;
         DontKnow = 0;
         // clear all textboxes and put index(0) chinese character into the chinese character textbox
         
       }
CurrentCard = CurrentCard + 1;

document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}

function ClickDontKnow()
{
DontKnow = DontKnow + 1
   if(CurrentCard == NumberOfCards)
       {
         // Display the score
         alert("You scored " + Know + " out of " + NumberOfCards -1);
         CurrentCard = 0;
         Know = 0;
         DontKnow = 0;
         // clear all textboxes and put index(0) chinese character into the chinese character textbox
       }
CurrentCard = CurrentCard + 1;

document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value  = ChineseCard[CurrentCard];
}

function ClearEditor()
{
 // Clear all the text boxes in the editor
 document.getElementById("EditChinese").value = "";
 document.getElementById("EditPinYin").value = "";
 document.getElementById("EditEnglish").value = "";
}

function WriteData()
{
 // Conicate the Record data
 var WriteData = document.getElementById("EditChinese").value  + Delimeter + 
 document.getElementById("EditPinYin").value  + Delimeter + 
 document.getElementById("EditEnglish").value + Delimeter + "\r";
 
 // Load the data file's current contents
 var OldData = LoadFromDisk(DataFile);
 
 if (OldData == null)
    {
	 var WriteDataUTF8 = utf8Encode(WriteData);
	 // The file was blank, so don't try to append null content data
	 SaveToDisk(DataFile, WriteDataUTF8 + "\n");
	}
	else
	{
	 var OldDataUTF8 = utf8Decode(OldData);
	 var AppendData = OldDataUTF8 + WriteData + "\n";
	 
	 var UTF8data = utf8Encode(AppendData)
     // Write the data to the file
     SaveToDisk(DataFile, UTF8data);
	}
 
 // Clear the TextBoxes to prepare for the next entry
 ClearEditor();
}

function LoadFlashCard(DataFile)
{
 // Hide the file browser
 document.getElementById("FileBrowser").style.visibility = "hidden";
 
 // Show the Flashcard Player DIV  and load the current flashcard datafile
 document.getElementById("FlashCardPlayer").style.visibility = "visible";
 
 // Add the directory path onto the Filename
 DataFiletmp = Directory + DataFile;
 DataFile = DataFiletmp;
 
 // Load the FlashCard Information from the DataFile into the Arrays
 var LoadData = LoadFromDisk(DataFile);
 
 // Convert the Datafile from UTF8  to ASCII
 var LoadDataUTF8 = utf8Decode(LoadData);
 
 Records = LoadDataUTF8.split(Delimeter);
 
 // Load the Elements in to the   ChineseText, PinYin, and English   Arrays
 
 NumberOfCards = (Records.length -1) / 3;
 
 // Load the Chinese Characters 
 var Ptr = 0;
  for (var x = 0; x < NumberOfCards * 3; x = x + 3)
     {
	  ChineseCard[Ptr] = Records[x];
	  Ptr++;
	 }
	 
 Ptr = 0;
 // Load the PinYin
  for (var x = 1; x < NumberOfCards * 3; x = x + 3)
     {
	  PinYinCard[Ptr] = Records[x];
	  Ptr++;
	 }
	 
 Ptr = 0;
 // Load the English
  for (var x = 2; x < NumberOfCards * 3; x = x + 3)
     {
	  EnglishCard[Ptr] = Records[x];
	  Ptr++;
	 }
	 
// Load the First Flashcard   Showing the Chinese Character First
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}

here's JSxpcom.js:
Code:

function SaveToDisk(filepath, content) {
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	} catch (e) {
		alert("Permission to save file was denied.");
	}
	var file = Components.classes["@mozilla.org/file/local;1"]
		.createInstance(Components.interfaces.nsILocalFile);
	file.initWithPath( filepath );
	if ( file.exists() == false ) {
		file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
	}
	var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
		.createInstance( Components.interfaces.nsIFileOutputStream );

	outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
	var output = content;
	var result = outputStream.write( output, output.length );
	outputStream.close();
}

function LoadFromDisk(filePath)
{
 if(window.Components)
   try
   {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath(filePath);
    if (!file.exists())
    return(null);
    var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
    inputStream.init(file, 0x01, 00004, null);
    var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
    sInputStream.init(inputStream);
    return(sInputStream.read(sInputStream.available()));
   }
   catch(e)
   {
    //alert("Exception while attempting to load\n\n" + e);
    return(false);
   }
return(null);
}

function GetFileList(Directory, FileList)
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var _nsILocalFile = Components.classes["@mozilla.org/file/local;1"]
      .createInstance(Components.interfaces.nsILocalFile);
// initialize path to work with
_nsILocalFile.initWithPath(Directory);
 
// get file interface implemenation
// this means that an XPCOM Class can implement multiple interface
var lv_oFile = _nsILocalFile.QueryInterface(Components.interfaces.nsIFile);
var lv_oEntries = lv_oFile.directoryEntries;
 
while(lv_oEntries.hasMoreElements())
{
   var lv_cFile = lv_oEntries.getNext()
     .QueryInterface(Components.interfaces.nsIFile).path;
   FileList.push(lv_cFile);
}
}

function GetSystemPath(ApplicationName)
{
 // This function should Detect the system directory of the app
 // and return that string as the  SystemPath variable
 // You must supply the filename of the HTML file that it is being called from
 // I suppose later i could add the code to detect the HTML's actual file name
 // It's on the ToDo List...
 
 var GetSysPath = self.location;
 GetSysPath = GetSysPath + "";
 
 Get = GetSysPath.replace("file:///" , "");
 Get = Get.replace(/\//g , "\\");
 Get = Get.replace(ApplicationName, "");
 SystemPath = Get;
 return SystemPath;
}

function DeleteFile(FileName)
{
 // Delete a local file
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
 var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
 if (aFile instanceof Components.interfaces.nsILocalFile)
    {
     aFile.initWithPath(FileName);
     aFile.remove(false);
    }
}

and here is the UTF8.js file:

Code:

// ***************** The following are  the functions for  UTF8 *************************** 
//  if these are removed or modified in any way, the foreign language characters might not display correctly or at all
//  Use   utf8Encode(str)   to  Encode data  to UTF8 format
//  Use    utf8Decode(utf8Str)  to Decode data to ASCII format


//an alias of String.fromCharCode
function chr(code)
{
	return String.fromCharCode(code);
}

//returns utf8 encoded charachter of a unicode value.
//code must be a number indicating the Unicode value.
//returned value is a string between 1 and 4 charachters.
function code2utf(code)
{
	if (code < 128) return chr(code);
	if (code < 2048) return chr(192+(code>>6)) + chr(128+(code&63));
	if (code < 65536) return chr(224+(code>>12)) + chr(128+((code>>6)&63)) + chr(128+(code&63));
	if (code < 2097152) return chr(240+(code>>18)) + chr(128+((code>>12)&63)) + chr(128+((code>>6)&63)) + chr(128+(code&63));
}

//it is a private function for internal use in utf8Encode function 
function _utf8Encode(str)
{	
	var utf8str = new Array();
	for (var i=0; i<str.length; i++) {
		utf8str[i] = code2utf(str.charCodeAt(i));
	}
	return utf8str.join('');
}

//Encodes a unicode string to UTF8 format.
function utf8Encode(str)
{	
	var utf8str = new Array();
	var pos,j = 0;
	var tmpStr = '';
	
	while ((pos = str.search(/[^\x00-\x7F]/)) != -1) {
		tmpStr = str.match(/([^\x00-\x7F]+[\x00-\x7F]{0,10})+/)[0];
		utf8str[j++] = str.substr(0, pos);
		utf8str[j++] = _utf8Encode(tmpStr);
		str = str.substr(pos + tmpStr.length);
	}
	
	utf8str[j++] = str;
	return utf8str.join('');
}

//it is a private function for internal use in utf8Decode function 
function _utf8Decode(utf8str)
{	
	var str = new Array();
	var code,code2,code3,code4,j = 0;
	for (var i=0; i<utf8str.length; ) {
		code = utf8str.charCodeAt(i++);
		if (code > 127) code2 = utf8str.charCodeAt(i++);
		if (code > 223) code3 = utf8str.charCodeAt(i++);
		if (code > 239) code4 = utf8str.charCodeAt(i++);
		
		if (code < 128) str[j++]= chr(code);
		else if (code < 224) str[j++] = chr(((code-192)<<6) + (code2-128));
		else if (code < 240) str[j++] = chr(((code-224)<<12) + ((code2-128)<<6) + (code3-128));
		else str[j++] = chr(((code-240)<<18) + ((code2-128)<<12) + ((code3-128)<<6) + (code4-128));
	}
	return str.join('');
}

//Decodes a UTF8 formated string
function utf8Decode(utf8str)
{
	var str = new Array();
	var pos = 0;
	var tmpStr = '';
	var j=0;
	while ((pos = utf8str.search(/[^\x00-\x7F]/)) != -1) {
		tmpStr = utf8str.match(/([^\x00-\x7F]+[\x00-\x7F]{0,10})+/)[0];
		str[j++]= utf8str.substr(0, pos) + _utf8Decode(tmpStr);
		utf8str = utf8str.substr(pos + tmpStr.length);
	}
	
	str[j++] = utf8str;
	return str.join('');
}

Full Excel VBA Course - Beginner to Expert

Dhtml App Not Writing Utf8 Characters Correctly

Similar Tutorials

JavaScript - Chinese Flashcard Dhtml App (utf8 Problem)

Chinese Flashcard Dhtml App (utf8 Problem)

Similar Tutorials

Dhtml App Not Writing Utf8 Characters Correctly

Javascript Dhtml Scrollbar Problem In Mozilla

How To Vaidate Chinese Input In Form Text Area?

Dhtml Styling

Dhtml Window Object Retrieval

Php Files Inside Dhtml Windows

Dhtml Keyboard Changing Layout.

Dhtml Slideshow Script Not Working!

Dhtml Unwanted Scrolling Ff5, Ie (all), Chrome, Safari

Dhtml Expand/collapse Menu Over Content

Phantom Dhtml Related Exception Error

Making A Dhtml Menu/form With Js - Im Stuck.

E.keyup Make Problem As "jquery" Undfined Problem

Just A Little Problem

If ( && ) Problem

Ie Problem

Problem With Value

A Little Problem

Problem

<> Problem