タスクの編集・削除
前回からJaxerのアプリケーション作成に着手し，
今回は，
まず，
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)は，
削除の関数名をdeleteとしていないのは，
これらの関数はserver-proxy属性のscriptに書かれていますので，
×をクリックしたときに，
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()を実行するため，
$('span.del_memo').click(
function(){
del(this.id.split('_')[1]);
$(this).parent().fadeOut();
}
);
削除のキーとなるidは，
では，
タスクが登録されている以下のような画面で，
「タスクを追加」
DBから削除されているので，
次に，
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>';
に修正します。
また，
$('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;の部分で，
生成した入力フォームのsubmitイベントで，
それでは，
すると，
内容を編集し，
以下のように編集内容が反映されます。
DBもしっかり更新されていることを確認するために，
