1

Boa noite, pessoal!!

Alguém saberia de um exemplo básico sobre como criar uma modal bootstrap para alteração de registros? Eu tenha uma listagem em tela que possui um link para chamar a modal de alteração. A chamada já está ocorrendo, porém, minha dúvida é como associar os dados de banco com os campos da modal.

Obrigado desde já!

5
  • Você está usando ajax ou algo semelhante? Commented 27/02/2018 às 0:35
  • Olá, @MarcoGarcia. Sim, pretendo usar. Na verdade já uso em outros pontos da minha aplicação. Commented 27/02/2018 às 0:36
  • Bom, a principio, quando vc faz a chamada do modal (só terá 1 modal na página), vc passa o ID da linha que quer editar. Carrega os dados via ajax, e envia para os campos do modal. Esta seria a primeira parte. O user altera as informações e envia. Novamente, chame outra função ajax, passando os dados alterados + o ID que ele editou. Fim. Commented 27/02/2018 às 0:41
  • Legal, @MarcoGarcia. Mas como eu associo os valores retornados do banco aos campos em tela. Tenho encontrado alguns exemplos na internet, mas bem confusos. Se voce tiver um link de algum exemplo, eu me viro. Valeu!! Commented 27/02/2018 às 0:47
  • Vou responder na pergunta... devido a qtd de caracteres. Commented 27/02/2018 às 0:51

2 Respostas 2

1

Vou supor que vc esteja mostrando os resultados em uma tabela...e, ao final de cada linha há o botão de editar (que chama o modal), certo?

Bom, nesse botão, vc chamaria a função

<button onclick="modal_edit(123)">Editar</button>

Onde 123 é o ID do registro. Dentro desta função, vc executa um ajax, retornando os dados (JSON, por exemplo) do ID 123. Ao receber com sucesso, vc utiliza JSON.parse para transformar o retorno JSON em objeto javascript.

Voltando para seu modal, vc ja deixa os campos pré-definidos e configurados (e vazios), apenas para receber os dados vindo da etapa anterior.

...
<input type="text" name="name" id="name">
<input type="email" name="email" id="email">
<input type="text" name="address" id="address">
<button type="submit">Enviar</button>
....

Voltando para sua função JS, depois de transformar o retorno em JSON para objeto, vc faz um for, dentro da sua função.

...
for(var i in response){
    #vou supor que vc esteja usando jQuery
    #response[i].name, email e address são os nomes das colunas no seu banco
    $("#name").val(response[i].name)
    $("#email").val(response[i].email)
    $("#address").val(response[i].address)
}
...

Você poderia dispensar o for, mas eu acredito ser mais simples dessa forma. Você já percorre todos os elementos. Mas não vou entrar em detalhes.

Quando o user clicar no botão "Enviar", ele processa outro ajax (ou pode enviar via http normal) os campos alterados, levando também o ID (123, no caso), para você fazer o UPDATE.

(Apenas exemplifiquei de forma simples, sem muitos exemplos e supondo muitas coisas. Espero que ajude)

4
  • Ótimo, @MarcoGarcia!! Vou tentar seguir a lógica da sua explicação e exemplo para implementar no meu caso. Agradeço muito a atenção! Voltou para marcar como respondido. Valeu! Commented 27/02/2018 às 1:42
  • Se tiver duvida, volte aqui e jã poste um trecho do código com a duvida. Commented 27/02/2018 às 2:06
  • Boa noite, Marco. Voltei para dizer que funcionou certinho. Muito obrigado pelo apoio. Basicamente criei uma função (com JQuery/Ajax) para ser chama para atribuicao de valores. Já no PHP eu fiz a seleção dos dados colocando o retorno em um array e, posteriormente, convertendo para um JSON (echo json_encode($arrayDados)). Commented 28/02/2018 às 23:26
  • Opa, maravilha Genivaldo. Commented 1/03/2018 às 23:44
0

Eu fiz assim, espero que ajude. Lista conteúdo de uma tabela. HTML

<table id="TabEvolucao" class="table table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr >                                           
                            <th>#</th>
                            <th width="100px">Data</th>
                            <th>Descrição</th>
                            <th>Usuário</th>
                            <th>Ativo</th>            
                        </tr>
                    </thead>
                     <tfoot>
                        <tr >                                           
                            <th>#</th>
                            <th width="100px">Data</th>
                            <th>Descrição</th>
                            <th>Usuário</th>
                            <th>Ativo</th>            
                        </tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>

Datatables com SELECT ativo.

$('#TabEvolucao').DataTable({
        "processing" : true, 
        "select": true      ,
        "ajax" : {
            "type" : "POST",
            "url" : "estrutura/tabevolucao.php",
            dataSrc : '',
            "data" : function(d){
                d.idcliente = vlsidcliente;
                d.acao = "select";
                }
        },
        "columns" : [   {"data" : "id"}, 
                        {"data" : "data"}, 
                        {"data" : "descricao"},
                        {"data" : "nome"},
                        {"data" : "ativo"}
                    ],      
        "aaSorting": [[1,'asc']],
         "iDisplayLength": 7,
         "bFilter": true,
         "aaSorting": [[1,'asc']],              
        "language": {               
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página ",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sSearch": "Pesquisar",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
                },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
                }
            }   

    });

Clique sobre o registro para abrir a MODAL passando o ID. JAVA

var TabEvolucao = $('#TabEvolucao').DataTable();
    TabEvolucao
        .on( 'select', function ( e, dt, type, indexes ) {
            var rowData = TabEvolucao.rows( indexes ).data().toArray();                     
            var id = rowData["0"].id; 
            document.getElementById('idevolucao').value = id;
            $('#modalVWEVOLUCAO').data('id', id).modal('show');     

        } );

MODAL

<div class="modal fade" id="myModalUpdateEVO" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
                <!--Content-->
                <div class="modal-content text-center">
                    <!--Header-->
                    <div class="modal-header d-flex justify-content-center">
                        <p class="heading">Continuar com atualização?</p>
                    </div>

                    <!--Body-->
                    <div class="modal-body">

                        <i class="fa fa-times fa-4x animated rotateIn"></i>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer flex-center">

                        <button type="button" class="btn  btn-outline-secondary-modal" id="btnUpdateYesEVO" href="#">Sim</button>
                        <button type="button" class="btn  btn-primary-modal waves-effect" data-dismiss="modal">Não</button>

                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>

Ação do botão JAVA

$('#btnUpdateYesEVO').click(function () {
        var id = $('#myModalUpdateEVO').data('id');         
        var idevolucao = document.getElementById('idevolucao').value;
        var descricaoevolucao = document.getElementById('descricaoevolucao').value;
        var boatao = document.getElementById('acaobotaoevolucao').value;
        var iduser=$('#iduser').val();

        if(boatao == 'DESATIVAR'){

            $.post('estrutura/excluirevolucao.php',{
                    acao:'delete',
                    id:id,
                    user_id:iduser                  
                    },function(r) { 
                       var m = jQuery.parseJSON(r);        
                       if (m.success) {

                        $('#myModalUpdateEVO').modal('hide');
                        toastr["success"](m.msg);             
                        $("#listevolucao").load(location.href + " #listevolucao>", "");     

                       } else {            
                        toastr["error"](m.msg);
                        $('#myModalUpdateEVO').modal('hide');

                       }             
                    });
        }

PHP

<?php 
include("../includes/config.php");
if ($_POST) {
    $data = array('success' => '0',
                  'msg' => 'Ocorreu um erro, nada foi excluído!');

        $id         = (int) $_POST['id'];
        $user_id    = (int) $_POST['user_id'];
        $ip         = "";
        $navegaodr  = "";


        if ($_POST['acao'] == 'delete' && is_int($id)) {


             //GRAVA LOG
            $data               = date("y-m-d H:i:s"); 
            $modulo             = "EVOLUCAO";
            $acao               = "DESATIVOU REGISTRO: " . $id ;

            $rs = $con->prepare("INSERT INTO logs_acessos VALUES (:user_id, :ip, :data, :navegaodr, :modulo, :acao)");
            $rs->bindParam(':user_id', $user_id );
            $rs->bindParam(':ip', $ip );
            $rs->bindParam(':data', $data );
            $rs->bindParam(':navegaodr', $navegaodr );
            $rs->bindParam(':modulo', $modulo );
            $rs->bindParam(':acao', $acao );       
            $result = $rs->execute();           

            $select = "update evolucao set ativo = 'N' where id = " . $id;
            $rs = $con->prepare($select);
            if($rs->execute()){     
                if($rs->rowCount() > 0){
                    $data = array('success' => '1',
                                 'msg' => 'Registro desativado com sucesso!');

                }           
            }


        }
   echo json_encode($data);
   die();
}

?>
1
  • boa noite. Obrigado pelo apoio também. Conciliei as instruçoes do Marcos com a sua e obtive sucesso. Valeu!! Commented 28/02/2018 às 23:29

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 .