テキストを入力して、HTML の内容を変更する

<script>
$(function() {
    $('#change_btn').click(function() {
        $.post('/path/to',
            {
                name : $('#name').attr('value')
            },
            callBack);
    });
});

function callBack(data) {
    $('#change_area').html(data);
}
</script>

<div id="change_area"></div>

<form action="" id="form1" method="post">
<input type="text" name="name" id="name" value="" />
<input type="button" id="change_btn" value="変更" />
</form>

$.post は非同期通信で POST でデータを送信してレスポンスを受け取れます。

$.post(url, data, callback, type);

url

POST する url　例 hoge.php

data

POST するデータ　例 {“hoge”:1, “foo”:”foo”}

callback

データを受け取るコールバック関数　例 my_func

type

受け取るデータのタイプ　例 JSON XML

エラーハンドリングしたいときは $.ajax を使用した方がよい。
jQuery.ajaxメモ – Humming Via Kitchen

上記スクリプトを便利に使わせていただいていたのですが、先週くらいから急に表示されなくなりました。どうやら Amazon の HTML が微妙に変更されたのが原因のようです。図書館への予約を Amazon のページからすることが多かったので、不便なので原因を究明して修正してみました。

46行目の以下のコードを

header = document.evaluate("//div[@class='buying']/b[@class='sans']",

下記のように修正しました

header = document.evaluate("//div[@class='buying']/h1[@class='parsesans']",

これでとりあえず本の詳細ページでは表示されるようになりました。

追記（2008.10.2)
コメントで教えていただきました。またクラス名が変更になったようです。
以下のコードで動きます。

header = document.evaluate("//div[@class='buying']/h1[@class='parseasinTitle']",

$('#hoge').set('href', 'http://www.syuhari.jp/');

というやり方が結構ヒットするのですが、jQuery1.2.x では

$('#hoge').attr('href', 'http://www.syuhari.jp/');

のように attr メソッドを使用します。

参考：Attributes/attr – jQuery JavaScript Library

jQuery は prototype.js などの $ を使用するライブラリと同時に使用できるように設計されています。jQuery にはprototype.js で定義した $ を上書きしないようにする方法があります。

jQuery.noConflict();

を　jquery.js ファイルの一番最後に書き加えることにより $ を上書きしないように元に戻します。

jQuery を使用する際は

$('hoge');

ではなく

jQuery.('hoge');

を使用します。
$ の代わりに jQuery を使用するということですね。

WordPress の管理画面で読み込んでいる jQuery もしっかり

jQuery.noConflict();

が最後に入っています。

管理画面のプラグインやテーマで jQuery を使用する方はご注意ください。

野球好きな方には「プロ野球2.0 (扶桑社新書 24) 」はオススメです。野球というビジネスの経営に関して知ることができます。

知識ゼロからの経済学入門

弘兼 憲史
￥ 1,365
単行本
幻冬舎

「Webコンサルタント」という選択―成長企業のトップはすでに活用している

Webコンサルタント研究会
￥ 1,260
単行本
幻冬舎メディアコンサルティング

脳を活かす勉強法

茂木 健一郎
￥ 1,155
単行本（ソフトカバー）
PHP研究所

ユダヤ人大富豪の教え 幸せな金持ちになる17の秘訣 (だいわ文庫)

本田 健
￥ 680
文庫
大和書房

ウェブ時代 5つの定理 この言葉が未来を切り開く!

梅田望夫
￥ 1,365
単行本（ソフトカバー）
文藝春秋

フリーペーパーの衝撃 (集英社新書 424B)

稲垣 太郎
￥ 714
新書
集英社

プロ野球2.0 (扶桑社新書 24)

小島 克典
￥ 756
新書
扶桑社

年収崩壊―格差時代に生き残るための「お金サバイバル術」 (角川SSC新書 10)

森永 卓郎
￥ 798
新書
角川・エス・エス・コミュニケーションズ

できる人は知っている 頭のいい勉強法

箱田 忠昭
￥ 1,365
単行本（ソフトカバー）
日本実業出版社

お金と英語の非常識な関係（上） 神田昌典＆ウィリアム・リード、スペシャル対談ＣＤ付き

神田 昌典
￥ 1,365
単行本
フォレスト出版

ガンジス河でバタフライ (幻冬舎文庫)

たかの てるこ
￥ 680
文庫
幻冬舎

人生カンタンリセット!夢をかなえる「そうじ力」

舛田 光洋
￥ 1,260
単行本
総合法令出版

朝9時までの「超」仕事術

見田村 元宣
￥ 1,575
単行本
インデックス・コミュニケーションズ

勝間和代のインディペンデントな生き方 実践ガイド

勝間 和代
￥ 1,050
新書
ディスカヴァー・トゥエンティワン

なぜ、ベンチャーは失敗しやすいのか?

真田 哲弥
￥ 1,575
単行本（ソフトカバー）
インデックス・コミュニケーションズ

大人のための読書法 (角川oneテーマ21)

和田 秀樹
￥ 760
新書
角川書店

STUDY HACKS!

小山 龍介
￥ 1,575
単行本（ソフトカバー）
東洋経済新報社

一瞬で自分を変える法―世界No.1カリスマコーチが教える

アンソニー ロビンズ
￥ 1,470
単行本
三笠書房

「心のブレーキ」の外し方?仕事とプライベートに効く7つの心理セラピー?

石井 裕之
￥ 1,365
単行本
フォレスト出版

初めてでもわかる!システム開発発注入門―悩める担当者がシステム開発で成功するには?

川端 篤史
￥ 1,500
単行本
ダイヤモンド社

Ajax , Javascript ヘルパーを使用できるようにする

コントローラで Ajax, Javascritp ヘルパーを使用できるようにする。
var $helpers = array('Ajax', 'Javascript');

prototype.js を読み込む

webroot/js に prototype.js を配置し、ビューで読み込みます。
<?php echo $javascript->link('prototype'); ?>

ビューでフォームを作成する

今回は submit ボタンを押した後、更新中には submit ボタンを消して変わりに「更新中」というメッセージを表示し、更新終了後にメッセージをボタンの下の id=ajax_message に表示するようにしました。

<?php
$options = array(
    "update" => "ajax_message",
    "loading" => "Element.hide('ajax_button'); Element.show('ajax_loading');",
    "complete" => "Element.show('ajax_button'); Element.hide('ajax_loading');",
    );
echo $ajax->form("/controller/action/", "post", $options);
?>
<?php echo $html->input('Model/Field', array('type'=>'text')); ?><br>
<input type="submit" id="ajax_button">
<div id="ajax_loading" style="display:none;">更新中...</div>
<div id="ajax_message"></div>

$ajax->form の $options の
“update” で更新するメッセージ領域を指定し、
“loading”でアップロード中の動き、
“complete” で処理終了後の動き
を指定しています。

コントローラに Ajax で処理するアクションを作成

function action() {
    $this->layout = 'ajax';
    /* $this->data にフォームの内容が渡るので必要な処理を書く */
    $this->Model->id = $this->data['Model']['id'];
    $this->Model->saveField("Field", $this->data['Model']['Field'], true);
}

$this->layout で ‘ajax’ を指定して余計なヘッダ、フッタが出ないようにします。

Ajax で出力するビューを作成する

上のコントローラのアクションで出力するビューを作成します。
上の例では saveField でフォームから送られてきたデータを使用して更新処理しています。その結果によってメッセージを送信します。

<?php
if($msg=$error->messageFor('Model/Field')) {
    echo $msg;
} else {
    echo "更新しました";
}
?>

上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。

jQuery 使用準備

jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。
アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。
<?php echo $javascript->link(array('jquery.js','jquery.form.js')); ?>

ビューにアップロードするフォームを作成する

今回は users コントローラの form アクションでフォームを表示します。Ajax の処理を行うのは users コントローラの upload アクションです。
views/users/form.ctp

<h1>upload test</h1>
<?php echo $form->create('User',array('name'=>'uploadForm','id'=>'uploadForm','type'=>'file'));?>
<?php echo $form->input('upload_file',array('label'=>'Upload Text File ','type'=>'file'));?>
<?php echo $form->button('アップロード',array('onClick'=>'$('#uploadForm').ajaxSubmit({target: '#uploadFile',url: '/users/upload'}); return false;'));?>
</form>
<div id="uploadFile"></div>

コントローラの処理

views/users/form.ctp から「アップロード」ボタンを押すと users/upload アクションの $this->data にアップロードファイルの情報が入ってきます。ここでは mime タイプによって JPEG ファイルのみをアップロードできるようにしています。アップロード後に views/users/upload.ctp を出力します。

function upload() {
    if (!$this->data['User']['upload_file']) {
        $this->set('error','アップロードするファイルを選択してください');
	$this->render('upload','ajax');
    } else {
	if ($this->data['User']['upload_file']['type'] != 'image/jpeg') {
	    $this->set('error','アップロードできる画像は JPEG のみです');
	    $this->render('upload','ajax');
	} else {
	    $filename = '/files/'.intval(rand()).'.jpg';
	    rename($this->data['User']['upload_file']['tmp_name'], WWW_ROOT.$filename);
	    $this->set('filename', $filename);
	    $this->render('upload','ajax');
	}
    }
}

Ajax が返すビューを作成する

/users/upload で処理した結果を返すビューを作成します。今回は veiws/users/upload.ctp として作成しました。ここで img タグによりアップロードしたファイルを表示しています。

<?php if (!empty($error)): ?>
<p><?php echo $error;?></p>
<?php else: ?>
<p>Upload successful</p>
<?php echo $html->image($filename); ?>
<?php endif; ?>

以上で jQuery を使用して Ajax で画像のアップロードができます。

デモ

#sortarea { width: 350px; } #sortarea div { float: left; width: 100px; height: 70px; border: 1px solid #000; margin: 5px; text-align: center; padding-top: 30px; cursor: default; }

ソートする要素

前回は li タグで要素を定義しましたが、今回は div タグで定義しました。
CSS で格子状に並ぶようにしています。

<style>
#sortarea {
width: 350px;
}

#sortarea div {
float: left;
width: 100px;
height: 70px;
border: 1px solid #000;
margin: 5px;
text-align: center;
padding-top: 30px;
cursor: default;
}
</style>

<div id="sortarea">
<div id="drag_1">A1</div>
<div id="drag_2">A2</div>
<div id="drag_3">A3</div>
<div id="drag_4">A4</div>
<div id="drag_5">A5</div>
<div id="drag_6">A6</div>
<div id="drag_7">A7</div>
<div id="drag_8">A8</div>
<div id="drag_9">A9</div>
</div>

ソートする JavaScript コード

Sortable.create の option に overlap:’horizontal’ を指定しなくても並び替えはできますが、少しぎこちない感じになりますので、指定しておいたほうがいいでしょう。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    tag:'div',overlap:'horizontal',constraint: false,
});
// ]]>
</script>

