Ajax

jQuery で Ajax のメモ

0

jQuery の自分へのメモです。
(続きを読む…)

Amazonに横浜市立図書館の検索結果を差し込むgreasemonkeyスクリプト

4

unwind-protect: Amazonに横浜市立図書館の検索結果を差し込むgreasemonkeyスクリプト – 改訂

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

jQuery で属性値を変更するには set ではなく attr メソッド

1

jQuery で属性値を変更する方法を Google で検索すると

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

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

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

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

参考:Attributes/attr – jQuery JavaScript Library

WordPress の管理画面で jQuery を使用する場合の注意点

1

WordPress の管理画面で使用するプラグインを作成しているのですが、jQuery を使用するときの注意点です。

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

jQuery.noConflict();

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

3月に読んだ本

0

3月は合計20冊。忙しかったが結構いいペースで読めました。

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

CakePHP Ajax のフォームを作成する

5

今さらなのですが CakePHP1.1 で Ajax のフォームを作成するというのをやったのでメモしておきます。

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 "更新しました";
}
?>

CakePHP jQuery を使用した Ajax ファイルアップロード

6

下記ページを参考にさせていただきました。
“jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan
David Golding Design Blog -

上記ページでは 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 で画像のアップロードができます。

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

1

scriptaculous.js を使って並び替えを行う を応用して格子状に並んだ要素を並び替える例です。基本的な部分はリスト形式の並び替えと同じですので省略します。
最初にデモ、その後にコードを紹介します。

デモ


#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; }

A1
A2
A3
A4
A5
A6
A7
A8
A9

ソートする要素

前回は 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>

scriptaculous.js を使って並び替えを行う

2

JavaScript の読み込み

まず 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

GoogleMap 特定のキーワードで表示させる

4

Google AJAX Search API を使用してキーワードや住所から自分のサイトに Google Map を表示させるメモ

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

Go to Top