Smooth Navigation Menu with Ajax (Character issue)

**yslo88** · 10-31-2013, 06:48 AM

1) Script Title: Smooth Navigation Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: This menu works well with english items on my webpage, but it becomes square box character while I changed items with Chinese word(Big5) as below screen shot.

Please kindly help to give some suggestion to fix this issue.
Thanks a lot in advance.

My index.html code as

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>
<head>

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

<title>Test Handler Team</title>

		<link rel="stylesheet" href="style/css/mystyle.css" />
        <link rel="stylesheet" type="text/css" href="style/css/ddsmoothmenu.css" />
        <script type="text/javascript" src="style/script/jquery.min.js"></script>
        <script type="text/javascript" src="style/script/ddsmoothmenu.js"></script>


<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu-5S",
customtheme: ["#1c5a80", "#18374a"],
contentsource: ["smoothcontainer", "5S_Nav_menu.html"]
})

</script>
</head>

<div align="center">
<body background="style/Misc_Pic/bg1.jpg">

<font face="Comic Sans MS" color="#0000ff" size="7"><B>IDL 5S 專頁</B></font>

<hr>

</div>

<div id="smoothcontainer" class="ddsmoothmenu">
<noscript>
<a href="link to site map for search engines and user with JS disabled">Site map</a>
</noscript>
</div>

<BR>

</body>
</html>

And put menu items in external .html as 5S_Nav_menu.html as

Code:

<div id="smoothmenu-5S" class="ddsmoothmenu">
<ul>

<li><a href="#">Trainning Material</a>
  <ul>
  <li><a href="#">1S找問題</a></li>
  <li><a href="#">3x5Why_TTT</a></li>
  <li><a href="#">DMAIC sample</a></li>
  <li><a href="#">e-Announcement</a></li>
  <li><a href="#">ECS</a></li>
  <li><a href="#">IDL5S_0S deployment</a></li>
  <li><a href="#">IDL5S_1S_0408 Rev B</a></li>
  <li><a href="#">IDL5S_1S_RiskTag_Mgmt</a></li>
  <li><a href="#">IDL 5S</a></li>
  <li><a href="#">QBQ</a></li>
  <li><a href="#">QBQ</a></li>
  <li><a href="#">Safety</a></li>
  </ul>
</li>

<li><a href="#">FMEA</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>

</ul>
<br style="clear: left" />
</div>

Click image for larger version.

Name: ddmenu.jpg
Views: 232
Size: 43.1 KB
ID: 5264

**jscheuer1** · 10-31-2013, 02:55 PM

Before doing anything, make sure that 5S_Nav_menu.html is saved as Big5.

Easiest solution if it works is to put the charset meta tag on the external menu file:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=Big5" />
<div id="smoothmenu-5S" class="ddsmoothmenu">
<ul>

<li><a href="#">Trainning Material</a>
  <ul>
  <li><a href="#">1S找問題</a></li>
  <li><a href="#">3x5Why_TTT</a></li>
  <li><a href="#">DMAIC sample</a></li>
  <li><a href="#">e-Announcement</a></li>
  <li><a href="#">ECS</a></li>
  <li><a href="#">IDL5S_0S deployment</a></li>
  <li><a href="#">IDL5S_1S_0408 Rev B</a></li>
  <li><a href="#">IDL5S_1S_RiskTag_Mgmt</a></li>
  <li><a href="#">IDL 5S</a></li>
  <li><a href="#">QBQ</a></li>
  <li><a href="#">QBQ</a></li>
  <li><a href="#">Safety</a></li>
  </ul>
</li>

<li><a href="#">FMEA</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>

</ul>
<br style="clear: left" />
</div>

The browser cache may need to be cleared and/or the page refreshed to see changes. It would even help to load the external page directly into the browser to get it cached in its new form.

If none of that works and you are using jQuery version 1.5.1 or later, you can try setting the character encoding in the AJAX call in the the ddsmoothmenu.js script. Using a text only editor like NotePad, edit the script here (around line #122), adding the highlighted as shown:

Code:

getajaxmenu: function($, setting, nobuild){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]); //reference empty div on page that will hold menu
	$menucontainer.html("Loading Menu...");
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		beforeSend: function( xhr ) {
			xhr.overrideMimeType( "text/html; charset=Big5" );
		},
		error: function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText);
		},
		success: function(content){
			$menucontainer.html(content);
			!!!nobuild && ddsmoothmenu.buildmenu($, setting);
		}
	});
},

Save and use that version

**yslo88** · 11-01-2013, 05:21 AM

It works after I put the charset meta tag on the external menu file and save 5S_Nav_menu.html as UTF-8 from ANSI.

Thanks so much.

BTW, It's only show "Loading Menu..." on IE7 but Chrome is ok while I put below code in ddsmoothmenu.js
I didn't put below code in the .js file

Code:

		beforeSend: function( xhr ) {
			xhr.overrideMimeType( "text/html; charset=Big5" );
		},

Thread: Smooth Navigation Menu with Ajax (Character issue)

Thread Tools

Search Thread

Smooth Navigation Menu with Ajax (Character issue)

The Following User Says Thank You to jscheuer1 For This Useful Post:

Similar Threads

Smooth Navigation Menu via Ajax

issue with Smooth Navigation Menu

Smooth Navigation Menu External File Issue

Smooth Navigation Menu...Not so Smooth

Ajax character and JS issue

Bookmarks

Bookmarks

Posting Permissions