Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

evertongouveia

Formulário de pesquisa em ajax

Recommended Posts

Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código:

 

<!DOCTYPE html>
<head>

<title>Conveniados</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/main.css" id="colors">
<script>
$(document).ready(function(e) {
    
    $("form[ajax=true]").submit(function(e) {
        
        e.preventDefault();
        
        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();
        
        $("#loadingimg").show();
        
        $.ajax({
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnhtml){                          
                $("#result").html(returnhtml); 
                $("#loadingimg").hide();                    
            }           
        });    
        
    });
    
});
</script>
</head>

<body>

<?php
    $conveniados = array();
    $destaques = array();
    $servicos = array();
    $locais = array();
    $especialidades = array();
    
    $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado'));
    foreach($convs as $conv){
        $info = array();
        $info["nome"] = $conv->nmConveniado;
        $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade;
        $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade;
        $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro;
        $info["bairro"] = $conv->listaEndereco[0]->nmBairro;
        $info["cidade"] = $conv->listaEndereco[0]->nmCidade;
        $info["telefone"] = $conv->dsTelefone1;
        $locais[] = $conv->listaEndereco[0]->nmCidade;
        $info["estado"] = $conv->listaEndereco[0]->sgEstado;
        $servicos_str = '';
        $k=0;
        foreach($conv->listaServico as $serv_str){
            $k++;
            $servicos[] = $serv_str->nmServico;
            if($k==count($conv->listaServico)){
                $servicos_str .= $serv_str->nmServico;
            } else {
                $servicos_str .= $serv_str->nmServico.', ';
            }
        }
        $info["servicos"] = $servicos_str;
        $info["imagem"] = $conv->listaImagem[0]->nmArquivo;
        $conveniados[] = $info;
        if($conv->flDestaqueSite){
            $destaques[] = $info;
        }
    }
    $_especialidades = array_unique($especialidades);
    $_servicos = array_unique($servicos);
    $_locais = array_unique($locais);
    asort($_especialidades);
    asort($_servicos);
    asort($_locais);
    ?>
<!-- Wrapper -->
<div id="wrapper">

<!-- Header Container
================================================== -->
<header id="header-container">

    <!-- Header -->
    <div id="header">
        <div class="container">
            
            <!-- Left Side Content -->
            <div class="left-side">
                
                <!-- Logo -->
                <div id="logo">
                    <a href="index.html"><script type="text/javascript">
//<![CDATA[
window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"};
//]]>
</script>
<script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script>
<img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a>
                </div>

                <!-- Mobile Navigation -->
                <div class="mmenu-trigger">
                    <button class="hamburger hamburger--collapse" type="button">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button>
                </div>

                
                
            </div>

            <div class="right-side">
                <div class="header-widget">
                    <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a>
                </div>
            </div>

            

        </div>
    </div>

</header>

<div class="clearfix"></div>

<div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");">
    <div class="main-search-inner">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="text-center">Conveniados Anjo da Guarda</h2>
                    <h4 class="text-center">Localize o conveniado desejado</h4>
<form method="post" ajax="true" action="">
                    <div class="main-search-input">
                    
                        <div class="main-search-input-item">
                            <input type="text" placeholder="Nome do conveniado" id="searchQuery" value="">
                        </div>

                        <div class="main-search-input-item">
                            <select data-placeholder="Cidade" class="chosen-select" style="display: none;">
                                <?php foreach($_locais as $local){ ?>
                    <?php if(trim($local)!=''){ ?>
                    <option value="<?php echo $local; ?>"><?php echo $local; ?></option>
                    <?php } ?>
                <?php } ?>
                            </select>
                        </div>

                        <div class="main-search-input-item">
                            <select data-placeholder="Categoria" class="chosen-select" style="display: none;">
                                <option>Categoria</option>    
                            </select>
                        </div>
                        
                        <div class="main-search-input-item">
                            <select data-placeholder="Especialidade" class="chosen-select" style="display: none;">
                                <?php foreach($_especialidades as $especialidade){ ?>
                    <?php if(trim($especialidade)!=''){ ?>
                    <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option>
                    <?php } ?>
                <?php } ?>
                            </select>
                        </div>
                        <div class="main-search-input-item">
                            <select data-placeholder="Serviço" class="chosen-select" style="display: none;">
                                <option value>Serviços</option>
                <?php foreach($_servicos as $servico){ ?>
                    <?php if(trim(servico)!=''){ ?>
                    <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option>
                    <?php } ?>
                <?php } ?>
                            </select>
                        </div>
                        <input type="submit" class="button" value="Buscar" />     
                    
                    </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container ">
    <div class="row">

        <div class="col-md-12 margin-top-40">

            <div class="row">

                <!-- Lista -->
                <?php $d=0; ?>
            <?php shuffle($destaques); ?>
            <?php foreach($destaques as $destaque){ ?>
                <?php 
                $d++; 
                if($d<=2){ 
                ?>
<div class="col-lg-12 col-md-12">
                    <div class="listing-item-container list-layout">
                        <a href="#" class="listing-item">
                            
                            <!-- Imagem -->
                            <div class="listing-item-image">
                                <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript>
                                <span class="tag"><?php echo $destaque["categoria"]; ?></span>
                            </div>
                            
                            <!-- Conteúdo -->
                            <div class="listing-item-content">
                                <div class="listing-badge anunciante">Anunciante</div>

                                <div class="listing-item-inner">
                                    <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3>
                                    <span><?php echo $destaque["telefone"]; ?></span></br>
                                    <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <?php } ?>
            <?php } ?>

                <!-- Lista / Fim -->

                <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center>

                <!-- Lista -->
                <?php $d=0; ?>
                
                <?php foreach($conveniados as $conveniado){ ?>
                <?php 
                $d++; 
                if($d<=5){ 
                ?>
                <div class="col-lg-12 col-md-12"
                especialidade="<?php echo $conveniado["categoria"]; ?>"
                local="<?php echo $conveniado["cidade"]; ?>"
                nome="<?php echo $conveniado["nome"]; ?>"
                servicos="<?php echo $conveniado["servicos"]; ?>">
                    <div class="listing-item-container list-layout">
                        <a href="#" class="listing-item">
                            
                            <!-- Imagem -->
                            <div class="listing-item-image">
                            <?php if($conveniado["imagem"] != ''){ ?>
                                <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript>
                            <?php } else { ?>
                                <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript>
                            <?php } ?>
                                <span class="tag"><?php echo $conveniado["categoria"]; ?></span>
                            </div>
                            
                            <!-- Conteúdo -->
                            <div class="listing-item-content">

                                <div class="listing-item-inner">
                                    <h3><?php echo $conveniado["nome"]; ?></h3>
                                    <span><?php echo $conveniado["telefone"]; ?></span></br>
                                    <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <?php } ?>
                <?php } ?>
                
            </div>

            <!-- Paginação -->
            <div class="clearfix"></div>
            <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>
            <div class="row">
                <div class="col-md-12">
                    <!-- Paginação -->
                    <div class="pagination-container margin-top-20 margin-bottom-40">
                        <nav class="pagination">
                            <ul>
                                <li><a href="#" class="current-page">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- Paginação / Fim -->

        </div>

    </div>
