How to show result of a modal search

Asked

Viewed 31 times

0

I’m new to Frontend, I’d like to click on a button, show the user’s feedback in a modal. I already have the page showing the results, this working ok I would like to show now in a modal window to get better.

page that this the boot and would put the modal to appear actual page.php

<form class="form-inline" method="POST" action="efetivo.php" target="_blank">
    <input class="form-control mr-sm-2 view-data" name="txtNome" id="txtNome" type="search" placeholder="Buscar" aria-label="Buscar">
    <button class="btn btn-outline-primary my-2 my-sm-0" type="button"    id="btn_buscar" name="btn_buscar" data-toggle="modal" data-target="#exampleModal"><small><i class="fas fa-search"></i> &nbsp;Buscar</small></button>


  </form>

 <script type="text/javascript">
           
$('#btn_buscar').click( function(){                 
                $.ajax({
                    url:'mostrar_usuario.php',
                    method: 'post',
                    data: $('#resultado_busca').serialize(),
                    sucess: function(data){                         
                        $('#resultado_busca').html(data); // data é o valor printado do lado php
                        $('#exampleModalLong').modal('show') ; // abre o modal via jquery
                    }
                });
            });


</script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document" id="div_dentro_modal">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
              <!-- inicio card dados usuairo-->
              <div class="container-fluid" id="div_dentro_modal">
              <div class="row">
                <div class="col-2">
                </div>
                <div class="col-3">
                  <div class="card" style="width: 22rem; padding: 5px; margin:5px; margin-top:20px;">
                    <img class="card-img-top" width="100px" height="250px" src="<?php echo $fotoCaminho;?>"  alt="<?php echo $nomegradbanco." ".$nomeguerra;?>">
                  </div>
                </div>
                <div class="col-1">
                </div>
                <div class="col-6">
                  <div class="card border-dark mb-3" style="max-width: 550px; padding: 5px; margin:5px">
                    <div class="card-header"><strong><?php echo $nomegradbanco." ".$nomeguerra;?></strong></div>
                      <div class="card-body text-dark">
                          <p class="card-text"><strong>Nome Completo:</strong> 
                          </br><?php echo $nome;?></p>
                          <p class="card-text"><strong>Seção:</strong> 
                          </br><?php echo $nomesecbanco;?></p>
                          <p class="card-text"><strong>Setor:</strong> 
                          </br><?php echo $nomesetorbco;?></p>
                          <p class="card-text"><strong>E-mail:</strong> 
                          </br><?php echo $email;?></p>
                          <p class="card-text"><strong>Telefone:</strong> 
                          </br><?php echo $telefone;?></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              </div>
      

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

page that shows users, here is done the search in the database with the id sent by txtNome pagina mostrar_usuarios.php


<?php

include 'session_verification.php';
include 'conexao.php';

//checando perfil usuario
/*if (isset($tipoperfil)) {
    if ($tipoperfil <> 1) {
         echo "
        <META HTTP-EQUIV=REFRESH CONTENT = '0;URL=efetivo/principal.php'>
        <script type=\"text/javascript\">
            alert(\"Você não tem permissão para acessar esse formulário!\");
        </script>
      ";
    }
}*/



//BUSCANDO DADOS DO USUARIO
//recebe o valor do atributo    


//$idusuario      = $_GET['id'];
$idusuario      = $_POST['txtNome'];

$saram          = substr($idusuario, -7);  

$sql = "SELECT * FROM usuario WHERE saram = $saram";
$query = mysqli_query($conexao,$sql);
$usuarioselecionado  = mysqli_fetch_assoc($query);

//MONTANDO O USUARIO NA TELA

$idusuario           = $usuarioselecionado['id_usuario'];
$nome                = $usuarioselecionado['nome_usuario'];
$idgraduacao         = $usuarioselecionado['id_graduacao'];
$unidade             = $usuarioselecionado['unidade_id'];
$nomeguerra          = $usuarioselecionado['nome_guerra'];
$saram               = $usuarioselecionado['saram'];
$telefone            = $usuarioselecionado['tel_usuario'];
$email               = $usuarioselecionado['email_usuario'];
$senha               = $usuarioselecionado['senha_usuario'];
$perfil              = $usuarioselecionado['perfil_usuario'];
$fotoCaminho         = $usuarioselecionado['foto_usuario'];
$secao               = $usuarioselecionado['secao_id'];
$setor               = $usuarioselecionado['setor_id'];
$dtnascimento        = $usuarioselecionado['dt_nascimento'];




//____________________________________________
//selecionado dados graduacao e montando 
$sqlgraduacao     = "SELECT  * FROM graduacao   WHERE id_graduacao = $idgraduacao";
$querygraduacao   = mysqli_query($conexao,$sqlgraduacao);
$gradselecionado  = mysqli_fetch_assoc($querygraduacao);


$idgradbanco        = $gradselecionado['id_graduacao'];
$nomegradbanco      = $gradselecionado['nome_graduacao'];



