Passing data attribute value into blade route - php

Question

I'm building a blog to learn Laravel (5.4.13). In my posts show view I'm looping through all the corresponding post comments. Beside each comment is an edit button and a delete button. For comment editing, I'm attempting to use a modal instead of redirecting to the typical edit view. Currently I'm storing the specific comment data within two data-attributes, and then retrieving those values using jQuery. Then I'm using jQuery again to pass the data into the modal. This is working fine except I'm not sure how to pass the $comment->id into the form route. Any help is much appreciated.
#extends('main')
#section('title', 'View Post')
#section('content')
<div class="row">
<div class="col-md-8">
<h1>{{$post->title}}</h1>
<small>Published: <i class="fa fa-clock-o"></i> {{ $post->created_at->format('M Y, h:i a') }}</small>
<hr class="light-hr">
<p class="lead">{{ str_limit($post->body, $limit = 200, $end = '...') }}</p>
<hr>
<div class="tags">
#foreach($post->tags as $tag)
<span class="label">
{{ $tag->name }}
</span>
#endforeach
</div>
<br>
<br>
{{-- Display comments associated with posts --}}
<h4>Related Posts <i class="fa fa-level-down"></i></h4>
#foreach($post->comments as $comment)
<?php $avatars = array('monsterid', 'identicon', 'wavatar', 'retro'); ?>
<?php $randAvatars = urlencode($avatars[array_rand($avatars)]); ?>
<div class="comments">
<div class="author-info">
<div class="author-img">
<img src={{"https://www.gravatar.com/avatar/".md5(strtolower(trim($comment->email)))."?s=55&d=".$randAvatars}} class="img-circle" alt="user profile image">
</div>
<div class="author-meta">
<b>{{$comment->name}}</b>
made a post.
<h6>Published: <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('M Y, h:i a') }}</h6>
</div>
<div class="comment-controls pull-right">
<button
type="button"
class="btn btn-primary btn-sm fa fa-pencil edit-comment"
data-toggle="modal"
data-comment="{{$comment->comment}}"
data-comment-id="{{$comment->id}}"
data-target="#editComment">
</button>
<button type="button" class="btn btn-danger btn-sm fa fa-trash"></button>
</div>
</div>
<div class="author-comment">
<hr>
<p>{{$comment->comment}}</p>
</div>
</div>
#endforeach
</div>
<div class="col-md-4">
<div class="well">
<dl class="dl-horizontal">
<dt>Created:&nbsp</dt>
<dd> {{ $post->created_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->created_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Last Updated:&nbsp</dt>
<dd>{{ $post->updated_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->updated_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Post Slug:&nbsp</dt>
<dd>{{ url('blog/'.$post->slug) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Category:&nbsp</dt>
<dd>{{ $post->category->name }}</a></dd>
</dl>
<hr>
<div class="row">
<div class="col-sm-6">
Edit
</div>
<div class="col-sm-6">
<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
<input type="submit" value="Delete" class="btn btn-danger btn-block">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('DELETE') }}
</form>
</div>
<div class="col-sm-12">
Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editComment" tabindex="-1" role="dialog" aria-labelledby="editCommentLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
</div>
<div class="modal-body">
<form action="{{route('comments.update', $comment->id)}}" method="POST">
<div class="modal-body">
<div class="form-group">
<textarea name="comment" class="form-control current-comment"></textarea>
<span class="test"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('PUT') }}
</div>
</form>
</div>
</div>
</div>
</div>
#section('scripts')
<script>
$('.edit-comment').on('mousedown', function(){
var comment = $(this).attr('data-comment');
var comment_id = $(this).attr('data-comment-id');
$('.current-comment').html(comment);
$('.test').html(comment_id);
});
</script>
#endsection
#endsection
// Comments Routes
Route::post('comments/{id}', ['uses' => 'CommentsController#store', 'as' => 'comments.store']);
Route::put('comments/{id}', ['uses' => 'CommentsController#update', 'as' => 'comments.update']);

Answer 1

You're almost there. I would suggest that you don't need to pass the {id} since you use the [PUT] method to pass the data in your {form}.
We can set a new hidden {input} type inside your {form} (e.g input[name="edit_comment_id"]) and remove the request parameter from the url in your form's {action} attribute.
Like this:
<form action="{{route('comments.update')}}" method="POST" id="update-comment">
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="edit_comment_id" /> //place the {id} in here
<textarea name="comment" class="form-control current-comment"></textarea>
<span class="test"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('PUT') }}
</div>
</form>
Then in your {scripts} section:
$('.edit-comment').on('mousedown', function(){
var comment = $(this).attr('data-comment');
var comment_id = $(this).attr('data-comment-id'); // (e.g 12)
var oFormUpdateComment = $('#update-comment'); //add an {id} attribute on your form name 'update-comment' as given above.
oFormUpdateComment.find('input[name="edit_comment_id"]').val(comment_id);
});
And since we didn't pass a request parameter next to the 'comments' url anymore, You will update your [routes.php] like this:
Route::post('comments', ['uses' => 'CommentsController#store', 'as' => 'comments.store']);
Route::put('comments', ['uses' => 'CommentsController#update', 'as' => 'comments.update']);
Then in your [CommentsController], Since you already know how to get those values:
use Illuminate\Support\Facades\Input;
class CommentsController extends Controller
{
protected function store()
{
print_r('<pre>');
var_dump(Input::get('edit_comment_id'));
}
protected function update()
{
print_r('<pre>');
var_dump(Input::all());
}
}
Hope this helps for your case.

