Category Archives: AJAX

利用 jquery 做頁面輸入欄位檢核

軟體的部份需要 jquery 及 jQuery plugin: Validation

首先假設頁面上有以下的 form

<form id=”myform”>

<input type=”text” name=”userid” id=”userid”>

</form>

要進行輸入欄位檢核時在頁面加入以下的 javascript code

$(document).ready( function() {

$(‘#myform’).validate({

invalidHandler: function(form, validator) {

},

errorPlacement: function(error, element) {

}

});
});

invalidHandler、errorPlacement 用於檢核有誤時進行處理,請自行定義,接著加入檢核的 rule

$(‘#userid’).rules(‘add’, {

required6digits: true,

messages:{required6digits:”必須為6位數數值!”}    });

以上的 code 為 userid 欄位加入檢核項目 required6digits,plugin 提供了一些預設的檢核功能,這個例子我們是自行定義檢核欄位必須為6個數字,在 document ready 時加入以下 code

jQuery.validator.addMethod(“required6digits”, function(value, element, params) {

var regEx = /\d{6}/;

return regEx.test(value);

});

從以上的例子我們可以做出自行定義的檢核規則,最後利用以下 code 進行 form 的檢核

$(‘#myform’).valid()

如果傳回 true 即是檢核成功,如果傳回 false 即是檢核有誤

 

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

網頁輸入欄位加上 tooltip

最近要為一個頁面上的所有 input 欄位加上 tooltip,採用的 plugin 網址。作法如下:

首先頁面 include plugin 的 javascript 及 css

<script type=”text/javascript” src=”jquery.tooltip.min.js”></script>

<link href=”jquery.tooltip.css” rel=”stylesheet” type=”text/css”>

tooltip 的內容這次是藏在 div 內,再由 javascript 取出顯示,當然很容就可以修改成將內容放在資料庫內

<div id=”price_tooltip” style=”display:none”>

這是售價欄位說明

</div>

接下來在 document ready 時設定 input 檔位的 tooltip,以 input 欄位的 id 加上 _tooltip 字串,取出對應 div 的內容

$(“:input”).tooltip({

delay: 0,

showURL: false,

bodyHandler: function() {

var id=this.id;

var tooltip_id=id+”_tooltip”;

return $(“#”+tooltip_id).html();

}

});

 

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

jqGrid 下方的 pager 元件無法顯示

最近寫一支 jqGrid 程式,定義了2個 column,每個 column 的欄位寬為 100。用 chrome、firefox 看 pager 都可以正常顯示,唯獨 IE9 pager  show 不出來,最後把欄寬改為 200、400 就可以正常顯示了,看來 IE9 如果 grid 的總寬度太小的話 pager 可能會 show 不出來,不知道其他版本的 IE 是否也有同樣的情形。

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

Yahoo UI DataTable 使用範例

在設計網路應用程式時,常必須呈現表格資料,表格呈現出來後,用戶也必定直覺的發問,資料這麼多可不可以分頁顯示,可不可以稍微排序一下。自己來 coding 當然只是多花點時間而已,現在 Yahoo UI 不只可以提供這些功能,還有更多的控制選項可以調整,更好的是不用為 browser 相容性傷腦筋。Yahoo UI 網站已經有相當完整的範例了,只是看不太習慣自己來寫一個。

首先要先 include 以下的 css、 js 檔

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

接下來在 body 內留一個 container 給 Yahoo UI 放產生的 table

<body class=”yui-skin-sam”>

<div id=”DataTableYUI”></div>

再來準備1支程式餵資料給 DataTable 元件,例如以下 datafeed.php

<?php

$sql=”select name,age from user”;
$result=mysql_query($sql);

$data=array();
if ( $result ) {
while ( $row=mysql_fetch_assoc($result) ) {
array_push($data,$row);
}
$status=0;
} else {
$status=1;
}

$response[‘status’]=$status;
$response[‘data’]=$data;

echo json_encode($response);

?>

利用以下 javascript 即可將 data table 呈現在之前定義的 div 內

function showDataTable() {
var ds=new YAHOO.util.DataSource(“datafeed.php”);
ds.responseType=YAHOO.util.DataSource.TYPE_JSON;
ds.responseSchema={
resultsList: “data”,
fields: [“name”,”age”]
};
var cols=[
{ key: “name”, label: “User name” },
{ key: “age”, label: “User age”, sortable: “true” }
];
var dt=new YAHOO.widget.DataTable(“DataTableYUI”, cols, ds, {} );
}

Yahoo UI 網站還有更多的範例及 API 說明可以參考。

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