How should I refresh the users table after adding one user in database? The information goes in UsersController and it's stored in the database , but I don't know how to refresh just the table with ajax after saving the user. I have index page which is included in app.blade (in which I am writing the scripts). In index page I included load.blade which contains the users table . So, here is index.blade :
@if(count($users)>0)
<div class="jumbotron col-md-10">
<div class="users">
@include('crud.load')
<!-- Modal form to add an user -->
<div id="createModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
{{csrf_field()}}
<div class="form-group">
<label class="control-label col-sm-2" for="first_name">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="first_name_add" id="first_name_add" placeholder="Your first name goes here" autofocus>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="last_name">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="last_name_add" id="last_name_add" placeholder="Your last name goes here" autofocus>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2" for="email">E-mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email_add" id="email_add" value="" placeholder="Your e-mail goes here" />
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2" for="phone">Phone Number</label>
<div class="col-sm-10">
<input type="phone" class="form-control" name="phone_add" id="phone_add" placeholder="Your phone number goes here" value="" />
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2" for="birth_date">Birthday</label>
<div class="col-sm-4">
<input type="date" class="form-control" name="birth_date_add" id="birth_date_add"/>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="submit" class="btn btn-success create" id="add" data-dismiss="modal">
Create
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
<div>
<button style="width:70px;height:70px; margin-left:10px;"
class="btn btn-sm btn-default create-modal">
<span style="font-size:33px;">
<i class="fas fa-user-plus"></i>
</span>
</button>
</div>
load.blade.php :
<div id="load" >
<table class="table table-striped" id="usersTable">
<thead>
<tr>
<th scope="col" class="text-center ">First Name</th>
<th scope="col" class="text-center ">Last Name</th>
<th scope="col" class="text-center">E-mail</th>
<th scope="col" class="text-center ">Phone Number</th>
<th scope="col" class="text-center ">Birthday</th>
<th scope="col" class="text-center ">Created/Updated</th>
<th scope="col" class="text-center">Actions</th>
</tr>
</thead>
<tbody >
@foreach($users as $user)
<tr class="text-center item{{$user->id}}">
<td class="col-md-2">{{$user->first_name}}</td>
<td class="col-md-2">{{$user->last_name}}</td>
<td class="col-md-1">{{$user->email}}</td>
<td class="col-md-2">{{$user->phone}}</td>
<td class="col-md-1">{{$user->birth_date}}</td>
<td class="col-md-2">{{$user->created_at->diffForHumans()}}/{{$user->updated_at->diffForHumans()}}</td>
<td class="col-md-2">
<button data-id="{{$user->id}}"
data-first_name="{{$user->first_name}}"
data-last_name="{{$user->last_name}}"
data-email="{{$user->email}}"
data-phone="{{$user->phone}}"
data-birth_date="{{$user->birth_date}}"
class="btn btn-sm btn-default edit-modal">
<i class="fas fa-user-edit"></i>
</button>
<button data-id="{{$user->id}}"
data-first_name="{{$user->first_name}}"
data-last_name="{{$user->last_name}}"
data-email="{{$user->email}}"
data-phone="{{$user->phone}}"
data-birth_date="{{$user->birth_date}}"
class="btn btn-sm btn-default delete-modal">
<i class="fas fa-user-minus"></i>
</button>
{{-- <a href="{{ route('crud-delete', $user->id) }}" value="{{$user->id}}" class="btn btn-sm btn-default"><i class="fas fa-user-minus"></i></a> --}}
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
and the script for add user modal :
//modal Create User
$(document).on('click','.create-modal', function(){
$('.modal-title').text('Add User');
$('#createModal').modal('show');
$('.form-horizontal').show();
});
$('#add').click(function(){
$.ajax({
type : 'POST',
url : 'crud',
data : {
'_token': $('input[name=_token]').val(),
'first_name': $('input[name=first_name_add]').val(),
'last_name': $('input[name=last_name_add]').val(),
'email': $('input[name=email_add]').val(),
'phone': $('input[name=phone_add]').val(),
'birth_date': $('input[name=birth_date_add]').val(),
}
});
$('#first_name_add').val('');
$('#last_name_add').val('');
$('#email_add').val('');
$('#phone_add').val('');
$('#birth_date_add').val('');
});
Also , here are the routes :
Route::get('/', function () {
return view('welcome');
});
Route::get('/crud',function(){
return view('crud/index');
});
Route::resource('crud','UserController');
Route::post('/crud','UserController@store');
And The Controller :
public function index(Request $request)
{
$users=User::orderBy('created_at','desc')->paginate(6);
// if($request->ajax()){
// return view('crud/load',['users'=>$users])->render();
// }
return view('crud/index', compact('users'));
}
public function store(Request $request)
{
$rules = array(
'first_name'=>'required',
'last_name'=>'required',
'email'=>'required',
'phone'=>'required',
'birth_date'=>'required',
);
$validator = Validator::make (input::all(), $rules);
if($validator->fails()){
return response::json(array('errors'=>$validator->getMessageBag()->toarray()));
}
else {
$user = new User;
$user->first_name = $request->first_name;
$user->last_name = $request->last_name;
$user->email = $request->email;
$user->phone = $request->phone;
$user->birth_date = $request->birth_date;
$user->save();
return response()->json($user);
}
}
