时间戳

首页 > 解决方案 > 从 Blade Button OnClick Javascript 函数调用 Laravel 模型函数并停留在页面上

javascript - 从 Blade Button OnClick Javascript 函数调用 Laravel 模型函数并停留在页面上

问题描述

目标：

用户将在表格中获得一个游戏列表，其中包含每个团队得分的文本框。我希望用户能够更改单个游戏的得分，单击保存（模型功能更新记录），并继续保存更多游戏，同时永远不会离开页面。

在此处输入图像描述

如何：

渲染 Laravel Blade 视图后，我想通过单击按钮的 Javascript 函数执行模型函数，但保持在同一页面上。

admin.blade.php（Head 标签中的 Javascript 部分）

/* 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;

  {{ App\Models\Game::inlineSave(gameId, homeScore, awayScore) }}
}

admin.blade.php（视图主体）

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

到目前为止，模型函数仅在页面加载时执行，而不是在我单击按钮时执行。这是我希望解决的主要问题。谢谢你的帮助！

（是的，我相信我需要为存在的每个 gameId 创建相同的 Javascript 函数，以便能够引用正确的 homeScoreTxtBox{{ game->id }} 因为我认为我不能动态拉出文本框基于 Javascript 函数的输入参数的 ID）

标签： javascriptlaravelmodelonclicklaravel-blade

解决方案

我遵循了 Danyal Ishaq 的回答，我想我越来越接近了，但是我从 Ajax 调用中得到了一个错误。

错误：

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
(jquery-3.5.1.js:10099) xhr.send( options.hasContent && options.data || null );

根据 Google 调试器，它似乎在此调用之后/内部：

(jquery-3.5.1.js:9682) transport.send( requestHeaders, done );

我做了一些调试，“状态”变量被设置为 500。然后，“isSuccess”在到达这一行时被设置为 False：

(jquery-3.5.1.js:9723) isSuccess = status >= 200 && status < 300 || status === 304;

设置 isSuccess 的那一行位于以下函数内，但我似乎无法找到调用它的位置以跟踪状态设置的确切位置。

(jquery-3.5.1.js:9696) function done( status, nativeStatusText, responses, headers ) {

在错误出现之前我能找到的最后一行是 5233：

(jquery-3.5.1.js:5233) jQuery.event.dispatch.apply( elem, arguments ) : undefined;

在该行之前不久，它就在这里，其中 event.rnamespace = undefined 和 handleObj.namespace = "" （我不知道这是否相关）：

(jquery-3.5.1.js:5422) if ( !event.rnamespace || handleObj.namespace === false ||

此后不久，“ret”在这一行之后仍然未定义：（同样，我不知道这是做什么的，但它似乎很重要？）

ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
    handleObj.handler ).apply( matched.elem, args );

然后在 5446 上，它返回未定义的 event.result。

return event.result;

这就是我的调试技能在 jQuery 上遇到死胡同的地方。所以现在我请求更多帮助。

刀片中的 Ajax 功能：

$(document).ready(function() {
@foreach($games as $game)
  $("#SaveBtn{{ $game->id }}").on('click', function() {
    var gameId = "{{ $game->id }}";
    var saveBtn = document.getElementById("SaveBtn{{ $game->id }}");
    var homeScoreTxt = document.getElementById("homeScoreTxtBox{{ $game->id }}");
    var homeScore = homeScoreTxt.value;
    var awayScoreTxt = document.getElementById("awayScoreTxtBox{{ $game->id }}");
    var awayScore = awayScoreTxt.value;

    $.ajax({
      url: "{{ route('inlineSave') }}",
      type: "POST",
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      //all the data you need to pass to controller function
      data: {
        'gameId' : {{ $game-> id }},
        'homeScore': homeScore,
        'awayScore' : awayScore
      },
      dataType: "json",
      traditional: true,
      success: function(data) {
        //data returned from php
        // update the values 
        if (data) {
          homeScoreTxt.value = data.homeScore;
          awayScoreTxt.value = data.awayScore;
          saveBtn.innerText = 'Resave';
          alert('Success!');
        }
      },
      error: function() {
        alert('An error has occurred!');
      }
    });
  });
@endforeach
});

Ajax 函数生成的 HTML：

$(document).ready(function() {
  $("#SaveBtn11870").on('click', function() {
    var gameId = "11870";
    var saveBtn = document.getElementById("SaveBtn11870");
    var homeScoreTxt = document.getElementById("homeScoreTxtBox11870");
    var homeScore = homeScoreTxt.value;
    var awayScoreTxt = document.getElementById("awayScoreTxtBox11870");
    var awayScore = awayScoreTxt.value;

    $.ajax({
      url: "http://mbcathletics/admin",
      type: "POST",
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      //all the data you need to pass to controller function
      data: {
        'gameId' : 11870,
        'homeScore': homeScore,
        'awayScore' : awayScore
      },
      dataType: "json",
      traditional: true,
      success: function(data) {
        //data returned from php
        // update the values 
        if (data) {
          homeScoreTxt.value = data.homeScore;
          awayScoreTxt.value = data.awayScore;
          saveBtn.innerText = 'Resave';
          alert('Success!');
        }
      },
      error: function() {
        alert('An error has occurred!');
      }
    });
  });

... many more of the same function for different button IDs ...
});

刀片中的按钮：（成功调用其各自的功能）

<button id="SaveBtn{{ $game->id }}" type="button" class="btn btn-outline-success">Save</button>

web.php中的路由：（记住，我不想离开页面，我只是想让它执行Controller功能......我不知道在第一个参数中放什么 - URL）

Route::post('/admin', [App\Http\Controllers\HomeController::class, 'inlineSave'])->name('inlineSave');

控制器功能：（它现在并没有真正做任何事情，我只是在做繁重的工作之前尝试测试连接性）

public static function inlineSave()
{
  $game = Game::find($gameId);
  $score = $game->home_score;
  $game->home_score = $score;

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

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

谢谢！对于细节我很抱歉，但这是我唯一知道如何提供帮助的。

推荐阅读