質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.70%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,276

milkif

score 14

前提・実現したいこと

動画再生後、モーダルを出現させ、モーダル内にチェックボックスを表示させチェックを入れて送信ボタンをクリックすると親画面に戻り次の動画の表示と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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+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);
    }
},

ご参考までに。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/30 16:05

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

    キャンセル

  • 2016/05/30 20:56 編集

    何度もご回答頂き有難うございます。
    上記省略
    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が出てしまいます。

    キャンセル

  • 2016/05/30 21:15 編集

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

    キャンセル

check解決した方法

0

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.70%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる