samedi 28 janvier 2017

AJAX CRUD doesn't edit comments in Laravel 5.3

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">&times;</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