RSS

javascriptでtextareaに値をセットしたい

15 12月

ビールのんで帰ってきたので放置せずにこれだけは書いて寝よう。
やりたいこと。

DB上で登録したテンプレートなる文書のデータを、subjectだけ一覧で見せたい。
そんで、その一覧のsubjectをクリックしたら、テンプレートの内容をtextareaにセットしたい。

…たったこれだけ。
やってみたことはリンククリック時にわざわざDB通信するのもなんなので…ちょっとダサいけど、ページ出力時にテンプレートの内容はDIVで区切ってどっかに出力させて、かつ表示させない(display=none)にして、リンククリックしたらそのDIVの中身をテキストエリアにセットする、という流れ。

ところが、Chromeだとちゃんと見えるのにIE(7)だと、テンプレート内の改行が全部、すっ飛ばされてしまう!
で、ググると出てくる、出てくる。そもそもinnerHTMLには適用されないだの、textareaがUNKOだとか、IE・・・?とか色々でてくるんですけど、これ!っていう情報が出てこない。なんつーか文字コードと混同してる(私が)感じで情報が切り分けられず、phpで文字コードを変換してみたりとか色々したけどもうだめびーるのみたいしさいきん体組成系かってふとったしビールのみたいし。

で、DIVタグなのがいけないのかと思ってたので、仕方ないのでinputタグで出力し、それを見せない、みたいなことをやってみたんだけど、どうにもこうにもダメ。text()でやるとうまくいった、とかいろいろあったんだけどもうだめぽ…と思ったんですが最終的に一番楽そうな手段が見つかったので、備忘録的にメモ。これが最適手段ではないと思いますが、もし他の方法をご存知の方がいらしたら「っへ!こんなのもあるでよ!」って教えてくれるとありがたい。

結論からいうとですね、DIVタグではなくて、テンプレートの内容をあらかじめtextareaに書き出しました。そして上記のようにdispayをnoneにして非表示にし、この値をjQueryで言うところのval()で取得し、セットもval()で行いました。そうするとIEだろうがChromeだろうが、改行がきちんと判断されるようになりましたとさ。


$(document).ready(function() {
// bind 'Form' and provide a simple callback function
$(".template").click(function(event){
$('.comment').val($("textarea.setText" + $(this).attr('id')).val());
return false;
});
});

こんなかんじで、セットする元のテンプレート内容は

	if(isset($document)){
		//改行処理があるため、セットする要素と同じtextareaで対処する
	    foreach($template as $key=>$value) {
			echo "<textarea style='display:none' class='setText{$value['Template']['id']}'>";
	    	echo $value['Template']['content'];
			echo '</textarea>';
	    	
	    }
	}

こんなかんじで対処しました。他にもっと良い方法あるよ!って人は是非。いやーこれ解決するのにすんごい時間かけてしまったよ…とほほ。

※21日はCakeAdvent2010 なんで最近はまったcontainableとunbindのくだりを書く予定です。よろしくお願いします。

広告
 
コメントする

投稿者: : 12月 15, 2010 投稿先 CSS, javascript

 

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。