Answer 2

I was reluctant to answer this myself but was able to get it to work after rethinking my approach. Instead of trying to alter the blade url in the form somehow, I left the action attribute blank and built the url dynamically when the event fired. So as I did before, I grabbed the data from the data attributes, but instead of trying to alter the blade tag in the form, the url is built and then added to the action attribute. This thread was a great help. I posted my updated code incase it helps anyone.
#extends('main')
#section('title', 'View Post')
#section('content')
<div class="row">
<div class="col-md-8">
<h1>{{$post->title}}</h1>
<small>Published: <i class="fa fa-clock-o"></i> {{ $post->created_at->format('M Y, h:i a') }}</small>
<hr class="light-hr">
<p class="lead">{{ str_limit($post->body, $limit = 200, $end = '...') }}</p>
<hr>
<div class="tags">
#foreach($post->tags as $tag)
<span class="label">
{{ $tag->name }}
</span>
#endforeach
</div>
<br>
<br>
{{-- Display comments associated with posts --}}
<h4>Related Posts <i class="fa fa-level-down"></i></h4>
#foreach($post->comments as $comment)
<?php $avatars = array('monsterid', 'identicon', 'wavatar', 'retro'); ?>
<?php $randAvatars = urlencode($avatars[array_rand($avatars)]); ?>
<div class="comments">
<div class="author-info">
<div class="author-img">
<img src={{"https://www.gravatar.com/avatar/".md5(strtolower(trim($comment->email)))."?s=55&d=".$randAvatars}} class="img-circle" alt="user profile image">
</div>
<div class="author-meta">
<b>{{$comment->name}}</b>
made a post.
<h6>Published: <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('M Y, h:i a') }}</h6>
</div>
<div class="comment-controls pull-right">
{{-- Store comment specific data to built URL for modal --}}
<button
type="button"
class="btn btn-primary btn-sm fa fa-pencil edit-comment"
data-toggle="modal"
data-comment="{{$comment->comment}}"
data-comment-id="{{$comment->id}}"
data-target="#editComment">
</button>
<button type="button" class="btn btn-danger btn-sm fa fa-trash" ></button>
</div>
</div>
<div class="author-comment">
<hr>
<p>{{$comment->comment}}</p>
</div>
</div>
#endforeach
</div>
<div class="col-md-4">
<div class="well">
<dl class="dl-horizontal">
<dt>Created:&nbsp</dt>
<dd> {{ $post->created_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->created_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Last Updated:&nbsp</dt>
<dd>{{ $post->updated_at->format('M jS, Y') }}</dd>
<dd><i class="fa fa-clock-o"></i> {{ $post->updated_at->format('h:i:s a') }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Post Slug:&nbsp</dt>
<dd>{{ url('blog/'.$post->slug) }}</dd>
</dl>
<dl class="dl-horizontal">
<dt>Category:&nbsp</dt>
<dd>{{ $post->category->name }}</a></dd>
</dl>
<hr>
<div class="row">
<div class="col-sm-6">
Edit
</div>
<div class="col-sm-6">
<form action="{{ route('posts.destroy', $post->id) }}" method="POST">
<input type="submit" value="Delete" class="btn btn-danger btn-block">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('DELETE') }}
</form>
</div>
<div class="col-sm-12">
Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editComment" tabindex="-1" role="dialog" aria-labelledby="editCommentLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
</div>
<div class="modal-body">
<form id="comment-edit-modal" action="" method="POST">
<div class="modal-body">
<div class="form-group">
<textarea name="comment" class="form-control current-comment"></textarea>
<span class="test"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="hidden" name="_token" value="{{ Session::token() }}">
{{ method_field('PUT') }}
</div>
</form>
</div>
</div>
</div>
</div>
#section('scripts')
<script>
$('.edit-comment').on('mousedown', function(){
var comment = $(this).attr('data-comment');
$('.current-comment').html(comment);
var comment_id = $(this).attr('data-comment-id');
var form = $('#comment-edit-modal')
// Set current URL
var comment_edit_URL = {!! json_encode(url('/comments')) !!} + '/' + comment_id;
// Append currrent URL
form.attr('action', comment_edit_URL);
});
</script>
#endsection
#endsection