A non-numeric value encountered ajax laravel - php

Question

My form is like this
I'm working on a project and I would like to know which is the best way to showing the data after having to insert a record on the database having a complex structure HTML between using the structure in Laravel or jQuery.
I'm building a system of jobs. When the user writes the post and publishes it a call ajax triggers the function Laravel and it inserts the information on the database. until here all OK, but then I have to display the message insert on the wall of the user, so did not work.
<form id="job-store" method="post">
<input type="hidden" value="{{ route('job.store') }}" name="url" />
#csrf
<div class="row">
<div class="col-md-6 mb-3">
<label for="employment_type">نوع استخدام</label>
<select class="form-control selectpicker" title="چیزی انتخاب نشده است" id="employment_type" name="employment_type">
<option value="حق التدریس">حق التدریس</option>
<option value="رسمی">رسمی</option>
<option value="پیمانی">پیمانی</option>
<option value="قراردادی">قراردادی</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label for="job_type">عنوان شغلی</label>
<select class="form-control selectpicker" title="چیزی انتخاب نشده است" id="job_type" name="job_type">
<option value="مربی درون سازمانی">مربی درون سازمانی</option>
<option value="مربی حق التدریس">مربی حق التدریس</option>
<option value="صنعتکار">صنعتکار</option>
<option value="مدرس دانشگاه">مدرس دانشگاه</option>
<option value="استادکار مهارتی">استادکار مهارتی</option>
<option value="سایر">سایر</option>
</select>
</div>
<div class="col-md-6 mb-3">
<label for="history">سابقه (سال)</label>
<input type="text" class="form-control" id="history" name="history">
</div>
<div class="col-md-6 mb-3">
<label for="post_title">عنوان پست</label>
<input type="text" class="form-control" id="post_title" name="post_title">
</div>
<div class="col-md-6 mb-3">
<label for="state">استان محل خدمت</label>
<input type="text" class="form-control" id="state" name="state">
</div>
<div class="col-md-6 mb-3">
<label for="city">شهر محل خدمت</label>
<input type="text" class="form-control" id="city" name="city">
</div>
<div class="col-md-6 mb-3">
<label for="start_date">تاریخ شروع به كار</label>
<date-picker type="date" id="start_date" name="start_date"></date-picker>
</div>
<div class="col-md-6 mb-3">
<label for="end_date">تاریخ خاتمه كار</label>
<date-picker type="date" id="end_date" name="end_date"></date-picker>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<button type="submit" class="btn btn-success job-store"><i class="fas fa-plus fa-xs"></i> افزودن</button>
</div>
</div>
</form>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>ردیف</th>
<th>نوع استخدام</th>
<th>تاریخ شروع کار</th>
<th>تاریخ خاتمه کار</th>
<th>استان محل خدمت</th>
<th>شهر محل خدمت</th>
<th>اکشن</th>
</tr>
</thead>
<tbody id="showJobs">
</tbody>
</table>
</div>
#section('script')
<script>
$(document).ready(function (e) {
$('.job-store').on('click',(function(e) {
e.preventDefault();
var formData = new FormData($('#job-store')[0]);
let url = $('#job-store :input')[0].getAttribute('value');
$.ajax({
type:'POST',
url,
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
showJobs(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}));
function showJobs(data) {
let html = '';
$.each(data, function (key, val) {
$('#data').append("<tr>"+
"<td>"+val.id+"</td>"+
"<td>"+val.employment_type+"</td>"+
"<td>"+val.start_date+"</td>"+
"<td>"+val.end_date+"</td>"+
"<td>"+val.state+"</td>"+
"<td>"+val.city+"</td>"+
"<td>"+
'<form action="{{ route('job.destroy',+'val.id') }}" method="post">'+
'#csrf'+
'#method('DELETE')'+
'<div class="btn-group">'+
'Edit'+
'<button type="submit" class="btn btn-danger btn-sm">Delete</button>'+
'</div>'+
'</form>'+
"</td>"+
"</tr>"
)});
$('#showJobs').append(html);
}
});
</script>
#endsection
Controller
<?php
namespace App\Http\Controllers;
use App\Http\Requests\JobRequest;
use App\Job;
use Illuminate\Http\Request;
class JobController extends Controller
{
public function store(Request $request)
{
Job::create([
'user_id' => auth()->id(),
'employment_type' => $request->employment_type,
'job_type' => $request->job_type,
'post_title' => $request->post_title,
'history' => $request->history,
'state' => $request->state,
'city' => $request->city,
'start_date' => $request->start_date,
'end_date' => $request->end_date,
]);
return redirect()->back();
}
public function edit(Job $job)
{
return view('Home.edits.job', compact('job'));
}
public function update(Request $request, Job $job)
{
$data = [
'employment_type' => $request->employment_type,
'job_type' => $request->job_type,
'post_title' => $request->post_title,
'history' => $request->history,
'state' => $request->state,
'city' => $request->city,
'start_date' => $request->start_date,
'end_date' => $request->end_date,
];
$job->update($data);
return redirect()->route('home');
}
public function destroy(Job $job)
{
$job->delete();
return redirect()->back();
}
}
It is my console
I get this error

Answer 1

Instead of appending in javascript better create view for that file and return view from controller
First controller must return view or json but it returning redirect back.
public function store(Request $request)
{
Job::create([
'user_id' => auth()->id(),
'employment_type' => $request->employment_type,
'job_type' => $request->job_type,
'post_title' => $request->post_title,
'history' => $request->history,
'state' => $request->state,
'city' => $request->city,
'start_date' => $request->start_date,
'end_date' => $request->end_date,
]);
$jobs= Job::get();
return view('jobdetail',compact('jobs'));
}
and jobdetail blade
#foreach($jobsas $key=>$value)
<tr>
<td>{{$value->id}}</td>
<td>{{$value->employment_type}}</td>
<td>{{$value->start_date}}</td>
<td>{{$value->end_date}}</td>
<td>{{$value->state}}</td>
<td>{{$value->city}}</td>
<td>
<form action={{ route('job.destroy',$value->id) }} method=post>
#csrf
#method('DELETE')
<div class=btn-group>
<a href={{ route('job.edit',$value->id) }} class=btn btn-info btn-sm>Edit</a>
<button type=submit class=btn btn-danger btn-sm>Delete</button>
</div>
</form>
</td>
</tr>
#endforeach
and in JavaScript
$.ajax({
type:'POST',
url,
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
$('#showJobs').html(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
Also if you want to append last created job detail then
public function store(Request $request)
{
$job=Job::create([
'user_id' => auth()->id(),
'employment_type' => $request->employment_type,
'job_type' => $request->job_type,
'post_title' => $request->post_title,
'history' => $request->history,
'state' => $request->state,
'city' => $request->city,
'start_date' => $request->start_date,
'end_date' => $request->end_date,
]);
return view('jobdetail',compact('job'));
}
then in view jobdetail
<tr>
<td>{{$job->id}}</td>
<td>{{$job->employment_type}}</td>
<td>{{$job->start_date}}</td>
<td>{{$job->end_date}}</td>
<td>{{$job->state}}</td>
<td>{{$job->city}}</td>
<td>
<form action={{ route('job.destroy',$job->id) }} method=post>
#csrf
#method('DELETE')
<div class=btn-group>
<a href={{ route('job.edit',$job->id) }} class=btn btn-info btn-sm>Edit</a>
<button type=submit class=btn btn-danger btn-sm>Delete</button>
</div>
</form>
</td>
</tr>
and in JavaScript
$.ajax({
type:'POST',
url,
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
$('#showJobs').append(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});