cakePHPでAjaxフォームのサンプル

5538 回閲覧 このエントリーをはてなブックマークする この記事のブックマークユーザー Permalink2008/03/05 00:00:12 カテゴリ: PHP, JavaScript, Ajax, CakePHP
スポンサード リンク
cakePHP



================
追記：2009/01/12
================
Ajaxフォームのサンプルとしては、Ajaxヘルパーをつかった問合せフォームプラグインも公開しています。
よかったらどうぞ。
================
　cakePHPでAjaxをちょこっとやったので書きます。

Ajax用に新しくコントローラとビューを作成せずに、ひとつのビューとコントローラで処理しました。
ajaxload.infoにあるようなおしゃれなLoading画像を使うのもいいですね。

loading
loading
loading



サンプル：ログインフォームをAjaxでやってみる。

コントローラー

class TestsController extends AppController{
    var $name = "Tests";
    var $helpers = array('Html' ,'Javascript' , 'Ajax' );
    var $uses = array('Test','Staff');

    function form(){
        $this->layout = "login";
        
        //データが送られてきたら
        if(!empty($this->data)){
           $this->layout = "ajax";
           //表示するエラーメッセージ
            $this->set('message','ユーザーIDかパスワードが違います。');
            $data = array(
                'user_id' => $this->data['Staff']['user_id'],
                'password' => $this->data['Staff']['password']
            );
           //データの検査
            if(!$this->Staff->validates($this->data)){
              return;
          }
          $data = $this->Staff->findAll($data);
           if(count($data) == 0){
             return;
          }
           //認証OK（今回は指定のURLへ飛ばす）
            $this->set('url','/admin/tests/index');
　　　　　　$this->set('message','OK');
           }
    }

ビュー

<?php
//ajaxでのアクセスの場合
if(!empty($message)){
    if (isset($url)) echo $javascript->codeBlock('window.location = "'.$url.'"');
    echo $message;
    exit;
}

$options = array(
    "update" => "messageDiv",
    "loading" => "Element.hide('ajax_button'); Element.hide('messageDiv'); Element.show('loadingImg');",
    "complete" => "Element.show('ajax_button'); Element.show('messageDiv'); Element.hide('loadingImg');",
    );

echo $ajax->form("/tests/login", "post", $options);
?>
    ログインID：
    <?php echo $html->input("Staff/user_id",array('size' => '35'));?>
    <br/>
    パスワード：
    <?php echo $html->password("Staff/password",array('size' => '35'));?>
    <br/>
    <div id="messageDiv" style="display:none"></div>
    <div id="loadingImg" style="display:none">
        <?php echo $html->image("ajax-loader-green.gif");?>
    </div>
 <?php echo $html->submit("ログイン",array("id"=>"ajax_button"));?>
</form>

レイアウト

prototype.jsをapp/webroot/jsに置き、読み込む。

<head>
/*
 *省略
 */
<?php echo $javascript->link('prototype')?>
</head>
　→ツイッターのフォローはこちら
スポンサード リンク
　　　　　　　　　

関連記事

コメントを残す • トラックバック (0) Permalink永続的リンク

この記事へのトラックバック アドレス

コメント, トラックバック:

この投稿への コメント/トラックバック はまだありません...

コメントを残す:

頂いたメールアドレスはこのサイト上には表示されません。
頂いたURLは表示されます。

許可される XHTML タグ: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>
(改行が自動で <br /> になります)
(名前、メールアドレス、URLを記憶する Cookie を発行します)
(ユーザがメッセージ・フォームを通してあなたに連絡することを許可します (あなたのメール・アドレスは表示されません))

↑ページ上部へ

アクセスカウンター

今日 : 5 昨日 : 225

ブログ内容

主にウェブ関係のことを書いてます。たまにブレイクダンスとか他のことも書いています。

プロフィール

MICK

MICKです。

1983年1月24日生まれ。ウェブの世界にいるのは、偶然のようで必然なのかも。

好きなこと :
　挑戦すること。物事に没頭すること。勉強すること。
嫌いなこと :
　自慢話を聞くこと。人の悪口を言うこと。

運営サイト

　　　　　　

カテゴリ一覧

ネットチラシ紹介

オススメの書籍とか

感想

紹介

最近のコメント

ウェブ  |  画像  |  動画

最新記事

→全記事一覧

注目記事

人気記事

最近の人気記事

人気の記事

→全記事一覧

関連サイト

運営サイト

色々

アクセスランキング

位 アクセス元 数
1位 bing.com 290
2位 twitter.com 258
3位 q.hatena.ne.jp 121
4 b.hatena.ne.jp 101
5 fdays.blogspot.com 91
6 d.hatena.ne.jp 68
7 analytics-ja.blogspot.com 59
8 as.blog16.jp 48
9 cakephp.blog16.jp 45
10 1kb.jp 33
11 moviereleases.mommyc･･･ 31
12 milds.net 28
13 syuhari.jp 28
14 blog.development-net･･･ 25
15 atmarkit.co.jp 21

最近のトラックバック

ブログ一六社