まず prototype.js と scriptaculous.js を読み込む

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

ソートするリストを作成する

ここでのポイントはドラッグさせたい要素に drag_1 のように「共通の名前+アンダバー+数字」を付けることです。

<ul id="sortarea">
<li id="drag_1">A1</li>
<li id="drag_2">A2</li>
<li id="drag_3">A3</li>
<li id="drag_4">A4</li>
<li id="drag_5">A5</li>
<li id="drag_6">A6</li>
<li id="drag_7">A7</li>
<li id="drag_8">A8</li>
<li id="drag_9">A9</li>
</ul>

ソートする JavaScript コード

ソートするエリアとソートする要素を定義した後で実際にソートするための JavaScript コードを書く。このコードがソートさせたい要素よりも前に書くとエラーになるので注意。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    onUpdate:function(){
        new Ajax.Updater(
        'sortarea',
        '/path/to/phpcode',
            {
                asynchronous:true,
                evalScripts:true,
                parameters:Sortable.serialize("sortarea")
            }
        );
    }
});
// ]]>
</script>

onUpdate でソート結果をPHP に送りデータベースなりに反映させる。
データベースに反映などが必要なければ、onUpdate は不要です。

デモ

これを実際に使用した例が下記になります。

#sortarea { width: 350px; border: 1px solid #000; } #sortarea li { cursor: default; }

