jqGrid 實用技巧 (十五) 用 afterSumbit 來做簡單的 error handling

[anti-both]

在 jqGrid 裡 面 ,我 們 會 用 editurl 來 設 定 Form Editing 時 資 料 傳 回 Server Side 的 目 的 地 路 徑 。在 我 的 例 子 中 ,這 通 常 都 是 一 個 php 檔 。

1
2
3
4
5
6
7
...
$("#list").jqGrid({
...
editurl: 'editurl.php',
...
});
...

因 為 那 個 server side 的 php 是 我 們 自 己 寫 的 ,有 時 候 ,因 為 前 台 傳 過 來 的 資 料 有 問 題 ,又 或 者 server 出 現 了 些 錯 誤 ,想 要 傳 回 錯 誤 資 訊 給 前 台 jqGrid,又 要 如 何 做 呢 ?

例 如 我 們 想 顯 示 Server Side 的 SQL 執 行 的 錯 誤 ,我 們 可 以 在 editurl.php 加 入 類 似 的 code。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
...
$objConn = new mysqli("localhost", "my_user", "my_password", "world");
...
$SQL = "UPDATE table SET somefield=somevalue WHERE id=$id";
...
if ( $objConn->query($SQL) === TRUE) {
$data->success = true;
$data->id = $id;
} else {
$data->success = false;
$data->err = $objConn->error;
}
echo json_encode($data);
...
?>

在 上 例 中 ,如 果 SQL statement 成 功 ,我 們 就 傳 回 success=true 和 $id。如 果 失 敗 ,我 們 就 傳 回 success=false 和 相 關 的 error。

好 了 ,後 台 是 設 定 好 了 ,但 是 前 台 如 果 沒 有 相 對 應 的 code 來 處 理 這 些 傳 回 的 資 料 ,其 實 也 是 沒 用 的 。這 時 ,我 們 就 可 以 使 用 Form Editing 的 afterSubmit 事 件 了 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
...
$("#list").jqGrid({
...
editurl: 'editurl.php',
pager: '#pager',
...
});
...
$("#list").jqGrid('navGrid','#pager',
{edit:true,add:false,del:false,search:false, view:false},
{afterSubmit: function(response, postdata){
Resp = JSON.parse(response.responseText);
if (Resp.success) {
return [true,"OK",Resp.newid];
} else {
return [false,Resp.err];
}
}
},
{}, // form add
{}, // form del
{}, // form search
{} // form view
);

jqGrid 的 afterSubmit 事 件 ,就 可 以 handle 我 們 從 editurl 傳 回 的 東 西 。但 那 個 response 本 身 不 單 單 是 處 理 我 們 自 己 傳 回 的 資 料 ,它 也 處 理 server 傳 回 的 錯 誤 的 ( 例 如 404 file not found 之 類 的 )。所 以 我 們 傳 回 的 東 西 只 佔 response object 裡 面 的 一 個 部 分 ,那 就 是 responseText。因 為 我 用 了 json 格 式 來 傳 回 資 料 ,所 以 我 也 要 JSON.parse 一 次 那 個 responseText。然 後 就 可 以 正 常 的 使 用 我 傳 回 的 資 料 了 。

針 對 responseText 做 了 我 們 自 己 的 處 理 ,我 們 就 要 return 一 些 jqGrid 需 要 的 資 料 了 。根 據 jqGrid 的 documentation,這 個 return 要 是 一 個 array,並 包 含 以 下 資 料  [success, message, new_id]。success 是 boolean 值 ,如 果 true,jqGrid 就 繼 續 執 行 ,false 就 會 停 止 ,並 且 在 edit form 顯 示 傳 回 的 message。

錯 誤 的 結 果 就 會 如 下 圖 所 顯 示 。

afterSubmit return false

afterSubmit return false

不 過 一 般 來 說 我 們 不 會 直 接 把 SQL 錯 誤 顯 示 給 客 戶 ,這 樣 做 沒 什 麼 益 處 ,一 般 都 會 在 php 傳 回 一 些 客 戶 能 看 懂 的 訊 息 。

aftersubmit return false

aftersubmit return false

除 了 顯 示 server side 的 錯 誤 訊 息 之 外 ,這 個 afterSubmit 的 做 法 ,還 可 以 用 來 做 server side 的 data validation,因 為 不 是 所 有 data validation 都 可 以 在 前 台 完 成 的 。

 

ctleung張先生,男性,肖龍。
職業:I.T. Consultant
簡介:不好好讀書;七尺差五寸,手長過膝,雙耳垂肩;性寬和,寡言語,喜怒不形於色。據說少時曾斬白蛇於鳳凰山下……

This entry was posted in jqGrid and tagged , , , . Bookmark the permalink.

2 Responses to jqGrid 實用技巧 (十五) 用 afterSumbit 來做簡單的 error handling

  1. Gene Leung says:

    Hi C.T.

    Good stuff posted at your site about the jqGrid, I have been leaning a lot from you. Any reference or series to talk about language localization?

    B/R
    Gene Leung

    • C.T. Leung says:

      我唔明白啊….

      jqGrid 本身就有不同的 language files,documentation 也清楚的說明你必須要引用一個 language file。

      1
      
      <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

      當然,我也必然會有我自己修改過的 hk 版 language file,但這裡面並沒有任何程式技巧可言呀,這都只是很普通的機械化翻譯和個人喜好而已。

      你還另外有其他想 localize 的地方麼?

Leave a Reply

Your email address will not be published. Required fields are marked *