laravel ajax query showing undefined before refreshing - ajax

Question

These are my databases, where a division can have many districts (division_id is the foreign key in districts table).
When I submit the modal (using Ajax with laravel) the division name comes as undefined.
However, after I refresh the browser, everything seems to be working okay. Why is this happening and how do I fix it?
This is the code I am using to show the data.
{{ csrf_field() }}
<?php $no=1; ?>
#foreach ($district as $district)
<tr class="post{{$district->id}}">
<td>{{ $no++ }}</td>
<td>{{ $district->division->name}}</td>
<td>{{ $district->code}}</td>
<td>{{ $district->name}}</td>
<td>{{ $district->created_at}}</td>
<td>
<a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$district->id}}" data-division_id="{{$district->division->name}}" data-code="{{$district->code}}" data-name="{{$district->name}}" >
<i class="fa fa-eye"></i>
</a>
<a href="#" class="edit-modal btn btn-warning btn-sm" data-id="{{$district->id}}" data-division_id="{{$district->division->name}}" data-code="{{$district->code}}" data-name="{{$district->name}}" >
<i class="glyphicon glyphicon-pencil"></i>
</a>
<a href="#" class="delete-modal btn btn-danger btn-sm" data-id="{{$district->id}}" data-division_id="{{$district->division->name}}" data-code="{{$district->code}}" data-name="{{$district->name}}" >
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
#endforeach
This is my controller.
use Illuminate\Http\Request;
use App\Division;
use App\District;
use Validator;
use Response;
use Illuminate\Support\Facades\Input;
use App\http\Requests;
class DistrictController extends Controller
{
public function index()
{ $district = District::all();
$divisionDistricts = Division::pluck('name','id');
return view('masterForms.district',compact('district','divisionDistricts'));
}
public function store(Request $request)
{
if($request->ajax())
{
$district = District::create($request->all());
$district->save();
return response($district);
}
}
This is my District Model.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Division;
class District extends Model
{
protected $fillable = ['code','name','division_id'];
public function division()
{
return $this->belongsTo(Division::class);
}
}
?>
And this is the javaquery I am using to add my data to the database.
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
}
});
$(document).on('click','.create-modal', function() {
$('#create').modal('show');
$('.form-horizontal').show();
$('.modal-title').text('Add District');
});
$('#ddistrict').on('submit',function(e){
e.preventDefault();
var data = $(this).serialize();
var url = $(this).attr('action');
var post = $(this).attr('method');
$.ajax({
type: post,
url: url,
data: data,
dataTy: 'json',
success:function(data)
{
$('.error').remove();
$('#table').append("<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.division_id.name + "</td>"+
"<td>" + data.code + "</td>"+
"<td>" + data.name + "</td>"+
"<td>" + data.created_at + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-division_id.name='" +
data.division_id.name + "' data-code='" +
data.code + "' data-name='" +
data.name + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id +"' data-division_id.name='" +
data.division_id.name + "' data-code='" +
data.code + "' data-name='" +
data.name + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-division_id.name='" +
data.division_id.name + "' data-code='" +
data.code + "' data-name='" +
data.name + "' ><span class='glyphicon glyphicon-trash'></span></button></td>"+
"</tr>");
}
});
})
</script>

Answer 1

Just returning $disrtict will just give you division_id not division name. And you can't use data.division_id.name in your javascript.
To return division you must append division name with your other attributes of districts. Or you might use Api Resources to provide your custom json response.
To append division name attribute in you district you should use $appends variable.
class District extends Model
{
protected $appends = ['division_name'];
protected $fillable = ['code','name','division_id'];
public function division()
{
return $this->belongsTo(Division::class);
}
public function getDivisionNameAttribute(){
return $this->division->name;
}
}
Now in your ajax resopnse use
success:function(data)
{
$('.error').remove();
$('#table').append("<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.division_name + "</td>"+
"<td>" + data.code + "</td>"+
"<td>" + data.name + "</td>"+
"<td>" + data.created_at + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='"+ data.id + "' data-division_id='" +
data.division_name + "' data-code='" +
data.code + "' data-name='" +
data.name + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id +"' data-division_id.name='" +
data.division_name + "' data-code='" +
data.code + "' data-name='" +
data.name + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-division_name='" +
data.division_name + "' data-code='" +
data.code + "' data-name='" +
data.name + "' ><span class='glyphicon glyphicon-trash'></span></button></td>"+
"</tr>");
}