cakephp2系 サーバから最新の値を取得し表示する方法

Question

###前提・実現したいこと
動画再生後、モーダルを出現させ、モーダル内にチェックボックスを表示させチェックを入れて送信ボタンをクリックすると親画面に戻り次の動画の表示とajaxで送られてきた値をサーバ保存し、そこで加算された最新のポイントを表示させたい。

###発生している問題・エラーメッセージ
ajaxを使い次の動画の取得、サーバへの保存まで出来るようになったのですが、ajaxにてサブミット後、ページをリロードしないようにreturn false;しているので、次の動画は表示され、サーバに値を保存するまではできているのですが、そのサーバに保存された最新の値は、手動でブラウザのリロードを行わないと最新のポイントが反映されません。
ajaxのreturn false;を外せば、値の保存と、ポイントは最新の値を表示してくれますが、動画の表示が元の動画に戻ってしまいます。

###該当のソースコード

$(".a").on("click",function(){
		var check_count = $("[name='check[]']:checked").length;
		if (check_count == 0 ){
		return false;
		}else{
    var checked=[];
    $("[name='check[]']:checked").each(function(){
        checked.push(this.value);
    });

    $.ajax({
    		type: "POST",
    		url: "",
				dataType: "text",
				data: {
						"a": a,
						"b": b,
						"point":point,
                        "checked" : checked,
        },
				success: function() {
						$('#a').modal('hide');
						if(index < videos.length-1){
							index++;
							getElements();
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						alert('Error : ' + errorThrown);
					}
		});
		return false;//サブミット後、ページをリロードしないようにする
		}
});

	public function beforeFilter() {

        $id = $this->Auth->user('id');
        $data = $this->Point->find('all',
            array(
                'conditions'=> array('Point.id' => $id),
                'fields'	=> array('sum(point) as point'),
            )
        );
        $point = $data['0']['0']['point'];
        $this->set('point',$point);

    }

	public function index() {
        $this->set('videos', $this->Video->find('all'));
        $checked = array();
        if ($this->request->is('ajax')){
            $this->autoRender = false;
            $p_checked = $this->request->data['checked'];
            $p_checked = json_encode($p_checked);
            $data = array(
                'Point' => array(
                    'a' => a,
                    'b' => b,
                    'point' => $this->request->data['point'],
                    'checked'=> $checked
                )
            );
            $this->Point->create();
            $this->Point->save($data);
            exit;
        }
    }

###試したこと
ajaxのreturn false;をtrueにする。（動画が反映されない）。
Sessionにポイントの値を変数にして入れてみる。
書き方が悪いのか取得できない。

###補足情報(言語/FW/ツール等のバージョンなど)
XAMPP 5.6.14-0
cakephp-2.7.8
jquery 1.11.0
10.0.17-MariaDB

Answer 1

こんにちは。

画面に表示されている値はHTMLとして読み込まれた時点のものですので
$.ajax()によって非同期でやりとりする時は、
その処理の中で画面上のポイント部分の要素を書き換える必要があるかと思われます。

リクエストを受け取るPHPでは
最新のポイントを返すようにします。
(※私の知識はCakePHP2.4のため2.7.8だと若干違う恐れがあるかもしれません)

public function index() {
    // 省略します
    if ($this->request->is('ajax')){
        // 省略します
        // exit; // ↓次のようにjsonで最新のポイントを返すように変えます
        $this->viewClass = 'Json';
        $point = // 最新のポイント;
        $this->set(compact('point'));
        $this->set('_serialize', array('point'));
        return;
    }
}

javascript側では
ポイントを受け取って表示したい箇所にポイントをいれます。
例えば、ポイントを表示している要素が<span class="point"></span>のような場合、

success: function(res) {
    $('#a').modal('hide');
    if(index < videos.length-1){
        index++;
        getElements();
    }
    // ↓次のようにjsonで受け取った最新のポイントをclass="point"の要素にいれます
    if (res && res.point) {
        $('.point').text(res.point);
    }
},

ご参考までに。

Comments

[milkif]

分かりやすく、丁寧な回答を頂き感謝いたします。先程から試しているのですが、jsファイルのコンソールでUncaught ReferenceError: res is not definedと出てしまい,ctpファイルは<span class="point"></span>で何も表示されていない状態です。
お時間のある時で構いませんのでアドバイスをいただけたら幸いです。

[退会済みユーザー]

ふーむ、、、見落としていましたが、$.ajax()でのdataTypeを 今の `dataType: "text",` から `dataType: "json",` に変えてみてください。

[退会済みユーザー]

その後、
Chromeをお使いでしたら、右クリック⇒検証⇒Networkタブにて、念のためPreserve logにチェックを入れた状態で操作するとajaxでリクエストした際の記録が見られます。
ajaxでリクエストした際の記録をクリックし、Responseタブを見てみると `{"point":12}` のようなデータが返ってきていればPHPからはポイントが返ってきていることの確認は行えるかと思われます。

[milkif]

貴重なお時間を頂きご返事有難うございます。dataTYpeを'json'とすると「Error : SyntaxError: Unexpected token < in JSON at position 1」のアラートが出てしまうため'text'にしました。
chromeの検証ではポイントが返ってきていません。
見当違いかもしれませんが、ctpファイルで var points=JSON.parse('<?php echo $point; ?>');してjsファイルでconsole.log(point);すると値が返ってきていることは確認できました。
お手数をお掛けして恐縮です。

[退会済みユーザー]

$this->viewClass = 'Json';の指定はありますか？バージョンによって挙動が異なるのかもしれませんがデータビュークラスを指定するとctpが呼ばれることは無いと思われます。

[milkif]

何度もご回答頂き有難うございます。
上記省略
exit; //処理を終わります
$this->viewClass = 'Json';
$point = $data['0']['0']['point'];// 最新のポイント;
$this->set(compact('point'));
$this->set('_serialize', array('point'));
return;
}
やはりdataTYpeを'json'とするとError : SyntaxError: Unexpected end of JSON inputが出てしまいます。

[milkif]

上記コードの訂正しました。

Answer 2

cakephp2系　非同期通信にて取得した値をリアルタイムに表示させたい。で解決できました。有難うございました。