-1

Estou desenvolvendo um sistema em php mvc, no painel administrativo existe uma página para gerenciar os usuários. Nessa página eu tenho uma tabela com ID | NOME | EMAIL e do lado um botão para editar os dados.

Ao clicar nesse botão, eu faço uma chamada a um modal do bootstrap, onde existe um formulário para que o administrador edite os dados do usuário.

O problema é que, para que eu possa editar o usuário eu preciso passar para esse modal pelo menos o ID do usuário em que o administrador clicou, estou quebrando a cabeça para fazer isso mas não consigo, talvez por se tratar de uma função em JavaScript.

Alguém pode me ajudar?

1 Resposta 1

2

Atribua uma classe para o seu link de edição e um atributo com o id do usuário, quando um clique acontecer você recupera o id do usuário associado aquele elemento que foi clicado e faz o que quiser, quero dizer, faz uma chamada AJAX para coletar os dados que devem ser preenchidos nos inputs em seu modal.

Exemplo

$(function(){
  $('.abrir-editar').click(function() {
    var id = $(this).attr('data-id');
    $('#editar-id').val(id);
    console.log(id);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nome</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>araujoh</td>
      <td>[email protected]</td>
      <td>
        <a href="#!" class="abrir-editar" data-id="1" data-toggle="modal" data-target="#editarUsuarioModal">Editar</a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>fontebasso</td>
      <td>[email protected]</td>
      <td>
        <a href="#!" class="abrir-editar" data-id="2" data-toggle="modal" data-target="#editarUsuarioModal">Editar</a>
      </td>
    </tr>
  </tbody>
</table>

<div id="editarUsuarioModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Editar Usuário</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="editar-nome">Nome</label>
          <input type="text" id="editar-nome" class="form-control">
        </div>
        <div class="form-group">
          <label for="editar-email">Email</label>
          <input type="email" id="editar-email" class="form-control">
        </div>
      </div>
      <div class="modal-footer">
        <input type="hidden" id="editar-id">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

Agora que possuí o id do usuário faça uma chamada AJAX para um script PHP que retorna o nome e o e-mail do usuário:

$.ajax({
  url: '[SUA URL]',
  method: 'POST',
  data: {id: '[O ID DO USUÁRIO]'},
  dataType: 'json',
  success: function(data) {
    console.log(data);
  }
});

Depois é só preencher os inputs com os dados que o PHP retornou e por fim capturar o click no botão salvar para chamar uma nova função AJAX que enviará os dados para outro script PHP encarregado de salvar os dados em seu banco de dados.

11
  • Beleza, fiz a chamada via jquery e estou passando o user_id para o modal, em um imput hidden. Existe alguma forma de eu transformar esse id em uma váriavel php, sem ter que utilizar ajax? Pois nesse caso, não preciso retornar com o nome e email, vou utilizar apenas o user_id.
    – araujoh
    Commented 5/11/2017 às 12:47
  • Não, isso não é possível. Javascript é uma linguagem que roda no lado do cliente. Você precisa de uma interação do cliente e para rodar com o modal que sobrescreve a tela apenas AJAX, outra solução mais simples é esquecer o modal e quando o usuário clicar em editar você redireciona ele para outra página e envia pela URL o id do usuário Commented 5/11/2017 às 21:18
  • Então eu não consigo fazer com que o modal receba o user_id sem ter que redirecionar para outra página?
    – araujoh
    Commented 5/11/2017 às 21:27
  • É exatamente o que a resposta acima propõe, o que não vai conseguir é manter a mesma página, usando modal e, sem AJAX, ter os dados no PHP Commented 5/11/2017 às 21:29
  • Só para finalizar então, na função AJAX que você criou, a url que eu devo colocar é a url onde eu vou tratar o user_id e pegar as informações do banco de dados? E a data id: 'id_do_usuario' eu posso colocar minha variável em php para pegar o user_id?
    – araujoh
    Commented 5/11/2017 às 21:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .