Pass information to a Bootstrap Modal

Question

Pass information to a Bootstrap Modal

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I need to pass id of a modal to my controller.php . In the modal, clicking on the "delete" button I'm trying to pass via POST id of the client, but the controller does not receive anything.

Here I get the data that is in the database:

foreach($dados as $row){
    $idCliente   = $row['idClienteFisico'];
    $nomeCliente = $row['nomeCliente'];
    $rgCliente   = $row['rgCliente'];
    $cpfCliente  = $row['cpfCliente'];
}

Here is the button that activates modal and passes to jQuery the id and name by data-id and data-nome .

<button type="button" data-id="<?php echo $idCliente; ?>" data-nome="<?php echo $nomeCliente; ?>" data-remote="false" data-toggle="modal" data-target="#exampleModal" class="btn btn-danger"><em class="fa fa-trash"></em></button>

Here is my Bootstrap Modal where I get the id and the client name

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <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">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Excluir Cliente</h4>
      </div>
      <div class="modal-body">
        <form action="../Controller/cadastro.php" method="post">
          <div class="form-group">
            <h3>Deseja excluir</h3>
            <label for="recipient-name" class="control-label">ID:</label>
            <input type="text" class="form-control hidden" id="recipient-name" name="id">
          </div>
            <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-danger" value="btnDelete" name="btnDelete">Excluir</button>
      </div>
        </form>
      </div>
    </div>
  </div>
</div>

This is where I open the modal and where I pass the id and the name of the client by the "date-id" and "date-name" of my button.

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var id = button.data('id') 
    var nome = button.data('nome')

    var modal = $(this)
    modal.find('.modal-body input').val(id)
    modal.find('.modal-body h3').text('Deseja excluir o usuario ' +nome+ '?')
})

My controller.php looks like this:

if(isset($_POST['btnDelete'])){
    $dao = new funcionarioDAO();
    $dao->Deletar($_GET['id']);
}

The way it's there I'm getting id and the name in the modal. But I do not know how to send id via POST to my controller.php who will receive id and delete the Client.

Any Suggestions?

php javascript bootstrap-3 modal

asked by anonymous 23.03.2016 / 04:29

2 answers

Password Bitnami Moodle How to export an entire DIV (with images, table and graphics) to PDF?

score 0 · Answer 1

Good morning, I mounted this script, see if it helps you; when you click the "Delete" button of the modal, you load the control page within the modal itself, passing the data via $ _POST, so the data will be deleted!

<script>
    $("#btnDelete").click(function(){
        var id = button.data('id'); //recuperando id
        $("#retorno").load("controller.php", {id:id}); //carregando pagina controller.php passando id por POST
    }); 
</script>   

<html>
    <button type="submit" class="btn btn-danger" value="btnDelete" name="btnDelete" id="btnDelete">Excluir</button>
    <div id="retorno" style="display:none"></div> <!--Div onde vai carregar a controller.php -->    
</html>

I just used the modal button snippet in this example!

score 0 · Answer 2

Your code, with some changes :

<script type="text/javascript">

$(function () {
    $("#btnDelete").click(function () {
        send_data();
    });
});

function send_data(){
    $.ajax({
        url: "../Controller/cadastro.php",
        type: 'post',
        dataType: 'json',
        data: {
            id:$("#recipient-name").val()
        },
        success: function () {
            alert('Enviou o ID '+$("#recipient-name").val()+"!");
            // Fecha o MODAL
            //$('#exampleModal').modal('toggle');
        },
        error: function () {
            alert('Falhou ao enviar o ID '+$("#recipient-name").val()+"!");
        }
    });
}
</script>

<button type="button" data-id="<?php echo $idCliente; ?>" data-nome="<?php echo $nomeCliente; ?>" data-remote="false" data-toggle="modal" data-target="#exampleModal" class="btn btn-danger">
    <em class="fa fa-trash"></em>
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <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">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Excluir Cliente</h4>
            </div>
            <div class="modal-body">
                <form action="../Controller/cadastro.php" method="post">
                    <div class="form-group">
                        <h3>Deseja excluir</h3>
                        <label for="recipient-name" class="control-label">ID: <?php echo $idCliente; ?></label>
                        <input type="text" class="form-control hidden" id="recipient-name" name="id" value="<?php echo $idCliente; ?>">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger" value="btnDelete" name="btnDelete" id="btnDelete">Excluir</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

OBS: When working with JQuery, use id, it's more practical to reference the elements. Since you do not need to send all FORM data, you do not need SUBMIT. The POST is done by the send_data () function.