Sessionに格納したデータをBlade上に即時反映することはできるか

Question

実現したいこと

JTinderというライブラリをLaravel上で使っていて、スワイプでYes,Noの選択結果を受け取っています。スワイプするたびにajaxの処理が走り、DBからデータを取得する為に必要なパラメータがControllerにPOSTで送信されます。

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'));
});

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の中身のデータまで表示してしまいたいのですが、可能なのでしょうか？

@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

Comments

[hoshi-takanori]

session や blade はサーバー上の php で動いてるので、即時反映は無理なのでは…。

Answer 1

セッションの値を更新してもそれはサーバーサイド（PHP上）での話であって、
すでに出力されたHTMLには影響しません。
既にサーバーとの通信は終わっていてPHPの手からは完全に離れています。

読み直すとセッションの値が反映されるのは、
Laravelが再度HTMLを作り直してそれをブラウザが表示してるからです。

具体的にどうすべきかですが、
1番簡単なのは回答時にJavaScriptで結果部分のHTMLを更新することです、これだとAjaxもいりません。
Sessionを使うのが必須であれば、最後の問題の解答後にAjaxでLaravelからセッションの値をJSONで貰うなり、結果部分のHTMLだけレンダリングさせてHTML貰うなりし、JavaScriptでHTMLを変更するのがよいと思います。

Comments

[asahiko123]

回答ありがとうございます。

頂いたアドバイスをもとに改めて考え直し、意図したものを作ることができました！
最終的には、fetchAPIを使い、Laravelから貰ったjson形式のresponseを加工し、JSでHTML作ったところに
データを出力するという形になりました。

Sessionは不要でしたので、今回はやめました。