• LIST1
• LIST2
• LIST3
• LIST4
• LIST5
• LIST6
• LIST7
• LIST8
• LIST9

Google AJAX Search API KEY と Google Map API KEY を指定して JavaScript を読み込む

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=Google AJAX Search API KEY" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Google Map API KEY" type="text/javascript"></script>

実際の表示部分。 q=キーワードで表示させる地図のキーワード（または住所）を指定する。

<script type="text/javascript">
<!--
var gls;
var gMap;

function OnLocalSearch() {
    if (!gls.results) return;
    var first = gls.results[0];
    var point = new GLatLng(parseFloat(first.lat), parseFloat(first.lng));
    var zoom = 15;
    gMap.addControl(new GSmallMapControl());
    gMap.addControl(new GMapTypeControl());
    gMap.setMapType(G_MAP_TYPE);
    gMap.setCenter(point, zoom);
    var marker = new GMarker(point);
    gMap.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
}

function load() {
    gMap = new GMap2(document.getElementById("map"));
    gMap.addControl(new GSmallMapControl());
    gMap.addControl(new GMapTypeControl());
    gMap.setCenter(new GLatLng(0, 0));
    gls = new GlocalSearch();
    gls.setCenterPoint(gMap);
    gls.setSearchCompleteCallback(null, OnLocalSearch);
    var q = "横浜ランドマークタワー";
    gls.execute(q);
}
//-->
</script>

<body onLoad="load()">
<div id="map" style="width: 410px; height: 320px"></div>
</body>

各 API KEY の取得は下記ページから
Sign-up for an AJAX Search API Key – Google AJAX Search API – Google Code
Sign Up for the Google Maps API – Google Maps API – Google Code