This article will give you example of laravel ajax crud example. you can understand a concept of laravel ajax crud example tutorial. I explained simply about laravel jquery ajax crud example. we will help you to give example of ajax laravel crud with popup modal.
View (Insert Data):
<head>
<title>Ajax Crud</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<br/>
<div class="container card" style="padding:20px">
<h3 style="text-align: center;">Registration Form</h3>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" />
</div><br/>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" id="email" class="form-control" />
</div><br/>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" id="message"></textarea>
</div><br/>
<button class="btn btn-success" id="submit">Submit</button>
</div>
View (Fetch Data):
<div class="container card" style="padding:20px">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
<th>Action</th>
</tr>
</thead>
<tbody id="load-data">
/tbody>
</table>
</div>
Ajax (Fetch and Insert Data):
<script>
$(document).ready(function(){
function load_data(){
$.ajax({
url: "{{route('fetch-ajax')}}",
type: 'POST',
data: { _token: '{{csrf_token()}}'},
success: function(data){
$('#load-data').html(data);
}
}
);
}
load_data();
$('#submit').click(function(){
let name = $('#name').val();
let email = $('#email').val();
let msg = $('#message').val();
$.ajax({
url: "{{route('submit-ajax')}}",
type: 'POST',
data: {name: name, email: email, msg: msg, _token: '{{csrf_token()}}'},
success: function(data){
if(data = 200){
alert('Data Successfully Added !');
load_data();
}
else{
alert('SOmething went wrong !');
load_data();
}
}
});
});
});
</script>
Routes:
Route::post('submit-ajax', [Crudcontroller::class, 'submit_ajax'])->name('submit-ajax');
Route::post('fetch-ajax', [Crudcontroller::class, 'fetch_ajax'])->name('fetch-ajax');
Route::post('edit/ajax-record/{id}', [Crudcontroller::class, 'edit_ajax']);
Route::post('delete/ajax-record/{id}', [Crudcontroller::class, 'delete_ajax']);
Route::get('/edit/ajax-record/{id}', function($id){
return view('pages.edit-ajax', ['id' => $id]);
});
Route::post('update-ajax', [Crudcontroller::class, 'update_ajax'])->name('update-ajax');
Route::post('delete-ajax-record', [Crudcontroller::class, 'delete_ajax'])->name('delete_ajax');
Controller (Insert & Fetch Data):
function submit_ajax(Request $req){
$name = $req->name;
$email = $req->email;
$msg = $req->msg;
$query = DB::table('ajax-crud')->insert([
'name' => $name,
'email' => $email,
'msg' => $msg
]);
if($query){
echo 200;
}
else{
echo 500;
}
}
function fetch_ajax(Request $req){
$data = DB::table('ajax-crud')->get();
foreach($data as $d){
?>
<tr>
<td><?php echo $d->name; ?></td>
<td><?php echo $d->email; ?></td>
<td><?php echo $d->msg; ?></td>
<td>
<a type="button" class="btn btn-success" href="/edit/ajax-record/<?php echo $d->id; ?>">Edit</a>
<a type="button" class="btn btn-danger" href="/delete/ajax-record/<?php echo $d->id; ?>">Delete</a>
</td>
</tr>
<?php
}
}
View (Update Data):
<?php
$data = DB::table('ajax-crud')->where('id', $id)->get();
foreach($data as $d){
$name = $d->name;
$email = $d->email;
$msg = $d->msg;
}
?>
<div class="container card" style="padding:20px">
<h3 style="text-align: center;">Update Details</h3>
<div class="form-group">
<label>Name</label>
<input type="hidden" name="id" value="{{$d->id}}" id="ids">
<input type="text" name="name" id="name" class="form-control" value="{{$name}}" />
</div><br/>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" id="email" value="{{$email}}" class="form-control" />
</div><br/>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" id="message">
{{$msg}}
</textarea>
</div><br/>
<button class="btn btn-success" id="submit">Update</button>
</div>
<script>
$(document).ready(function(){
$('#submit').click(function(){
let name = $('#name').val();
let email = $('#email').val();
let msg = $('#message').val();
let id = $('#ids').val();
$.ajax({
url: "{{route('update-ajax')}}",
type: 'POST',
data: {name: name, id:id, email: email, msg: msg, _token: '{{csrf_token()}}'},
success: function(data){
if(data = 200){
alert('Data Successfully Updated !');
load_data();
}
else{
alert('Something went wrong !');
}
}
});
});
});
</script>