Posts tagged jQuery

jQuery で Ajax のメモ

0

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

8月に読んだ本

0

8月は夏休みをとったこともあり全部で26冊読みました。小説もいつもの月より多く読めました。

成功本51冊もっと「勝ち抜け」案内」は別エントリで書いたのでそちらを見ていただくとして、その他のおすすめは「ビット・トレーダー」「犯人に告ぐ」です。
(続きを読む…)

jQuery でクッキーを扱う方法

0

jQuery でクッキーを扱うのを下記サイトを参考にやってみました。
javascriptライブラリjQueryでcookieを超簡単に扱う方法 : 4GALAXYのメモ
Klaus Hartl – Stilbüro : Cookie Plugin for jQuery

jquery.cookie.js の準備

jquery.cookie.js をダウンロードして HTML で使えるようにします。

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

(続きを読む…)

WordPress 管理画面でウィジットをドラッグ&ドロップするとおかしくなるのを修正

1

WordPress の管理画面でダイナミックウィジットを編集する機能で、ウィジットをドラッグ&ドロップして順番を入れ替えることができます。しかし、ドロップする場所によっては下記画像のようになってしまいます。

管理画面のウィジット
(続きを読む…)

markItUp! を CakePHP で使用するヘルパー

0

jQuery を使用したブラウザで使用できる高機能マークアップエディタ markItUp! で紹介した markItUP を CakePHP で使用するヘルパーが Bakery に紹介されていました。
markItUp! jQuery universal markup editor Helper | The Bakery, Everything CakePHP : Articles

元の記事のままやってみたのですが一部うまく動作しなかった部分がありましたので、実際に私がやった手順を紹介します。
(続きを読む…)

jQuery を使用したブラウザで使用できる高機能マークアップエディタ markItUp!

1

jQuery を使用したブラウザで使用できる高機能なマークアップエディタです。
markItUp! Universal Markup Editor

まずはデモでどのようなエディタができるかを見てみるのが早いかと思います。
HTML
Wiki 記法
Mac OS 風
(続きを読む…)

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

0

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 ファイルの一番最後に書き加えることにより $ を上書きしないように元に戻します。
(続きを読む…)

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

CakePHP JQuery ヘルパー

2

JQuery helper for CakePHP ( PQuery port ) at NGCoders
CakePHP から JQuery を簡単に使うことができます。

正確には PQuery ヘルパーかもしれません。PQuery は JQuery を PHP から簡単に使用するライブラリで PQuery ヘルパーと同じ開発者が開発しています。
参考:PQuery – PHP and JQuery at NGCoders

インストール

JQuery helper for CakePHP ( PQuery port ) at NGCoders から JQuery ヘルパーをダウンロードし、解凍した pquery.php を /app/views/helpers にコピーします。
そのほかに jquery.js ファイルも必要になります。こちらもダウンロードして /app/webroot/js にコピーします。

コントローラ

Pquery ヘルパーと Javascritp ヘルパーを使用します
var $helpers = array('Pquery', 'Javascript');

ビュー

jquery.js の読み込み
<?php echo $javascript->link('jquery.js'); ?>

使用例

トグルボタン

<div id='msg'>Message...</div>
<?php echo $pquery->link_to_function('toggle', $pquery->toggle('#msg'));?>

フォームで送信された内容により HTML を更新
入力したテキストを /controller/action/ に GET で送信し、id=idtoupdate に受け取った HTML を表示する

<?php echo $pquery->form_remote_tag(array('url'=>'/controller/action/','update'=>'#idtoupdate'));?>
<input type='text' name='field' />
<input type='submit' />

<div id='idtoupdate'></div>

pquery.php を見ると色々なメソッドがあります。使い方はソースを見ればすぐに分かると思います。

Go to Top