//____________________________________________
//selecionado dados secao e montando 
$sqlsecao    = "SELECT  * FROM secao WHERE id_secao = $secao";
$querysecao  = mysqli_query($conexao,$sqlsecao);
$secaoselecionado  = mysqli_fetch_assoc($querysecao);


$idsecbanco        = $secaoselecionado['id_secao'];
$nomesecbanco      = $secaoselecionado['nome_secao'];


//____________________________________________
//selecionado dados setor e montando 
$sqlsetor    = "SELECT  * FROM setor WHERE id_setor = $setor";
$querysetor  = mysqli_query($conexao,$sqlsetor);
$setorselecionado  = mysqli_fetch_assoc($querysetor);


$idsetorbco        = $setorselecionado['id_setor'];
$nomesetorbco      = $setorselecionado['nome_setor'];




//____________________________________________
//selecionado dados perfil e montando 
$sqlperfil = "SELECT  * FROM perfil  WHERE id_perfil = $perfil";
$queryperfil = mysqli_query($conexao,$sqlperfil);
$perfilselecionado  = mysqli_fetch_assoc($queryperfil);


$idperfilbco                = $perfilselecionado['id_perfil'];
$nomeperfil                 = $perfilselecionado['nome_perfil'];



?>




<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
            <title><?php echo $nomegradbanco." ".$nomeguerra;?></title>

        <!--
            LINK BOOTSTRAP
        -->
            <script src="../datepicker/jquery-3.3.1.min.js"></script>
            <script src="../datepicker/gijgo.min.js" type="text/javascript"></script>
            <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
        <!--
        -->




        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/0227805d0b.js" crossorigin="anonymous"></script>
        <style type="text/css">
            


            #botao{
                

            }
        </style>

        <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.css">-->

<!-- funcao mascara telefone-->
 <script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mtel(v){
    v=v.replace(/\D/g,"");             //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d)(\d{4})$/,"$1-$2");    //Coloca hífen entre o quarto e o quinto dígitos
    return v;
}
function id( el ){
    return document.getElementById( el );
}
window.onload = function(){
    id('telefone').onkeypress = function(){
        mascara( this, mtel );
    }
}



//FUNCAO SOMENTE LETRAS
function ApenasLetras(e, t) {
    try {
        if (window.event) {
            var charCode = window.event.keyCode;
        } else if (e) {
            var charCode = e.which;
        } else {
            return true;
        } 
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode > 191 && charCode <= 255)  || (charCode == 32) ) // letras com acentos)
            return true;
        else
            return false;
    } catch (err) {
        alert(err.Description);
    }
}





</script>

</head>


<body style="margin-top: 85px;">
    <div class="container" style="margin-top: 40px">
        <!-- inicio card dados usuairo-->
        <div class="row">
            <div class="col-2">
            </div>
            <div class="col-3">
                <div class="card" style="width: 22rem; padding: 5px; margin:5px; margin-top:20px;">
                  <img class="card-img-top" width="200px" height="365px" src="<?php echo $fotoCaminho;?>"  alt="<?php echo $nomegradbanco." ".$nomeguerra;?>">
                </div>
            </div>
            <div class="col-1">
            </div>
            <div class="col-6">
                <div class="card border-dark mb-3" style="max-width: 550px; padding: 5px; margin:5px">
                    <div class="card-header"><strong><?php echo $nomegradbanco." ".$nomeguerra;?></strong></div>
                        <div class="card-body text-dark">
                            <p class="card-text"><strong>Nome Completo:</strong> 
                            </br><?php echo $nome;?></p>
                            <p class="card-text"><strong>Seção:</strong> 
                            </br><?php echo $nomesecbanco;?></p>
                            <p class="card-text"><strong>Setor:</strong> 
                            </br><?php echo $nomesetorbco;?></p>
                            <p class="card-text"><strong>E-mail:</strong> 
                            </br><?php echo $email;?></p>
                            <p class="card-text"><strong>Telefone:</strong> 
                            </br><?php echo $telefone;?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>


</script>
<!--<script type="text/javascript" src="js/bootstrap.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>

<script language="javascript">
    $("#secao").on("change",function(){
        var idSetor =  $("#secao").val();
        $.ajax({
            url:  'pega_setor.php',
            type: 'POST',
            data: {id:idSetor},
            beforeSend: function(){
                $("#setor").css({'display':'block'});
                $("#setor").html("Carregando...");
            },
            success: function(data)
            {
                $("#setor").css({'display':'block'});
                $("#setor").html(data);
            },
            error: function(data)
            {
                $("#setor").css({'display':'block'});
                $("#setor").html("Houve um erro ao Carregar");
            }


        });


    });

</script>

I’d really appreciate it if someone could help me! Thank you

javascript jquery mysql database modal

  • The form action is directed to the same page because it was running some tests, but this action is directed to show users.php. And functioning normally

  • You can make a request using the Javascript Native API (Xmlhttprequest), after which you assemble your modal structure within PHP itself, returning the structure as response of the request and inserting finally in your HTML.

  • Could you show me what you said? I don’t understand that

No answers

Browser other questions tagged javascript jquery mysql database modal

You are not signed in. Login or sign up in order to post.