laravel ajax query showing undefined before refreshing - development

laravel ajax query showing undefined before refreshing

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.

<?php  $no=1; ?>
@foreach ($district as $district)
<tr class="post">
    <td></td>
        <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <a href="#" class="show-modal btn btn-info btn-sm" data-id="" data-division_id="" data-code="" data-name="" >
            <i class="fa fa-eye"></i>
        </a>
        <a href="#" class="edit-modal btn btn-warning btn-sm"  data-id="" data-division_id="" data-code="" data-name="" >
            <i class="glyphicon glyphicon-pencil"></i>
        </a>
        <a href="#" class="delete-modal btn btn-danger btn-sm" data-id="" data-division_id="" data-code="" data-name="" >
            <i class="glyphicon glyphicon-trash"></i>
        </a>
    </td>
</tr>
@endforeach

This is my controller.

use IlluminateHttpRequest;
use AppDivision;
use AppDistrict;
use Validator;
use Response;
use IlluminateSupportFacadesInput;
use ApphttpRequests;

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 IlluminateDatabaseEloquentModel;
use AppDivision;

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>

from Laravel Questions and Answers https://laravelquestions.com/laravel/laravel-ajax-query-showing-undefined-before-refreshing/
via Lzo Media