I'm having problems with a modal, when I make a request via ajax to get the contents of my route, modal opens the whole json content, however I can not format this content
My View
@extends('layout.admin.app')
@section('content')
<script>
$(document).ready(function(){
$('.botao').on('click', function(){
valor = $(this).attr('data-id');
//alert(valor);
$.ajax({
url:"/admin/aluno/detalhe/"+valor,
success:function(data){
//alert(data.nome);
$('#myModal .modal-content').html(data.nome);
},
error:function(msg){
console.log(msg);
}
});
});
});
</script>
<hr>
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>Alunos</h1>
</div>
<div class="panel-body">
<div class="row-fluid">
<div class="form-inline">
{!! Form::open(['route' => 'admin.aluno.pesquisar', 'method' => 'GET' ]) !!}
{!! Form::label('nome', 'Nome Completo', ['class' => 'label-control']) !!}
{!! Form::text('nome', null, ['class' => 'form-control']) !!}
{!! Form::label('ra', 'R.A', ['class' => 'label-control']) !!}
{!! Form::text('ra', null, ['class' => 'form-control']) !!}
{!! Form::submit('Pesquisar', ['class' => 'btn btn-default']) !!}
{!! Form::close() !!}
</div>
</div>
<hr>
<table class="table table-striped table-bordered text-center">
<tr>
<th>Id</th>
<th>Nome</th>
<th>R.A</th>
<th>Endereço</th>
<th>Idade</th>
<th>Sala</th>
<th>Ações</th>
</tr>
@forelse($alunos as $aluno)
<tr>
<td>{{ $aluno->id }}</td>
<td>{{ $aluno->nome }}</td>
<td>{{ $aluno->ra }}</td>
<td>{{ $aluno->endereco }}</td>
<td>{{ $aluno->idade($aluno->data_nascimento) }}</td>
<td>{{ $aluno->sala->nome }}</td>
<td>
<a href="{{ route('admin.aluno.editar', $aluno->id) }}" class="btn btn-warning">Editar</a>
<a href="" class="btn btn-danger">Deletar</a>
<a href="{{ route('admin.aluno.detalhe', $aluno->id) }}" data-id="{{ $aluno->id }}" class="botao"data-toggle="modal" data-target="#myModal">vear</a>
</td>
</tr>
@empty
<tr>
<td colspan="7"><p>Não há nenhum aluno cadastrado</p></td>
</tr>
@endforelse
</table>
</div>
<div class="panel-footer">
<a href="{{ route('admin.aluno.adicionar') }}" class="btn btn-success">Novo Aluno</a>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
@endsection
]
My controller
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\Aluno;
use App\Models\Sala;
class AlunoController extends Controller
{
public function index()
{
$alunos = Aluno::all();
return view('admin.aluno.index', compact('alunos'));
}
public function detalhe($id)
{
$aluno = Aluno::find($id);
return response()->json($aluno);
}