</div>


<!-- Footer
================================================== -->
<div id="footer" class="margin-top-15">
    <!-- Main -->
    <div class="container">
        
        <!-- Copyright -->
        <div class="row">
            <div class="col-md-12">
                <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div>
            </div>
        </div>

    </div>

</div>
<!-- Footer / End -->


<!-- Back To Top Button -->
<div id="backtotop"><a href="#"></a></div>


</div>
<!-- Wrapper / End -->


<!-- Scripts
================================================== -->
<script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="scripts/mmenu.min.js"></script>
<script type="text/javascript" src="scripts/chosen.min.js"></script>
<script type="text/javascript" src="scripts/slick.min.js"></script>
<script type="text/javascript" src="scripts/rangeslider.min.js"></script>
<script type="text/javascript" src="scripts/magnific-popup.min.js"></script>
<script type="text/javascript" src="scripts/waypoints.min.js"></script>
<script type="text/javascript" src="scripts/counterup.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/tooltips.min.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

<!-- Google Autocomplete -->
<script>
  function initAutocomplete() {
    var input = document.getElementById('autocomplete-input');
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.addListener('place_changed', function() {
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("No details available for input: '" + place.name + "'");
        return;
      }
    });

    if ($('.main-search-input-item')[0]) {
        setTimeout(function(){ 
            $(".pac-container").prependTo("#autocomplete-container");
        }, 300);
    }
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script>

</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a orientação dos amigos.

      Preciso fazer um Relatório onde o usuário pode Gerar uma Lista com prazo para vencimento de: 15 / 20/ 30 dias da data atual.

      Tem como montar uma SQL para o sistema fazer uma busca no MySql por período ou dias próximo ao vencimento ?

      Tentei fazer assim, mas o SQL me traz tudo:
      $query = "SELECT faturamento.*, DATE_ADD(faturamento.dataVencimento, INTERVAL 30 DAY), fornecedor.* FROM faturamento INNER JOIN fornecedor ON fornecedor.idfornecedor = faturamento.id_fornecedor WHERE faturamento.statusFatur = 1 ORDER BY faturamento.idFaturamento $ordenar ";  
      Grato,
       
      Cesar
       
       
       
       
    • Por violin101
      Caros amigos, saudações
       
      Por favor, me perdoa em recorrer a orientação dos amigos, tenho uma dúvida.
       
      Gostaria de uma rotina onde o Sistema possa acusar para o usuário antes dos 30 dias, grifar na Tabela o aviso de vencimento próximo, por exemplo:
       
      Data Atual: 15/11/2024
                                           Vencimento
      Fornecedor.....................Data.....................Valor
      Fornecedor_1...........01/12/2024..........R$ 120,00 <== grifar a linha de Laranja
      Fornecedor_1...........01/01/2025..........R$ 130,00
      Fornecedor_2...........15/12/2024..........R$ 200,00 <== grifar a linha de Amarelo
      Fornecedor_2...........15/01/2025..........R$ 230,00
      Fornecedor_3...........20/12/2024..........R$ 150,00
       
      Alguém tem alguma dica ou leitura sobre este assunto ?

      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.

      Por favor, me perdoa em recorrer a ajuda dos amigos, mas preciso entender uma processo que não estou conseguindo sucesso.

      Como mencionado no Título estou escrevendo um Sistema Web para Gerenciamento de Empresa.
       
      Minha dúvida, que preciso muito entender:
      - preciso agora escrever a Rotina para Emissão de NFe e essa parte não estou conseguindo.
       
      tenho assistido alguns vídeos e leituras, mas não estou conseguindo sucesso, já fiz toda as importações das LIB da NFePhp conforme orientação.

      Preciso de ajuda.

      Algum dos amigos tem conhecimento de algum passo-a-passo explicando a criação dessa rotina ?

      tenho visto alguns vídeos com LARAVEL, mas quando tento utilizar e converter para PHP+Codeiginter, dá uma fila de erros que não entendo, mesmo informando as lib necessárias.

      Alguns do amigo tem algum vídeo, leitura explicando essa parte ?

      Grato,

      Cesar.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.