実現したいこと
JTinderというライブラリをLaravel上で使っていて、スワイプでYes,Noの選択結果を受け取っています。スワイプするたびにajaxの処理が走り、DBからデータを取得する為に必要なパラメータがControllerにPOSTで送信されます。
javascript
sessionStorage.clear(); let currentQuestionIndex = 0; let postReaction = function(category,reaction){ $.ajaxSetup({ headers:{ 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), } }); $.ajax({ type:"POST", url:"api/search", //ReactionControllerのsearchメソッドを呼び出す data: { category: category, status: reaction }, success:function(){ console.log('success'); } }) } $("#tinderslide").jTinder({ onDislike: function(item){ currentQuestionIndex++; storeToSessionStorage('dislike',myCallback); checkQuestionNum(); }, onLike: function(item){ currentQuestionIndex++; storeToSessionStorage('like',myCallback); checkQuestionNum(); } }); $('.actions .like, .actions .dislike').click(function(e){ e.preventDefault(); $("#tinderslide").jTinder($(this).attr('class')); });
PHP
class ReactionController extends Controller { public function search(Request $request){ $category = $request->category; $like_status = $request->status; if($like_status === 'like'){ $result = Model::where('style',$category)->get(); session([$category => $result]); } //画面を表示しているコントローラは別にある } }
そしてその一連の流れをスワイプ画面の枚数分、複数回行います。各回で取得されたデータは、その都度Sessionに保存し、最終的な結果画面で一覧表示させたいと考えています。
発生している問題・エラーメッセージ
最終のSessionのデータをBlade上に表示できていません。
正確には表示はできるのですが、Sessionに保存したデータが、スワイプ後の結果表示画面で即時反映されず、もう一度読み込み直して反映される。といった状態です。
ここまでの処理はajaxを使っていることもあり、すべてのプロセスが画面遷移なしの一画面で完結しています。回数分のスワイプが終了すると、resultFormのstyle:noneがblockに変わり、画面遷移やリロードなしで結果表示画面までいきます。画面遷移やリロードなしでSessionの中身のデータまで表示してしまいたいのですが、可能なのでしょうか?
html
@extends('layouts.layout') @section('content') <div class="ContentPage"> <div class="container"> <div id="tinderslide"> <h1 class="h3 ContentPage_contents_title">title</h1> <ul> @foreach($questions as $question) <li data-user_id="{{ $question->id }}"> <div class="userName">{{ $question->statement }}</div> <img src=" /storage/images/{{$question->card_image }}"> <div class="like"></div> <div class="dislike"></div> </li> @endforeach </ul> </div> <div id="resultForm" style="display: none"> <h1>結果</h1> <ul> @if(session()->has('category1')) @foreach(Session::get('category1') as $content) <li class="recommend">{{ $content->name }}</li> @endforeach @endif @if(session()->has('category2')) @foreach(Session::get('category2') as $content) <li class="recommend">{{ $content->name }}</li> @endforeach @endif @if(session()->has('category3')) @foreach(Session::get('category3') as $content) <li class="recommend">{{ $content->name }}</li> @endforeach @endif </ul> <div class="btn ContentPage_contents_btn"> <a href="{{route('questions.index')}}" class="text-white">もう一度やる</a> </div> </div> </div> </div> <script> var questionsNum = {{$questionsCount}}; let tasteList = <?php echo $tasteList_json; ?> </script> @endsection
試したこと
・SessionではなくCacheを使う
https://readouble.com/laravel/6.x/ja/cache.html
などを参考にsessionではなくcacheを使ってみましたが、同じく画面にデータは出力できるものの、再読み込みなしですぐには表示されませんでした。
・変数に意図した値が入っているかどうか
再度確認しましたが、ajax送信やDBからのデータ取得、Sessionへの値格納は正しく行われています。
あくまでSessionに格納した値がすぐ反映されないことが問題です。
補足情報(FW/ツールのバージョンなど)
Laravel Framework 6.20.44
JTinder
PHP 7.4.1
まだ回答がついていません
会員登録して回答してみよう