PIC My goal is when i press enter the input data will save to the database.
The Controller:
public function sendMessage(Request $request){
$data = Message::create([
'from' => Auth::user()->id,
'to' => $request->receiver_id,
'message' => $request->message,
'is_Read' => 0,
]);
$data->save();
}
The form:
<div class="card-footer">
<form id="message_form">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
</div>
<input type="text" name="message" id="message_input" class="form-control type_msg" placeholder="Type your message...">
</div>
</form>
The ajax code:
$(document).on('keyup', '.input-group input', function (e) {
var message = $(this).val();
var url = '{{ url('message') }}';
// check if enter key is pressed and message is not null also receiver is selected
if (e.keyCode == 13 && message != '' && receiver_id != '') {
$(this).val(''); // while pressed enter text box will be empty
var datastr = "receiver_id=" + receiver_id + "&message=" + message;
$.ajax({
type: "post",
url: '/message', // need to create this post route
data: datastr,
cache: false,
success: function (data) {
console.log(data)
},
error: function (jqXHR, status, err) {
},
complete: function () {
}
})
}
})
The Route:
Route::post('message', [ConsultationController::class, 'sendMessage']);
And than the result the data not in the database, and there is no error notification. How can i solve this? Please Help :)
I try to delete the If statement in the ajax code, and this is happened (500 ... (Internal Server Error))PIC:
POST http://127.0.0.1:8000/message 500 (Internal Server Error)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ consultation?message=adfadf:399
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
Did you added your columns in $fillable property in Message model ?
Your code looks fine, you just need to notes that on every post / put / delete request, laravel require csrf token to validate. You can read more about this security on laravel documentation.
You need to add this on your ajax request.
$.ajax({
type: "post",
url: '/message', // need to create this post route
data: {
receiver_id,
message,
},
headers: { // Add this
'X-CSRF-TOKEN':
$('meta[name="csrf-token"]').attr('content')
},
cache: false,
success: function (data) {
console.log(data)
},
error: function (jqXHR, status, err) {
},
complete: function () {
}
})