Fórum Academy - Passar valores para Modal

Criador Leonardo Almeida da Silveira 29/11/2017

Carlos, numa situação em que meu edit, seja um modal, eu estou chamando o modal por um botao Editar da tabela (href="{{route('capelas.edit',$capela->id)}}"), passando pela controller edit para buscar os dados de determinado id. Minha dúvida é como eu retorno os valores resgatados pela rota edit para preencher os campos do meu modal-edit?

2 comentários

Matheus Baptista 29/11/2017

Olá amigo. Eu tive um problema parecido, vou compartilhar:

Eu tinha uma view onde eu listava os produtos, e meu formulário de cadastro era um modal criado dentro da view. Meu problema surgiu quando eu desejava atualizar algum produto, como faria para esse modal vir preenchido quando o botão Editar fosse clidado?

Então cheguei a seguinte solução.

No meu botão Editar, dentro da table, eu fiz o seguinte:

<button class="editar" data-toggle="modal" data-target="#modal-default{{$prod->id}}"><i class="fa fa-pencil fa-lg"></i></button>

Abaixo do meu HTML de criar a table, eu fiz o seguinte:

@foreach($produtos as $prod)



<div class="modal fade" id="modal-default{{$prod->id}}">



@endforeach

Resumindo, eu criei um modal pra cada registro da table, e seu ID ficará modal-default(id do produto) e cada botão Editar terá um data-target modal-default(id do produto).

Espero que com isso, você consiga ter alguma ideia para resolver seu problema.

Obrigado!

Manager Carlos Ferreira 29/11/2017

Olá, Leonardo!
Tudo bem?

Opa Matheus, obrigado pela sugestão.

Desta forma como fez funciona, porém não é o mais ideal, se tiver em cenário com poucos dados até funciona legal, porém se tiver trabalhando com uma tabela com centenas de registros fica muito trabalhoso da manutenção, mas de qualquer forma é uma alternativa. Muito obrigado por compartilhar! :-)

Então Leonardo, o ideal neste caso é fazer tudo via AJAX.
Segue o passo a passo.
Primeiro você cria o modal apenas com o formulário (vazio e fora do loop).
O próximo passo é começar a escutar os eventos e a partir disso tomar as ações necessárias.
<a href="#" onclick="edit('{{$registro->id}}')">Editar</a>

Ao clicar neste link você deve abrir o modal buscar as informações do registro pelo "id" e povoar o modal dinamicamente.
function edit(idRegistro)
{
    // AJAX para buscar os dados do registro pelo ID
    // O retorno do método edit() deve ser json, para que o JS consiga ler e povoar os campos do formulário dinamicamente.

    // Não permite que o evento padrão seja disparado
    return false;
}

NOTA. Neste caso o envio do formulário para atualizar o registro (update) deve ser via AJAX também.

--------------------------------------------------------------
O ideal neste caso é trabalhar com alguma tecnologia front-end de ponta para criar SPA, o mais recomendado é VueJs.

Logo logo tem curso de VueJs aqui na Academy! =D