タスクの編集・削除
前回からJaxerのアプリケーション作成に着手し，タスク管理アプリのタスクの登録ができるようになりました。
今回は，タスクの編集・削除と，Jaxerのウリの一つである「サーバサイドとクライアントサイドでの入力値チェックの共有」というところを実装します。
まず，タスクの編集・削除を実際にDBに対して実行する関数を以下のように定義しましょう。 定義する場所は，getAllTask()，add()が定義してあるrunat属性がserver-proxyのscriptタグの中です。
function update(id,text){
try{
text = decodeURIComponent(text);
Jaxer.DB.execute("UPDATE memo set
contents = ? where id = ? ",[text,id]);
return true;
}catch(e){
return false;
}
}
function del(id){
try{
Jaxer.DB.execute("DELETE FROM memo
where id = ? ",id);
return true;
}catch(e){
return false;
}
}
update(id,text)は，引数で渡したidのタスクの内容をtextに更新し，del(id)は，引数で渡したidのタスクを削除しています。
削除の関数名をdeleteとしていないのは，deleteがjavaScriptの予約語だからです（※今回のサンプルアプリでは，delete文発行のため，終了したタスクはDBから削除する仕様にしていますが，タスクに「未実施」「実施済」などのステータスを持たせ，そのステータスを更新する方が自然です）。
これらの関数はserver-proxy属性のscriptに書かれていますので，クライアントサイドでも利用することができます。 それでは，タスク名の前の「×」をクリックしたときに，del(id)が実行されるようにしましょう。
×をクリックしたときに，そのタスクのidが分かるように，getAllTask()内の，
html += '<div><span class="del_memo">×</span><span class="memo" >'+ rs.rowsAsArrays[i][1]+'</span></div>';
の部分を，
html += '<div><span class="del_memo" id="del_'+rs.rowsAsArrays[i][0]+'">×</span><span class="memo" >'+ rs.rowsAsArrays[i][1]+'</span></div>';
に修正します。
×を囲んでいるspanタグをクリックしたときにdel()を実行するため，init()の中に以下のコードを加えます。
$('span.del_memo').click(
function(){
del(this.id.split('_')[1]);
$(this).parent().fadeOut();
}
);
削除のキーとなるidは，spanタグのid属性の値を"_"で分割して取得するという方法を取りました。 また，del()はDB上のデータを削除するだけですので，画面上からタスクを削除するために，$(this).parent().fadeOut();というコードを書いています。
では，Jaxerを起動し，プレビュータブで削除できるか試してみましょう。
タスクが登録されている以下のような画面で，
「タスクを追加」の前の「×」をクリックすると，文言がフェードアウトし，以下のように画面から消えます。
DBから削除されているので，画面をリロードしても，表示されません。
次に，タスクの文字の部分をクリックすると，テキストボックスになって編集可能になり，Enterキーで編集内容が保存されるというコードを書きます。 先ほどと同様に，タスクの内容を囲むspanタグでidを取得できるように，getAllTask()内の，
html += '<div><span class="del_memo" id="del_'+rs.rowsAsArrays[i][0]+'">×</span><span class="memo" >'+ rs.rowsAsArrays[i][1]+'</span></div>';
の部分を，
html += '<div><span class="del_memo" id="del_'+rs.rowsAsArrays[i][0]+'">×</span><span class="memo" id="memo_'+rs.rowsAsArrays[i][0]+'">'+ rs.rowsAsArrays[i][1]+'</span></div>';
に修正します。
また，タスクの内容をクリックしたときの動作を，init()の中に以下のように定義します。
$('span.memo').click(
function(){
if($('form',this).length > 0) return;
var id = this.id.split('_')[1];
var rewrite = '<form name="rewriteForm" id="rwForm"><input name="content" type="text" value="'+$(this).text()+'"></form>';
$(this).html(rewrite);
$('#rwForm').submit(
function(){
update(id,encodeURIComponent($(':text',this).val()));
$(this).parent().text($(':text',this).val());
return false;
}
);
}
);
if($('form',this).length > 0) return;の部分で，一度クリックして入力フォーム状態になっていたとき，これ以降のコードが実行されないようにしています。 spanタグをクリックすると，spanタグで囲まれたテキストをテキストボックスの値にセットし，入力フォームを生成します。
生成した入力フォームのsubmitイベントで，update(id,text)を実行し，入力フォームを消して元のspanタグの状態に戻すという処理です。
それでは，再度プレビュータブで動作を確認しましょう。 以下のような画面で，「原稿を書く」をクリックします。
すると，以下のようにテキストボックスが表示されます。
内容を編集し，Enterキーを押下します。
以下のように編集内容が反映されます。
DBもしっかり更新されていることを確認するために，ページをリロードして確認しましょう。
