Log in

View Full Version : 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/dynamicindex1/ddsmoothmenu.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


<!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


<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>


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:


<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:


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. :D

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


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