タスクの編集・削除
前回から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もしっかり更新されていることを確認するために,