Ajaxで良い感じにテキストエリアをPOSTする方法

はじめに

先週に引き続き、管理画面系を作っているのですが、
そこでテキストエリアで編集するもののUIを今日は作りました。

よくオシャレなサイトにAJAXのテキスト編集方法ですね。
NAVERのpickみたいなUIです。

テキストが書いてあってそれをクリックするとテキストエリアに変わって、
そのまま編集が可能みたいなそうゆうの。

で、それを見よう見真似でやってみたお話。

用意するもの

考え方

Divとかspanでマーキングしたテキストを表示
テキストエリアにもテキストを淹れておいて、display:none;しておく
テキストをクリック
マーキングしたテキストが消える
テキストエリアが出現する
内容を更新する
マーキングしているテキストの内容を更新する
テキストエリアをdisplay:none;する
マーキングしているテキストを表示する

やってみる

<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="jquery.form.js"> </script>

<script>
$(function(){

	//テキストがクリックされた時！
	$('#raw').click(function(){
		//テキスト表示を消す
		$('#raw').hide();
		//テキストエリアとSENDボタンが入ってるDIVを表示！
		$('#edit').show();
		//テキストエリアにフォーカスをあてる！
		$('#edit textarea').focus();
	});
	
	//フォームがサブミットされた時！
	$(".form").submit(function(){
		//テキストの中身を現在のテキストエリアの内容に変更
		$('#raw').html($('#edit textarea').val());

	});
	
	$(".form").ajaxForm({
		success: uploadFormResponse,
		dataType: "json",
		resetForm: true
	});

});
function uploadFormResponse(response){
	if(response.status == 'success'){
		//テキスト表示
		$('#raw').show();
		//テキストエリアの内容を更新（これをしとかないとChromeの場合変な動きになる。）
		$('#edit textarea').val($('#raw').html());
		//テキストエリアを隠す
		$('#edit').hide();

	}else{
		alert('失敗しました');
	}

	return true;
}
</script>
<style>
#edit{
	display:none;
}
</style>

<form action="post.php" method="POST" class="form">
<div id="raw">TEXT</div>
<div id="edit">
	<textarea name="data">TEXT</textarea>
	<input type="submit" value="SEND">
</div>
</form>

あとはpost.phpで成功した場合に「success」というstatusをjsonで返すように
作れば完成だね。

まとめ

jqueryさえ使えば何とか何でも出来る。

この記事書いても誰が役に立つのかわからない。

後輩が居ない。