I would like to create a comment editor with ajax and bootstrap modal, but it does not work. I tried to solve based on this: CRUD operations . When I click edit button the Bootstrap modal appears, but when I write comment there and click update button, the editor does not edit this. Can anyone help me, please? My code: web.php:
Route::get('/update','CommentsController@edit');
Route::post('/update','CommentsController@update');
CommentsController.php:
public function edit($slug)
{
$comment = Comment::whereSlug($slug)->firstOrFail();
}
public function update(CommentFormRequest $request, $slug)
{
$comment = Comment::whereSlug($slug)->firstOrFail();
$comment->comment = $request->get('comment');
$comment->save();
return redirect('/')->with('status', 'The comment '.$slug.' has been updated!');
}
home.blade.php:
<div class="container col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">
<h2> Comments </h2>
</div>
@if ($comments->isEmpty())
<p> There is no comment.</p>
@else
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Comment</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($comments as $comment)
<tr>
<td>{!! $comment->slug !!} </td>
<td><a href="{!! action('CommentsController@show', $comment->slug) !!}">{!! $comment->comment !!} </a></td>
<td>
<button class="btn btn-warning" data-toggle="modal" data-target="#editModal" onclick="fun_edit('')">Edit</button>
</td>
</tr>
@endforeach
</tbody>
</table>
@endif
</div>
<input type="hidden" name="hidden_view" id="hidden_view" value="">
<!-- Edit Modal start -->
<div class="modal fade" id="editModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<div class="form-group">
<label for="edit_comment">Comment:</label>
<input type="text" class="form-control" id="edit_comment" name="edit_comment">
</div>
<button type="submit" class="btn btn-default">Update</button>
<input type="hidden" id="edit_id" name="edit_id">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Edit code ends -->
And the javascript:
function fun_edit(slug)
{
var view_url = $("#hidden_view").val();
$.ajax({
url: view_url,
type:"GET",
data: {"slug":slug},
success: function(result){
//console.log(result);
$("#edit_id").val(result.slug);
$("#edit_comment").val(result.comment);
}
});
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire