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.
       
      Estou escrevendo um Sistema em JAVA Web Servlet, estou tendo problema para Invalidar Sessão.

      Toda vez que o usuário faz o LOGOUT, o sistema permite que o Navegar retorna para a página anterior.

      Como consigo bloquear/destruir a sessão para o Sistema quando o usuário sair, voltar sempre para o Login.

      o meu Servlet está assim:
       
      package br.com.rc.controlador; import br.com.rc.dao.UserDAO; import br.com.rc.modelo.Usuario; import br.com.rc.seguranca.Criptografia; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; /** * Servlet - Autenticação Usuário */ public class AuthControlador extends HttpServlet { private UserDAO authDao = new UserDAO(); private final String PagIndex = "index.jsp"; private final String PagHome = "home.jsp"; private final String PagLogout = "deslogar.jsp"; protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String accion = request.getParameter("accion"); switch (accion) { case "login": Login(request, response); break; case "logout": Logout(request, response); break; default: throw new AssertionError(); } } protected void Login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); request.getRequestDispatcher(PagIndex).forward(request, response); } /* * O problema está aqui, não invalida a sessão e permite que volta * para a página anterior. */ protected void Logout(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); HttpSession session = request.getSession(); session.setAttribute("users", null); session.removeAttribute("users"); session.invalidate(); response.sendRedirect(PagLogout); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override public String getServletInfo() { return "Short description"; } }
      Deslogar.JSP
      página criada para impedir que volte para a anterior.
      <% //Destrói Sessão session.invalidate(); //Redirecionar Página Login response.sendRedirect("index.jsp"); %>

      Grato,

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

      Estou escrevendo um Sistema em JAVA Web e estou encontrando um problema para fazer Paginação.

      O sistema informa o Limite de registro por página, mas não mostra abaixo da tabela a paginação.

      Alguém pode me ajudar ?

      Posto o Código abaixo.

      Controller - Servlet
       
      package br.com.rc.controlador; import br.com.rc.modelo.Cargo; import br.com.rc.modelo.dao.CargoDAO; import java.io.IOException; import java.util.List; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet */ public class srvCargos extends HttpServlet { private CargoDAO crgDao = new CargoDAO(); private final String pagListar = "/views/cargos/cargos.jsp"; private final String pagNovo = "/views/cargos/cargoNovo.jsp"; private final String pagEditar = "/views/cargos/cargoEditar.jsp"; protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String accion = request.getParameter("accion"); switch (accion) { case "listarCargos": listarCargos(request, response); break; default: throw new AssertionError(); } } protected void listarCargos(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); int paginaActual = 1; int registrosPorPagina = 5; // Qtde por Tabela if (request.getParameter(pagListar) != null) { paginaActual = Integer.parseInt(request.getParameter(pagListar)); } int offset = (paginaActual - 1) * registrosPorPagina; List<Cargo> lista = crgDao.ListarTodos(offset, registrosPorPagina); int totalRegistros = crgDao.contarTotal(); int totalPaginas = (int) Math.ceil((double) totalRegistros / registrosPorPagina); request.setAttribute("cargos", lista); request.setAttribute("totalPaginas", totalPaginas); request.setAttribute("paginaAtual", paginaActual); request.getRequestDispatcher(pagListar).forward(request, response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } @Override public String getServletInfo() { return "Short description"; }// </editor-fold> }  
      Classe DAO
       
      package br.com.rc.modelo.dao; import br.com.rc.config.Conexion; import br.com.rc.modelo.Cargo; import java.sql.*; import java.util.ArrayList; import java.util.List; /** * Classe DAO */ public class CargoDAO { private Connection cn = null; private PreparedStatement ps = null; private ResultSet rs = null; private int noOfRecords; public ArrayList<Cargo> ListarTodos(int offset, int noOfRecords) { ArrayList<Cargo> lista = new ArrayList<>(); try { cn = Conexion.getConnection(); String sql = "select * from Cargo ORDER BY nombreCargo ASC limit " + offset + ", " + noOfRecords; ps = cn.prepareStatement(sql); rs = ps.executeQuery(); while (rs.next()) { Cargo obj = new Cargo(); obj.setIdCargo(rs.getInt("idCargo")); obj.setNombreCargo(rs.getString("nombreCargo")); obj.setEstado(rs.getBoolean("estado")); lista.add(obj); } } catch (Exception ex) { ex.printStackTrace(); } finally { try { if (cn != null) { cn.close(); } if (rs != null) { rs.close(); } if (ps != null) { ps.close(); } } catch (Exception ex) { } } return lista; } public int contarTotal() { String sql = "Select Count(*) From Cargo"; try (PreparedStatement ps = cn.prepareStatement(sql)) { ResultSet rs = ps.executeQuery(); if (rs.next()) return rs.getInt(1); } catch (SQLException e) { e.printStackTrace(); } return 0; } public int getNoOfRecords() { return noOfRecords; } }
      Página JSP
      caminho: \web\views\cargos\cargos.jsp
      <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <jsp:include page="../../estilo/header.jsp" /> <jsp:include page="../../estilo/menu.jsp" /> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <section class="content-header"> <h1>Página Cargos</h1> </section> <!-- Content Header (Page header) --> <section class="content-header"> <a href="srvCargos?accion=novo" class="btn btn-success"> <i class="fa fa-plus"></i> Novo Cargo </a> <ol class="breadcrumb"> <li><a href="srvCargos?accion=index"><i class="fa fa-dashboard"></i> Inicio</a></li> <li class="active">Cargos</li> </ol> </section> <section class="content"> <div class="box"> <div class="box-header with-border"> <h3 class="box-title">Lista de Cargos</h3> </div> <div class="box-body"> <div class="table-responsive" > <table class="table table-bordered table-striped dataTable table-hover" id="tablaCargos"> <thead> <tr> <th>Código</th> <th>Descrição</th> <th>Estado</th> <th>Ação</th> </tr> </thead> <tbody> <c:forEach items="${cargos}" var="item"> <tr> <td>${item.idCargo}</td> <td>${item.nombreCargo}</td> <c:if test="${item.estado == true}"> <td><span class="badge bg-green active">Ativo</span></td> </c:if> <c:if test="${item.estado == false}"> <td><span class="badge bg-red active">Inativo</span></td> </c:if> <td> <a href="srvCargos?accion=buscar&id=${item.idCargo}" class="btn btn-info btn-sm"> <i class="fa fa-edit"></i> </a> <a href="srvCargos?accion=eliminar&id=${item.idCargo}" onclick="return confirm('Deseja Realmente Excluir o Cargo com id ${item.idCargo}')" class="btn btn-danger btn-sm"> <i class="fa fa-trash"></i> </a> </td> </tr> </c:forEach> <c:if test="${cargos.size() == 0}"> <tr class="text-center"> <td colspan="6">Nenhum Registro Enconrado.</td> </tr> </c:if> </tbody> </table> <!--Aqui está o erro ===> a parte de Navegação não mostra--> <nav> <ul class="pagination"> <c:if test="${paginaActual > 1}"> <li class="page-item"><a class="page-link" href="srvCargos?accion=listarCargos?page=${paginaActual - 1}">Anterior</a></li> </c:if> <c:forEach var="i" begin="1" end="${totalPaginas}"> <li class="page-item ${i == paginaActual ? 'active' : ''}"> <a class="page-link" href="srvCargos?accion=listarCargos?page=${i}">${i}</a> </li> </c:forEach> <c:if test="${paginaActual < totalPaginas}"> <li class="page-item"><a class="page-link" href="srvCargos?accion=listarCargos?page=${paginaActual + 1}">Siguiente</a></li> </c:if> </ul> </nav> </div> </div> </div> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <jsp:include page="../../estilo/footer.jsp" />
      Grato,

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

      Por favor, alguém pode me dar uma explicação referente o Template AdminLTE + Java Netbeans.

      Após importar para o Sistema Web. o componente para a pasta:
      WEB PAGES
      |___> bower_components - fica apresentando ERRO em algumas subpastas.

      Como consigo corrigir esses erros ?

      At.te,

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

      Estou com uma dúvida em Sistema WEB em Java.

      O Código abaixo está na Página index.jsp
      <%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> </html>
      O problema são os caracteres especiais que não consigo corrigir.

      Como consigo converter os Caracteres para o Padrão Português(BR) ?

      Grato,

      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Estou escrevendo um Sistema Java Web e quando clico no Botão Salvar, o Java acusa esse erro:

      ERROR: Cannot invoke "Object.toString()" because the return value of "java.util.Map.get(Object)" is null
       
      Já tentei de várias formas resolver esse problema, mas não estou conseguindo.

      Por favor, alguém pode me ajudar identificar a origem e resolver o problema acima ?

      Grato,
       
      Cesar
×

Informação importante

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