LAVAVEL 8でAjaxでブートボックス警告と確認を統合してください
もともとhttps://codeanddeploy.com訪問し、サンプルコードをダウンロードしてください
このポストでは、私はどのようにLABOVEL 8でAjaxとブートボックスのアラートと確認を統合する方法を共有しています.私たちは、RooavelでjQuery AJAX削除を確認するためにbootboxを使用しています.レコードを削除するときには、削除ボタンの予期しないクリックを防ぐための確認が必要です.
この例では、コントローラ、モデル、ルート、およびブレードを持っています.以下の手順を読み続けてください.
私はこのチュートリアルを助けることを望む.あなたがこのコードをダウンロードしたいならば、親切にdocumentationをここで訪問してください.
ハッピーコーディング
このポストでは、私はどのようにLABOVEL 8でAjaxとブートボックスのアラートと確認を統合する方法を共有しています.私たちは、RooavelでjQuery AJAX削除を確認するためにbootboxを使用しています.レコードを削除するときには、削除ボタンの予期しないクリックを防ぐための確認が必要です.
この例では、コントローラ、モデル、ルート、およびブレードを持っています.以下の手順を読み続けてください.
https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8 経路
Route::resource('posts', PostsController::class);
コントローラ
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
$post->delete();
return response('Post deleted successfully.', 200);
}
モデル
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'title',
'description',
'body'
];
use HasFactory;
}
ブレード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.delete-form').on('submit', function(e) {
e.preventDefault();
var button = $(this);
bootbox.confirm({
title: "Are you sure?",
message: "Your about to delete this post!",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
if(result) {
$.ajax({
type: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: button.data('route'),
data: {
'_method': 'delete'
},
success: function (response, textStatus, xhr) {
bootbox.alert({
message: response,
callback: function () {
window.location='/posts'
}
});
}
});
}
}
});
})
});
</script>
</head>
<body>
<div class="container mt-5">
@if(Session::get('success', false))
<?php $data = Session::get('success'); ?>
@if (is_array($data))
@foreach ($data as $msg)
<div class="alert alert-success" role="alert">
<i class="fa fa-check"></i>
{{ $msg }}
</div>
@endforeach
@else
<div class="alert alert-success" role="alert">
<i class="fa fa-check"></i>
{{ $data }}
</div>
@endif
@endif
<table class="table table-striped" id="users-table">
<thead>
<tr>
<th scope="col"><input type="checkbox" class="check-all"></th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Body</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td><input type="checkbox" class="check"></td>
<td>{{$post->title}}</td>
<td>{{$post->description}}</td>
<td>{{$post->body}}</td>
<td>
<form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
@method('delete')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>
私はこのチュートリアルを助けることを望む.あなたがこのコードをダウンロードしたいならば、親切にdocumentationをここで訪問してください.
ハッピーコーディング
Reference
この問題について(LAVAVEL 8でAjaxでブートボックス警告と確認を統合してください), 我々は、より多くの情報をここで見つけました https://dev.to/codeanddeploy/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8-3bcoテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol