smartPG

在本篇文章中，主要是介紹資料的修改
如何利用jQuery的AJAX相關操作達成目標

對於沒有jQuery基礎的人，閱讀本篇文章提到的程式碼可能稍嫌吃力，
在這邊你可以直接了解結果，將心力著重於CodeIgniter的函數部份就好，

AJAX無腦更新系統目標：

1.雙擊欄位，進入更新模式，目標欄位更動為輸入框 
2.輸入完畢之後，（游標離開輸入框的時候），我們利用post函數更新資料庫

有了目標之後我們就可以開始實做了

1.先將所有的目標欄位加入兩個class buttom 跟資料庫欄位名稱，
統一的buttom作為jQuery的觸發條件，
資料庫欄位名稱則是在更新欄位的時候，讓伺服器端知道該更新哪個欄位

2.table中設定好id="XXX" 其中XXX是由資料庫裡面的動畫id來決定
（這部份在上一篇教學裡面就順手打上去了）

3.實做jQuery ："點兩下 生出新欄位 失去焦點後回傳server"

 $(".buttom").dblclick(function()
{
var ori=$(this);
//alert($(this).closest("table").attr("id"));
var key=$(this).closest("table").attr("id");
$(this).html("<input id=\"input_3\" value=\""+$(this).html()+"\">");
$("#input_3").focus();
$("#input_3").blur(function()
{
var tmp=ori.attr("class");
var tmp2=tmp.split(" ");
//alert(tmp2[0]+" "+tmp2[1]);
if($("#input_3").val()=="")$("#input_3").val("____");
$.post
(
"/index.php/PG/update/" ,
{key:key,field:tmp2[1],new_value:$("#input_3").val()} ,
function(data)
{
ori.html($("#input_3").val());
//alert(data);
}
);
});
return false;
});

解釋幾個可能會看不太懂的地方

var tmp=ori.attr("class");
var tmp2=tmp.split(" ");
//alert(tmp2[0]+" "+tmp2[1]);
這部份是取得第二個class，
還記得前面說的嗎？ 第一個class固定是buttiom 第二個是資料庫欄位

if($("#input_3").val()=="")$("#input_3").val("____");
因為我們採用點兩下文字觸發，這段是避免沒有文字，所以無法觸發的囧境..

$.post
(
"/index.php/PG/update/" ,
{key:key,field:tmp2[1],new_value:$("#input_3").val()} ,
function(data)
{
ori.html($("#input_3").val());
//alert(data);
}
);
jQuery的post函數 伺服器端PG/update/ 會接收到
欄位key == 變數key 欄位field == 變數tmp2[1]
欄位new_value==$("#input_3").val()的查詢
基本上就是把用法記下來就對了-.-+

4.實做伺服器端的update函數

在PG.php裡面新增函數

function update()
{
//func_num_args()
$this->load->database();
$final_data[ $_POST['field'] ] = $_POST['new_value'];
$this->db->where('id',$_POST['key']);
$this->db->update('anime',$final_data);
echo $_POST['key']." ".$_POST['field']." ".$_POST['new_value'];

}

這個...細節部份去翻CodeIgniter的使用手冊吧，
我承認我是複製貼上以前的Code (被毆)
當然在這邊你要自己寫update的MYSQL語法也是OK的，
我只是為了測試一下CodeIgniter的寫法有沒有比較簡潔，才改用CI的寫法

5.實做Controller載入view部份

這步驟就是要把我們前面做的部份整合起來，
利用controller呼叫函數來完成網頁的顯示，

回想一下我們現在做了哪些東西，
我們有

1.一個資料庫
2.一個controller PG.php 裡面有一些基礎函數
3.一個view anime_list.php接收$query變數的資料並顯示
4. anime_list.php 還呼叫PG下的update以便更新資料

為了測試方便起見，請先在資料庫裡面隨便新增幾筆資料，
這樣子測試的時候才有結果顯示，
新增完之後，我們開始撰寫test函數，
功能是準備清單資料，並且呼叫 anime_list.php

function test()
{
$this->load->database();
$sql="SELECT * FROM anime";
$data['query']=$this->db->query($sql);
$this->load->view('anime_list',$data);
}

夠簡單吧，組合起來就是這麼的無腦！

先載入資料庫，然後設定語法"SELECT * FROM anime"
代表我們要查詢anime裡面所有的資料
$this->db->query($sql);這行產生查詢結果

請注意，在這邊，我們把查詢結果丟給$data['query']這個陣列，
這就是CodeIgniter 裡面 controller跟view傳輸資料的方法！

$data[]裡面的所有索引，都會直接變成view裡面的全域變數，
例如說 ，我在這裡指定了$data['query']，
並且利用以下的語法讀取view:
$this->load->view('anime_list',$data);
這樣子 在anime_list.php中，就可以直接使用$query這個變數

同理可推$data['A'] $data['B'] $data['C']
傳到anime_list之後 會是$A $B $C
道理是一樣的

存檔，執行，
至此，一個由CodeIgniter開發的簡單網站架構就此完成，

不過為了讓網站的運作更為完善，
我們還需要增加"添加動畫"與"移除動畫"的功能，
這點我會在下一篇的教學加以講解