Call Laravel Model Function from Blade Button OnClick Javascript Function and Stay On the Page

Question

Goal:

A user will have a list of games in a table with text boxes for each team's score. I want the user to be able to change the score of a single game, click Save (Model function updates the record), and continue saving more games while never leaving the page.

How:

After a Laravel Blade view has been rendered, I want to execute a Model function from a Javascript function on-button-click, but stay on the same page.

admin.blade.php (Javascript section in Head tag)

/* Save game from inline list on Admin page */
function inlineSaveAdmin(gameId) {
  var homeScoreTxt = document.getElementById("homeScoreTxtBox");
  var homeScore = homeScoreTxt.value;
  var awayScoreTxt = document.getElementById("awayScoreTxtBox");
  var awayScore = awayScoreTxt.value;

  {{ AppModelsGame::inlineSave(gameId, homeScore, awayScore) }}
}

admin.blade.php (body of view)

<button type="button" onclick="inlineSaveAdmin({{ $game->id }});" class="btn btn-outline-success">Save</button>

So far, the Model function only executes when the page loads, not when I click the button. That is the main problem I wish to solve. Thanks for any help!

(and yes, I believe that I will need to create identical Javascript functions for each gameId that exists to be able to reference the correct homeScoreTxtBox{{ game->id }} since I don't think I could otherwise dynamically pull the text box IDs based on the Javascript function's input parameter)

Answer 1

1.make an ajax function on that blade file

2.call that ajax on click pass the id and updated data

3.define a route for that ajax function in web.php and

4.make a controller function on that route.

Code:

$(document).ready(function() {
            $("#button").on('click', function() {
                 **//get id and score**
var homeScoreTxt = document.getElementById("homeScoreTxtBox");
var homeScore = homeScoreTxt.value;
var awayScoreTxt = document.getElementById("awayScoreTxtBox");
var awayScore = awayScoreTxt.value;
var game_id = gameId;
                $.ajax({
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '{{ route('update') }}',
//all the data you need to pass to controller function
                        data: {       
                            'id': gameId,
                            'homescore': homeScore,
                            'awayscore' : awayScore
                        },
                        // dataType: 'json',
                        success: function(data) {
                            //data returned from php
                            // update the values 
                            if (data) {
                                homeScoreTxt.value=data.homeScore,
                                awayScoreTxt.value=data.homeScore
                            }
                        },
                        fail: function() {
                            alert('NO');
                        }
                    });
                });
            });

web.php

Route::post('update', 'UpdateController@update')->name('update');

Update the values in the controller function by simple model queries. Send updated data like this:

$response = [
    'homeScore' => $homeScore,
    'awayScore' => $awayScore
];

return response()->json($response);