How to call a route & send data with javascript

Question

I'm working with Laravel 5 and I've the following code

HTML

<div id="row">
  <textarea class="form-control" rows="3" id="comment" placeholder="Update your Post"></textarea>
</div>

<a href="#" id="btn-post" dusk="postButton" class="btn btn-primary" role="button" data-toggle="modal" data-target="#addPost">
  <span class="ion-plus-circled"> Post</span>
</a>

JS

$(document).ready(function(){

$("#btn-post").click(function(){
    $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    var comment = $('textarea#comment').val();
    var postData = {
        post_content: comment.val();
        groupId: window.location.href.split("/")[4] // hack to get group id
    }

    console.log(postData);

    $.ajax({
        type: "POST",
        url: "/post",
        data: JSON.stringify(postData),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data, status){
        $("#addPost").modal('toggle');
            //window.location.href = data.redirectTo;                  
        }
    });
  });
});

web.php

Route::post('post', 'GroupController@post');

GroupController.php

public function post(Request $request){
    $post_content = $request->input('post_content');
    $userId = Auth::user()->id;
    $groupId = $request->input('groupId');

    $post = PostGroup::firstOrNew(['group_id' => $groupId, 'post_content' => $post_content]);
    $post->user_id = $userId;

    $post->save();

    $redirectPath = '/groups/' . $groupId;
    return response()->json(['message' => 'Your post have been published! Take a look at',
        'redirectTo' => $redirectPath]);
}

What I want to do is to call the javascript function btn-post at the click of the link-button Post. This function takes the content of the textarea (which I don't know if I wrote correctly) and sends it to the GroupController using the same javascript function, to the route "/post", calling the function post (as defined in web.php), but for some reason it doesn't work, and I don't know where I was wrong (I think the problem is in the javascript function, as if it weren't called).

I'm working with Sublime Text 3 and I don't have an output console where I can read errors. Anyway, everything starts from the javascript file, it's as if I had not imported it correctly, the Javascript has no effect. — Zoythrus
– Zoythrus, Commented Apr 21, 2018 at 23:49
When you go to the page with the form and open developer tools (Ctrl + Shift + I on Chrome). What does it say? — DevK
– DevK, Commented Apr 21, 2018 at 23:50

DevK · Accepted Answer · 2018-04-21 23:52:54Z

2

You have a syntax and a logic error in your Javascript here:

var comment = $('textarea#comment').val();
var postData = {
    post_content: comment.val(); 
    groupId: window.location.href.split("/")[4] // hack to get group id
}

Logic error: you assign textarea value to the var comment. Then 2 lines after that, you call comment.val() on it, although it's a string at this point. No need to call .val() again.

Syntax error: you shouldn't use ; within the postData JSON definition. You separate JSON fields with a comma.

This is the fix for the above 2 problems:

var postData = {
    post_content: comment, // <----
    groupId: window.location.href.split("/")[4] // hack to get group id
}

I suggest you start using developer tools to debug your Javascript

answered Apr 21, 2018 at 23:52

DevK

10k2 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zoythrus Over a year ago

Problem solved, thank you so much! Anyway I'm a beginner and I don't know how to use a framework php as Laravel, I'm learning now and I make some mistakes. Could you suggest me some of these developer tools? Thank you in advance

DevK Over a year ago

They're implemented in every major browser, no external tools needed. You can open them pressing Crtl + Shift + I in Chrome or Firefox. Then go to the console tab and you will see your Javascript errors (and console output) there.

Collectives™ on Stack Overflow

How to call a route & send data with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related