Sunday, March 12, 2017

Passing data attribute value into blade route

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><a href=""></h1></a>
            <small>Published: <i class="fa fa-clock-o"></i> </small>
            <hr class="light-hr">
            <p class="lead"></p>  
            <hr>

            <div class="tags">
                @foreach($post->tags as $tag)
                    <span class="label">
                        <a href="" class="btn btn-sm btn-primary"></a>
                    </span>
                @endforeach
            </div>
            <br>
            <br>
            
            <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/ class="img-circle" alt="user profile image">
                        </div>
                        <div class="author-meta">
                            <a href="#"><b></b></a>
                            made a post.
                            <h6>Published: <i class="fa fa-clock-o"></i> </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="" 
                                data-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></p> 
                    </div>
                </div>
            @endforeach
        </div>
        <div class="col-md-4">
            <div class="well">
                <dl class="dl-horizontal">
                    <dt>Created:&nbsp</dt>
                    <dd> </dd>
                    <dd><i class="fa fa-clock-o"></i> </dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Last Updated:&nbsp</dt>
                    <dd></dd>
                    <dd><i class="fa fa-clock-o"></i> </dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Post Slug:&nbsp</dt>
                    <dd><a href=""></a></dd>
                </dl>
                <dl class="dl-horizontal">
                    <dt>Category:&nbsp</dt>
                    <dd></a></dd>
                </dl>
                <hr>
                <div class="row">
                    <div class="col-sm-6">
                        <a href="" class="btn btn-primary btn-block">Edit</a>
                    </div>
                    <div class="col-sm-6">
                        <form action="" method="POST">
                            <input type="submit" value="Delete" class="btn btn-danger btn-block">
                            <input type="hidden" name="_token" value="">
                            
                        </form>
                    </div>
                    <div class="col-sm-12">
                        <a href="" class="btn btn-default btn-block">Back to <i class="fa fa-long-arrow-right" aria-hidden="true"></i> Posts</a>
                    </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">&times;</span></button>
            <h4 class="modal-title" id="editCommentLabel">Edit Comment</h4>
          </div>
          <div class="modal-body">

            <form 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="">
                    
                </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']);



via halfacreyum

Advertisement