Tag Archives: Javascript

javascript 處理 checkbox 問題

印象中一直覺得 checkbox 很難搞，但是又不太清楚問題在那，今天終於知道原因了。關鍵在於處理的是單一 checkbox 或是多個 checkbox，舉個例子：

<form name=”myform”>

<input type=”checkbox” name=”food” value=”cake”>

<input type=”checkbox” name=”food” value=”noodle”>

</form>

要把 2 個 checkbox 都勾選話通常都是利用以下 javascript code

var checkbox=document.forms[‘myform’].food;

for(i=0;i<checkbox.length;i++) {

checkbox[i].checked=true;

}

但是當 form 只有1個 checkbox 時就會出錯，因為當只有1個 checkbox 時第一行 javascript 取得的是一個物件, 而不是物件陣列，只要執行到 checkbox.length 就會有 undefined 之類的錯誤，比較完善的寫法如下：

var checkbox=document.forms[‘myform’].food;

if ( checkbox.length != null ) {

for(i=0;i<checkbox.length;i++) {

checkbox[i].checked=true;

} else {

checkbox.checked=true;

}

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading...

javascript form submit 檢查問題

寫 javascript function 來檢查 form submit 相當常見，也有相當多的寫法，以下是一個很好的參考範例：

function check() {

var valid=true;

if ( document.forms[0].name.value == null || document.forms[0].name.value == “” ) {
valid=false;

alert(“Please fill your name!”);

}

.

.

if ( valid  ) {

document.forms[‘register’].submit();

return true;

} else {

return false;

}

html form 寫法如下：

<form name=”registerForm” action=”register.php” method=”post” onsubmit=”return check()“>

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...

XOOPS 模組內使用 javascript

XOOPS 這個 CMS (Content Management System) 已經風行好久了，最近才有機會仔細的評估一下，感覺上比 Mambo、Joomla 更有彈性，官方網站也點出未來的方向是朝向 Framework 發展。在專案裡用來作後台應該不錯，每個客戶要求的功能以 module 方式開發，速度快、程式碼也容易維護。

由於現在客戶的胃口都被養大了，要求的功能常常要用到 AJAX，以常見的 Yahoo UI 為例，這是一個 javascript base 的 framework，如何整合在一起的確是花了點時間研究。

首先我們要解決如何崁入我們的 css 及 js 檔，我們以預設的 theme 為例：

在 themes/default/theme.html 裡有以下2行

<!– customized header contents –>
<{$xoops_module_header}>

我們可以利用第2行的 smarty 樣板引擎變數加入我們所需要的 css 及 javascript 檔，以下是個簡單的範例

<?php
require(‘../../mainfile.php’);
require(XOOPS_ROOT_PATH.’/header.php’);


$xoops_module_header=<<<HEADER
<!– datatable includes below –>
<link rel=”stylesheet” type=”text/css” href=”js/yui/build/datatable/assets/skins/sam/datatable.css”>
<script src=”js/yui/build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script src=”js/yui/build/element/element-beta-min.js”></script>
<script src=”js/yui/build/datasource/datasource-beta-min.js”></script>
<script src=”js/yui/build/datatable/datatable-beta-min.js”></script>
<!– loading panel includes below –>
<link rel=”stylesheet” type=”text/css” href=”js/yui/build/container/assets/container.css”>
<script src=”js/yui/build/utilities/utilities.js”></script>
<script src=”js/yui/build/container/container.js”></script>
<!– connection manager includes below –>
<script src=”js/yui/build/yahoo/yahoo-min.js”></script>
<script src=”js/yui/build/event/event-min.js”></script>
<script src=”js/yui/build/connection/connection-min.js”></script>
<!— module javascript –>
<script src=”js/module.js”></script>
HEADER;


$xoopsTpl->assign(‘xoops_module_header’,$xoops_module_header);

$html=<<<HTML
<script language=”javascript”>
showDownloadCountHTML();
</script>
<h2>AJAX HTML output</h2>
<div id=”DownloadTableHTML”></div>
<h2>AJAX YUI datatable</h2>
<div id=”DownloadTableYUI”></div>
HTML;

echo $html;

require(XOOPS_ROOT_PATH.’/footer.php’);
?>

2008.2.15 加註:

最近在寫 admin 的模組，由於 admin 預設的樣板 header 大部份都是 hard code，要 customize 的話，如果 client 端是 Firefox ，這些 css、js 外部 include 檔放在 body 內的 script 也可以正常運作。如果要同時相容 Firefox、Internet Explorer 則要透過 DOM 動態將 css、js 載入放進 header，有機會再提供詳細的範例。

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

getElementById().innerHTML 在 explorer 不能正常顯示

找了不少資料得到的結論是 innerHTML 是微軟訂出來的標準，但是 firefox 也支援了，當然用 W3C 的 DOM 也可以作到， 相容性也比較好，但是要寫的 code 也多了不少。

之前遇到的問題是，在動態產生內容時直覺的要把 data row 直接塞進 table，例如

<table>

<div id=”data”></div>

</table>

AJAX code 傳回 “<tr><td>name:</td><td>Vincent</td></tr>”，用 getElementById(‘data’).innerHTML 塞回傳值， firefox 可以正常顯示，explorer 不行，微軟的範例是用 W3C 的 DOM 一個個 cell，row 去動態產生 table。

最近發現一個作法在 firefox，explorer 都可以正常顯示，在 html 內一樣用 div 留下一個 container 位置

<div id=”data”></div>

AJAX code 如果回傳整個 table 的 html，例如 “<table><tr><td>name:</td><td>Vincent</td></tr></table>” 再用 getElementById(‘data’).innerHTML 塞回傳值，是 ok 的。

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...