前提・実現したいこと
動画再生後、モーダルを出現させ、モーダル内にチェックボックスを表示させチェックを入れて送信ボタンをクリックすると親画面に戻り次の動画の表示と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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+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);
}
},
ご参考までに。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
cakephp2系 非同期通信にて取得した値をリアルタイムに表示させたい。で解決できました。有難うございました。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.37%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/30 10:54
お時間のある時で構いませんのでアドバイスをいただけたら幸いです。
2016/05/30 12:31
2016/05/30 12:34
Chromeをお使いでしたら、右クリック⇒検証⇒Networkタブにて、念のためPreserve logにチェックを入れた状態で操作するとajaxでリクエストした際の記録が見られます。
ajaxでリクエストした際の記録をクリックし、Responseタブを見てみると `{"point":12}` のようなデータが返ってきていればPHPからはポイントが返ってきていることの確認は行えるかと思われます。
2016/05/30 13:14
chromeの検証ではポイントが返ってきていません。
見当違いかもしれませんが、ctpファイルで var points=JSON.parse('<?php echo $point; ?>');してjsファイルでconsole.log(point);すると値が返ってきていることは確認できました。
お手数をお掛けして恐縮です。
2016/05/30 16:05
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 編集