blade内のjavascriptにてモデルの関数を呼び出しする処理を記載した際に、onclickイベントで拾っているにもかかわらず画面表示時に処理が呼び出されてしまう

Question

blade上にあるaタグやbuttonタグに対してon_clickを付与してjavascriptの関数を呼んでいて、
javascriptの関数内で以下のようにlaravelのモデル内に定義した関数を呼び出すような実装をしていますが、
リンクやボタンがクリックされたときでなく、画面を表示した際にのみupdateOperationDatetime()が呼ばれてしまっております。
（updateOperationDatetime()テーブルに対して操作日時をUPDATEを実行する処理を行っており、画面表示した際に日時が更新され、リンクやボタンを押下した際は更新されませんでした）

                            <script language="javascript" type="text/javascript">
                                function updateOperation() {
                                    '{{ asset(\App\Models\Operation::updateOperationDatetime($user)) }}';
                                }
                            </script>

javascriptからlaravelのモデルを使用しているケースについて調べてみましたが、自分が探した限りでは情報が出てこなかったのでそもそもこのやり方自体がお門違いなのでは、と思っておりますが、aタグなどに対してクリックされた際にDBへの更新処理のみを走らせたい場合（サーバーからの応答は必要ない場合）は他にいいやり方があるのでしょうか。
今回のケースの正しい実装方法or他のいいやり方をご存じの方がいらっしゃったら教えていただけますと幸いです。

Answer 1

PHPはサーバーサイドの言語なので、初回アクセス時に下記を実行し、その結果をHTMLに表示しているだけなのでJSでPHPの関数を呼ぶために記載にはなりません

'{{ asset(\App\Models\Operation::updateOperationDatetime($user)) }}';

方法としては、ルーティングを一つ追加し、onClick時にそこのURLに対してJSでリクエストを飛ばす処理を書く必要があります。

Route::post('/hoge', function($request) {
    // ajaxリクエスト以外を受け付けない
    if (!$request->ajax()) {
        abort(422);
    }
   // なにかの処理
});

// 以下なにかしらのjsファイル
// axiosや、jqueryの$.ajaxなど、そのurlに対してリクエストを飛ばします
axios.post('/hoge')
                                

その他の手法としては、Livewireという上記で記載したものを、PHPを書くだけで自動で生成し行ってくれるものがあります。
https://readouble.com/livewire/2.x/ja/installation.html

Comments

[tmudon5566]

ご丁寧にありがとうございます。
早速上記の方法で試してみようと思いましたが、ajax通信について勉強不足なのでまずは普通にjavascriptからURLに対してリクエストを飛ばす処理を書いてみたところ、実現したいことが上手くいっておりました。

var url = '{{ route("update_operation_datetime",":user_id") }}';
url= url.replace(':user_id', {{ $user->id }});
document.location.href= url;

あとはこれを画面遷移なしというか、非同期で処理できればやりたいことが実現できるので、ajaxについて調査した上で実装修正してみます。

[tmudon5566]

その後、ajax通信について調べた上で実装してみたところ、無事やりたいことが実現できました！

$.ajax({
headers: {
'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
},
url: '{{ route("userlog_update") }}',
method: 'POST',
data: {
'user_id': {{ $user->id }}
},
})

この度はありがとうございました。