IT Knowledge Base

今天網站上又有一個新要求，其實說是要求，還不是自己攪出來的問題。問題是這樣的，頁面需要有一個選單(Combobox)，讓用戶可以選擇各個不同景點的資料，而每個景點，會有不同語言作選擇，所有的程式碼是建基於PHP上面。是不是很簡單的要求呢？

01. 一開始時，想著是每次都用Javascript重新載入頁面，再更新PHP內容，問題不是解決嗎？對，但每次重新載入頁面，也會同時更新頁面的動畫，感覺自己不能夠接受。

02. 第二個方法，不更新整個頁面，只用jQuery方式，每次只針對DIV標籤內的內容作更新。研究後，DIV標籤內的內容是可以更新到的，但如果DIV標籤內的內容，需運行到PHP的程式碼，那是會出現問題。但為何會出現問題呢？我想是因為程式碼已由客戶端作控制，已經和伺服器那邊沒有關係了，結果要用到伺服器資源的，就顯示錯誤。

03. 最後我用的方法，雖然有點蠢，而且也不可真的算是動態更新內容，但至少是可以做到我的要求。

04. 做法是在頁面載入時，把選單(Combobox)內需要的所有的內容(DIV標籤)全部載入，但用CSS的display: none;方式作隱藏。

05. 而當用戶更改選單(Combobox)內的選項時，會觸發Javascript程式，而程式第一步會把所有的內容(DIV標籤)全部隱藏，再顯示需要的其中需要的那個DIV標籤內容。

06. 而為了當頁面第一次載入時，至少會看到第一個的選項內容，固我會把第一個的DIV標籤，在載入時顯示出來。

07. 當用戶更改語言選擇時，這個因為會更改到PHP SESSION的設定，沒辦法只能更新及重新載入頁面。

<script type="text/javascript">
$(document).ready(function(e) {
$("#spot_1").show();
$("#scenic_menu").change(function() {
$('div[id^="spot_"]').hide();
var spot_value = document.getElementById("scenic_menu").value;
document.getElementById(spot_value).style.display = "block";
});
});
</script>

<section id="index_border" style="min-height: 500px;">
<?php
echo '<div id="scenic_spot_menu">';
echo '<select name="scenic_menu" id="scenic_menu">';
$spot_count = 0;
$spots[] = '';
$i = 0;
$folder_name = '_scenic_spots';
$handle = opendir($folder_name);
while (false !== ($entry = readdir($handle))) {
if ($entry != '.' && $entry != '..') {
$spots[$i] = $entry;
$i++;
}
}
sort($spots);
$i = 1;
foreach ($spots as $key) {
switch ($_SESSION['lihua_lang']) {
case 'cn':
$link = $folder_name.'/'.$key.'/cn.php';
break;
default:
$link = $folder_name.'/'.$key.'/en.php';
break;
}
if (file_exists($link)) {
$str = require($link);
echo '<option value="spot_'.$i.'" data-image="images/lihua_logo_menu.png">'.$str.'</option>';
$i++;
}
}
echo '</select>';
echo '</div>';
?>

<div id="main_box">
<?php
switch ($_SESSION['lihua_lang']) {
case 'cn':
?>
<p style="background-color: #E91A3A; color: #FFF; font-weight: bold"><img src="images/title_icon.png">景点介绍：</p>
<?php
break;
default:
?>
<p style="background-color: #E91A3A; color: #FFF; font-weight: bold"><img src="images/title_icon.png">Scenic Spots:</p>
<?php
break;
}
?>
</div>
<?php
unset($spot_count);
$count = 1;
foreach ($spots as $key) {
switch ($_SESSION['lihua_lang']) {
case 'cn':
$link = $folder_name.'/'.$key.'/cn.php';
break;
default:
$link = $folder_name.'/'.$key.'/en.php';
break;
}
if (file_exists($link)) {
echo '<div id="spot_'.$count.'" style="display: none;">';
require ($link);
echo '</div>';
$count++;
}
}
?>