Send Ajax data to Laravel controller - php

Question

I am using fullcalendar, I need need to create a new event when user clicks on a specific date, I am using Laravel controller to store the data send by ajax request. I can create an event on calendar, but I cant send the data to controller and moreover browser tab freezes after creating the event. Anyone can correct where I am wrong? or provide better solution to the problem.
select: function(start, end, allDay) {
var title = event_name;// Event Title:
var eventData;
if (title) {
eventData = { //creates a new event on the calendar
title: title,
start: start,
end: end,
allDay: allDay
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$.ajax({
data:eventData,
type: 'POST',
url:"/projects/calendar/store", // your url
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
},
success: function(response) {
console.log(response);
}
});
}
$('#calendar').fullCalendar('unselect');
},
This is my Route file, I have tried both get and post but none is working.
Route::get('/projects/calendar/store','FrontEndController#calendarStore');
This is the Controller, it will only process data sent by ajax request but no view.
public function calendarStore(Request $request)
{
$calendar = new Calendar;
Input::all();
$userId = Auth::user()->id;
$event_title =$request->input('title');
$start =$request->input('start');
$end =$request->input('end');
$calendar_event = Calendar::create([
'user_id' => $userId, // I can get the user ID
'project_id' => 2,
'event_title' => $event_title,
'start_date' =>$start,
'end_date' => $end
]);
}

Answer 1

replace your declaration of your ajax data parameter like this:
//creates a new event on the calendar
eventData = {
"title": title,
"start": start,
"end": end,
"allDay": allDay
};

Answer 2

I did the following modifications: and its working as Expected, once user click/selects on the specific day/day's it will ask for title and and save the event in database.
select: function(start, end, allDay) {
var title = prompt('Are u sure you want to apply for job? Yes/No:');// Event Title:
var start_time = moment(start).format();
var end_time = moment(end).format(); //onclick get date
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end,
allDay: allDay
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$.ajax({
type: 'GET',//POST changed to GET
url: "/projects/calendar/store", // your url
data: { //event data from global variable
title: event_name,
start: start_time,
end: end_time,
event_id:event_id
},
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
},
success: function(response) {
console.log(response);
}
});
}
$('#calendar').fullCalendar('unselect');
},
Updated Route
Route::get('/projects/calendar/store','FrontEndController#calendarStore');
Updated Controller
public function calendarStore(Request $request)
{
$userId = Auth::user()->id;
$event_title =$request->get('title');
$start =$request->input('start');
$end =$request->input('end');
$project_id= $request->input('event_id');
$calendar_event = Calendar::create([
'user_id' => $userId,
'project_id' => $project_id,
'event_title' => $event_title,
'start_date' =>$start,
'end_date' => $end
]);
return $calendar->all();
}