如何解决从 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)
解决方法
1.在那个刀片文件上做一个ajax函数
2.调用ajax on click
传递id和更新数据
3.在web.php
和
4.在该路由上创建一个控制器函数。
代码:
$(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');
通过简单的模型查询更新控制器函数中的值。 像这样发送更新的数据:
$response = [
'homeScore' => $homeScore,'awayScore' => $awayScore
];
return response()->json($response);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。