RSS

Jqueryを利用して遷移のない一覧表示+データ追加

10 1月

なんでjqueryを使うかというと、ここは鼻の黒い人が使ってるからです!ここまで違うともうさすがにだめそうなので…。色々と。そろえるパーツ

  • コントローラー側:一覧取得し、エンコードしてすべてのリストを返す(初期表示にコール)
  • コントローラー側:データを登録して、すべてのリストを返す(追加時にコール)
  • javascript:フォームから登録するときに呼び出され、フォーム内容をクリアするスクリプト
  • javascript:一度全ての要素を削除して、セットするスクリプトを作成
  • 必要なのはjqueryとjquery.formを取得して読み込む。

    		echo $javascript->link('jquery-1.3.2.min.js');
    		echo $javascript->link('jquery.form.js');
    

    コントローラー側

       //データを更新し(ログテーブル側にはインサート)、全てのログテーブルのリストを返却する
    	function admin_add_recruit(){
    		if($this->data['RecruitLog']['status_id'] == ''){
    			//空かもしくは現在のステータスと同じ場合はエラーを出してほしい。
    			$log_data['result_code'] = 'error';
    			$log_data['msg'] = '選択してください';//ここでエラーをセットする
    		}else{
    			$this->Recruit->id =$this->data['Recruit']['id'];
    			$this->Recruit->save($this->data['RecruitLog']);
    			$recruit_list= $this->Recruit->read(null,$this->data['Recruit']['id']);
    			$this->data['RecruitLog']['company_id']=$recruit_list['Recruit']['company_id'];
    			$this->data['RecruitLog']['member_id'] =$recruit_list['Recruit']['member_id'];
    			$this->data['RecruitLog']['recruit_id']=$recruit_list['Recruit']['id'];
    			$this->RecruitLog->save($this->data);
    			$log_data['result_code'] = 'success';//ここでコードをセットし、js側でキャッチ
    			$log_data['data'] = $this->RecruitLog->findAllByRecruitId($this->data['Recruit']['id'],null,'id');
    		}
    		echo json_encode($log_data);
    		$this->autoRender = false;
    	}	
    
       //一覧を取得し、返却する
    	function admin_list_recruit($id){
    		$log_data = $this->RecruitLog->findAllByRecruitId($id,null,'id');
    		echo json_encode($log_data);
    		$this->autoRender = false;
    	}
    

    スクリプト側は以下のように。

    <script type="text/javascript">
     $(document).ready(function() {
    	  // 表示レベル - 表示 (ajax)
    	  $.getJSON('/matching/admin/users/list_recruit/<?php echo $recruit_list['Recruit']['id']?>', function(responseText) {
    	    disp_log_list(responseText);
    	  });
          // bind 'myForm' and provide a simple callback function 
          $('#LogAddForm').ajaxForm({ 
              // dataType identifies the expected content type of the server response 
              dataType:  'json', 
              success: function(responseText) {
          	    //disp_log_list(responseText);
          	    if(responseText['result_code'] == 'success'){
              		//$("#LogAddForm input[name =='data\[RecruitLog\]\[admin_memo\]']").val('');
              		//登録できたら空白に戻す
              		$("#LogStatusId").val('');
              		$("#LogAdminMemo").val('');
              		disp_log_list(responseText['data']);
            		}else{
              		alert(responseText['msg']);
            		}
          		}
              //success:disp_log_list
          });
     });
     
    function disp_log_list(data) {
    	// 一度、要素を一度すべて削除する
      $("#approach_log tbody tr").remove();
      for (i in data){
        var td_status = $("<td>").html(data[i]['RecruitLog']['status_id']);
        var td_reason = $("<td>").html(data[i]['RecruitLog']['reason']);
        var td_add_memo = $("<td>").html(data[i]['RecruitLog']['admin_memo']);
        var td_user_memo = $("<td>").html(data[i]['RecruitLog']['user_memo']);
        var td_date = $("<td>").html(data[i]['RecruitLog']['created']);
        //var td_operation = $("<td>").html('');
        var tr = $("<tr>");
        tr.append(td_status).append(td_reason).append(td_add_memo).append(td_user_memo).append(td_date);
        $('#approach_log tbody').append(tr);
      }
    }
    </script>
    

    js側は、最初に読み込んだときにフォームからの登録の際に呼ばれるものがひとつ。さらに登録時の処理をバインドしている。success:のところに成功した処理をかけるので、入力フォームをクリアさせて、さらに disp_log_listを呼び出している。php側で[msg]にセットした内容をダイアログで出しているので、js側でのチェックはしていません。二つめはdisp_log_listで、全ての要素を削除して取得したデータをセット。これは初期表示+登録時に呼ばれるものです。
    1.初期ロード:全てのデータを取得し、処理Aを呼び出す
    2.初期ロード:フォームでサブミットし、取得したデータを処理Aに渡す関数をバインド
    3.処理A
    みたいな形かな。
    さて、view側…あまり美しくないけど。ポイントはidをちゃんと指定するのと、テーブルの中身は空っぽで、レンダリングが終わったあとにセットするので、tbodyは空っぽだけど、用意しないと場所がわからないのでtbodyは用意するべし。

    echo $form->create('User',array('action' =>'add_recruit','id'=>'LogAddForm'));?>
    <div class="group">
    	<label class="label">表示レベル<span>[必須]</span></label>
    	input('RecruitLog.status_id',array('label'=>'ステータス','type'=>'select','empty'=>'---','options'=>$status,'id'=>'LogStatusId'))?>
    </div>
    <div class="group">
    	<label class="label">表示レベル名称<span>[必須]</span></label>
    	input('RecruitLog.admin_memo',array('label'=>'管理者用メモ','id'=>'LogAdminMemo'))?>
    </div>
    <div class="group navform">
    	<button class="button" type="submit" name="add_data">
    	<img src="/gn_images/icon/tick.png" alt="Save"> 上記内容で登録を行う
    	</button>
    </div>
    hidden('Recruit.id',array('value'=>$recruit_list['Recruit']['id']))?>
    end()?>
    	<table class="table" id="approach_log">
    	<thead>
    		<tr> 
    			<th class="first">状況</th>
    			<th class="first">詳細</th>
    			<th>管理者用メモ</th>
    			<th>ユーザ用メモ</th>
    			<th class="last">日付</th> 
    		</tr>
    	</thead>
    	<tbody>
    	</tbody>
    	</table>
    
    広告
     
    コメントする

    投稿者: : 1月 10, 2010 投稿先 cakephp, javascript

     

    コメントを残す

    以下に詳細を記入するか、アイコンをクリックしてログインしてください。

    WordPress.com ロゴ

    WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

    Twitter 画像

    Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

    Facebook の写真

    Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

    Google+ フォト

    Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

    %s と連携中

     
    %d人のブロガーが「いいね」をつけました。