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

11217 回閲覧 このエントリーをはてなブックマークする この記事のブックマークユーザー 永続的リンク2008/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>
 →ツイッターのフォローはこちら
スポンサード リンク
         

関連記事

↑ページ上部へ

アクセスカウンター

今日 : 4 昨日 : 52

ブログ内容

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

プロフィール

MICK

MICKです。

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

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

運営サイト

      

カテゴリ一覧

サイト広告

オススメの書籍とか

感想

紹介

色々

最近のコメント

最新記事

注目記事

人気記事

最近の人気記事

人気の記事

関連サイト

運営サイト

色々

最近のトラックバック