CODEWITHSUNDEEP
phphtmllaravel
LaravelNewbie
LaravelNewbie

Reputation: 29

Link to a specific part of a page

I have a div that has lots of posts which is created dynamically from the database. The div has input for comment facility as well. I have no problems in posting the comments and I do it using a POST method. Then I redirect to the page using return redirect('/'); method. But it links to the beginning to the page which doesn't create a good impression on the user. The user might be in the middle of the page and when he/she comments he will go to the beginning of the page and will have to scroll down again. Luckily, I have the divs with class equal to the post_id. So, isn't there any method to go to the post in which the user posted using that class?

Upvotes: 1

Views: 342

Answers (2)

Empty Brain
Empty Brain

Reputation: 627

attach the id with the url like /#post-id

Upvotes: 1

Saurabh
Saurabh

Reputation: 2775

Inside your contorller where you are processing and saving the comments:

use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\URL;

public function yourCommentSaveFunction()
{
   ...
   //Get the Post ID and store in $postid
   return Redirect::to(URL::previous() . '#' .$postid);

}

This should work fine. But the best way would be to use AJAX to post comments.

Edit (As request by OP)

THE AJAX METHOD

Controller will be something like:

public function saveComment(Request $request)
{
    //you do the saving part..
    ...
    $comment = $request->comment; 
    //after saving the comment return a json response

    //you can also send other varibales like username, created at etc..
   return Response::json(array(
            'success' => true,
            'comment' => $comment,
        ));
}

Route:

Route::post('/save-comment', [
    'as' => 'save-comment',
    'uses' => 'yourController@saveComment',
]);

And your View:

<form action="{{ route('save-comment') }}" class="comment-form">
    <input type="text" name="comment">
    <input type="submit" name="submit">
    <input type="hidden" name="_token" value="{{ csrf_token() }}"
    <div class="comment"></div>
</form>
<script>
$('.comment-form').submit(function(event){
    event.preventDefault();
    var comment = $this.val();
    var token = $('.token').val();
    var $url = "{{ route('save-comment') }}";
    $.ajax({
        url: route,
        type: 'POST',
        data: {_token: token, comment: comment},
        dataType: 'JSON',
        success: function (data) {
            $(".comment").append('<div class="new-comment">' +data.comment +'</div>');
        },
        error: function(data) {
           console.log("Something went wrong");
        }
    });
});
</script>

Please note: this is just a sample code.

Upvotes: 0

Related Questions