Passing a variable in a modal bootstrap

Question

I am developing a system in php mvc, in the administrative panel there is a page to manage users. On this page I have a table with ID | NAME | EMAIL and on the side a button to edit the data.

By clicking this button, I call a bootstrap modal, where there is a form for the administrator to edit the user data.

The problem is that, so I can edit the user I need to pass to this modal at least the user ID that the administrator clicked on, I’m breaking my head to do this but I can’t, maybe because it’s a function in Javascript.

Can someone help me?

Answer 1

Assign a class to your edit link and an attribute with the user id, when a click happens you recover the associated user id that element that was clicked and does what you want, I mean, make an AJAX call to collect the data that must be filled in the inputs in your modal.

Example

$(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>

Now that you have the user id make an AJAX call to a PHP script that returns the user’s name and email:

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

Then just fill in the inputs with the data that PHP returned and finally capture the click save button to call a new AJAX function that will send the data to another PHP script in charge of saving the data in your database.