I am building an application where users can upload projects. I am implementing a system where users can 'Like/Unlike' other projects. I am trying to use an AJAX call to save likes. Users are able to like projects on the detail page of a project (/projects/{id})
I have a table users, projects and likes. My plan is to save the likes in the likes table obviously so a record looks like this: id, user_id, project_id. In the future I can do a COUNT query and find out how many likes each project has, etc.
Currently nothing happens when I click on the like button I get no errors, nothing happens.
My files: Routes.php
Route::get('/', 'LikeController@index');
Route::post('projects/{id}', 'LikeController@like');
LikeController.php:
public function like()
{
if(Request::ajax()) {
$data = Input::all();
print_r($data);die;
}
}
My view: show.blade.php
{!! Form::open(array('url'=>'projects/'.$project->id.'/like','method'=>'POST', 'id'=>'myform')) !!}
{!! Form::button('Like', array('class'=>'send-btn')) !!}
{!! Form::close() !!}
My AJAX call
<script type="text/javascript">
$(document).ready(function(){
$('.send-btn').click(function(){
$.ajax({
url: 'projects',
type: "post",
data: {'user_id': $('input[name=user_id]').val(), 'project_id': $('input[name=project_id]').val()},
success: function(data){
alert(data);
}
});
});
});
</script>
In your ajax function you have an option url: 'projects'
. This means your ajax call will be sent to the relative projects
path. To fix this, change it to url: '/projects'
.
Also your route includes an id of the project projects/{id}
, so you have to add it to your ajax call option too.
$('.send-btn').click(function(){
$.ajax({
url: $(this).parent().attr('action'),
type: "post",
data: {'user_id': $('input[name=user_id]').val(), 'project_id': $('input[name=project_id]').val()},
success: function(data){
alert(data);
}
});
});
as per your form action you need to change route,
Like this.
Route::post('projects/{id}/like', 'LikeController@like');
Instead of this one
Route::post('projects/{id}', 'LikeController@like');
If you want to send an AJAX request, when you submit the form you should prevent the default event and then make a request, like so:
$('#form-id').on('submit', function(e) {
e.preventDefault(); //stops the form from being submited the normal way.
$.ajax({
url: 'projects',
type: "post",
data: {'user_id': $('input[name=user_id]').val(), 'project_id': $('input[name=project_id]').val()}
})
.done(function(response) {
//handle response on success
})
.fail(function(xhr) {
//handle failed request
});
});
You will also need to change the url to the correct path, the way it is set in your routes.php file.