prototype.js をちゃんと(仕事で)使ってみようという事でゴニョゴニョしたメモ。

やりたい事は通常のテキストを編集可能にして Ajax で保存っていうありがち(？)な事。
で、使い方の勉強がてら書いたコードをのせておくと以下のような感じ 

var Editable = Class.create();

Editable.prototype = {
    initialize: function(text, url) {
        this.view = $(text);
        this.url = url;
        Element.show(this.view);
        this.editor = document.createElement('input');
        this.editor.type = "text";
        Element.hide(this.editor);
        this.view.parentNode.appendChild(this.editor);
        Event.observe(this.view, 'dblclick', this.showEditor.bindAsEventListener(this), false);
        Event.observe(this.editor, 'blur', this.editDone.bindAsEventListener(this), false);
    },

    showEditor: function() {
        Position.clone(this.view, this.editor);
        this.editor.value = this.view.innerHTML;
        Element.toggle(this.view, this.editor);
        Field.focus(this.editor);
    },

    editDone: function() {
        Element.toggle(this.view, this.editor);
        var parameters = encodeURIComponent(this.view.id) + "=" + encodeURIComponent(this.editor.value);
        new Ajax.Request(this.url, {
            method: 'post',
            asynchronous: true,
            parameters: parameters,
            onLoading: function() {
                this.view.innerHTML = "saving...";
            }.bind(this),
            onSuccess: function() {
                this.view.innerHTML = this.editor.value;
            }.bind(this)
        });
    }
};
これを、editable.js として保存して、以下のように呼び出すとダブルクリックで編集可能、編集が終わったら別のとこをクリックで保存ってな挙動になります。 

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="editable.js"></script>
<title></title>
</head>
<body>
<div id="editText" style="border: 1px solid #000000; width: 300px;">Hello World!</div>
<script type="text/javascript">
new Editable('editText', '/path/to/save.app');
</script>
</body>
</html>
/path/to/save.app がリクエストを受けとるアプリケーションになります。
アプリ側には <id>=<値> って感じで値が渡ってきます。
prototype.js 使うとコードがスッキリして精神衛生上よろしいですな。。

「技術ネタ」カテゴリの最新記事