Ir para conteúdo
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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por moreaux
      Tenho um apache2 configurado para a minha pasta /var/www/meusite , porem quando clonaram, usaram https e nao SSH, fiz o clone do novo projeto, todos os arquivos estão iguais, porem quando renomeio as pastas para ir para o meu novo projeto, me da o erro :
       
      This page isn’t working
      Dando o erro de HTTP ERROR 500, ja tentei verificar no LOG do apache, porem não esta logando nada, alguem poderia me ajudar? 
    • Por cesaroet
      Galera, estou com o seguinte problema:
      tenho 4 redirecionamento, até a 2 funciona normal, mas a partir da 3 redireciona para o menu.php novamente.
      alguem tem uma dica?
      <?php session_start(); if(!isset($_SESSION['usuario']) /*|| ($_SESSION['nivel']) */){ session_destroy(); header("location:menu.php"); exit; } if($_SESSION['nivel'] == '1'){ header("location:checklist_gabriel/index.php"); } if($_SESSION['nivel'] == '2'){ header("location:checklist/index.php"); } if($_SESSION['nivel'] == '3'){ header("location:conferencia/controle/"); } if($_SESSION['nivel'] == '4'){ header("location:controle/index.php"); } ?>  
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
×

Informação importante

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