ajax-запрос laravel, показывающий undefined перед обновлением

Question

Это мои базы данных, где в подразделении может быть много округов (Division_id - это внешний ключ в таблице округов).

Когда я отправляю модальное сообщение (использование Ajax с laravel) имя подразделения не определено.

Однако после обновления браузера все работает нормально.Почему это происходит и как мне это исправить?

Это код, который я использую для отображения данных.

{{ 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

Это мойконтроллер.

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);
        }
     }

Это моя модель района.

<?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);
    }
}

?>

И это javaquery, который я использую для добавления своих данных в базу данных.

<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

Просто возвращая $ disrtict, вы получите дивизион_иде, а не название дивизии.И вы не можете использовать data.division_id.name в своем javascript.

Чтобы вернуть разделение, вы должны добавить имя подразделения вместе с другими вашими атрибутами районов.Или вы можете использовать Api Resources для предоставления своего пользовательского ответа json.

Чтобы добавить атрибут названия подразделения в вашем районе, вы должны использовать переменную $ appends.

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;
    }
}

Теперь при использовании ajax resopnse

     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>");
      }