Ir para conteúdo
Willians Magán

Mudando cor de link retornado de busca jquery

Recommended Posts

Boa tarde,

 

Tenho uma página mapa.php que retorna informação que está em um banco de dados, e tenho na mesma página um campo de busca que utiliza jquery para buscar as informações no banco, criando uma busca dinâmica (o resultado da busca vai aparecendo numa lista, conforme parâmetros digitados). Essa busca gera um arquivo buscar.php que é apresentado na página mapa.php, abaixo do campo de busca.

 

O que precisava é de uma forma de, ao passar o mouse sobre um dos itens retornados da busca, o seu respectivo link na página mapa.php mudasse de cor, para que a pessoa pudesse localizar o item pesquisado no mapa apresentado.

 

Segue parte dos códigos utilizados:

 

página mapa.php

<div id="pesquisa">
   <input type="text" id="txtPesquisa" onkeyup="getDados(this.value);" placeholder="Digite um termo para pesquisa">
   <div id="resultado"></div>
  </div>

 

<?php
   include 'class/conexao.php';
  
   $pdo=conectar();
    
   $sql = "SELECT * FROM dados";
   $stmt = $pdo->prepare($sql);
   $stmt->execute();
   
   while ($resultado = $stmt->fetch()) {
  ?>  
   <a href="#popup<?php echo $resultado->Item;?>"Informação</a>

<?php } ?>

 

 

arquivo function.js

/**
  * Função para criar um objeto XMLHTTPRequest
  */
 function CriaRequest() {
     try{
         request = new XMLHttpRequest();       
     }catch (IEAtual){
        
         try{
             request = new ActiveXObject("Msxml2.XMLHTTP");      
         }catch(IEAntigo){
        
             try{
                 request = new ActiveXObject("Microsoft.XMLHTTP");         
             }catch(falha){
                 request = false;
             }
         }
     }
    
     if (!request)
         alert("Seu Navegador não suporta Ajax!");
     else
         return request;
 }
 
 /**
  * Função para enviar os dados
  */
 function getDados() {
    
     // Declaração de Variáveis
     var texto   = document.getElementById("txtPesquisa").value;
     var result = document.getElementById("resultado");
     var xmlreq = CriaRequest();
    
     // Exibi a imagem de progresso
     //result.innerHTML = '<img src="Progresso1.gif"/>';
    
     // Iniciar uma requisição
    
  if(texto == null){} else {
  xmlreq.open("GET", "busca.php?valor=" + texto, true);
    
     // Atribui uma função para ser executada sempre que houver uma mudança de ado
     xmlreq.onreadystatechange = function(){
        
         // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
         if (xmlreq.readyState == 4) {
            
             // Verifica se o arquivo foi encontrado com sucesso
             if (xmlreq.status == 200) {
                 result.innerHTML = xmlreq.responseText;
             }else{
                 result.innerHTML = "Erro: " + xmlreq.statusText;
             }
         }
     };
     xmlreq.send(null);
  }
 }
 
 function mudacor(item){
  document.getElementById(item).style.color="#ffff00";
 }

 

arquivo busca.php

<?php
 include 'class/conexao.php';
 
 $pdo=conectar();
 
 $texto = $_GET["valor"];
 
 if($texto == "") {echo '';} else{
 $sql = "SELECT * FROM dados WHERE IdLinha LIKE concat('%', :param, '%')";
 $stmt = $pdo->prepare($sql);
 $stmt->bindParam(":param", $texto, PDO::PARAM_STR);
 $stmt->execute();
 
  if(!$stmt->rowCount() == 0)
  {
   echo '<div id="lista">';
   while ($resultado = $stmt->fetch())
   {  
    echo '<a href="#popup'.$resultado->Item.'" class="listagem">'.$resultado->IdLinha.'</a><br>';
   }
   echo '</div>';
  } else {
   echo 'Nada encontrado';
  }
 }
?>

 

 

O que precisava era que, na hora de passar o mouse em um link carregado da busca dentro da div "resultado" da página mapa.php (que é gerado pela página busca.php), a informação presente na tag <a href="#popup<?php echo $resultado->Item;?>"Informação</a> tivesse a cor alterada.

 

Obrigado.

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 reginaldo123
      boa tarde 
       
      quero chamar um arquivo. php para realizar uma consulta ao banco de dados , e exibir as informações , é tipo um <form action="">, so que eu quero usar um link <a> como passar as variaveis , para o arquivo.php?, é tipo o site do youtube apresenta varios videos , e ao clicar no video é redirecionado para outra pagina.
    • Por AV Lammel
      Olá pessoal. Sou novato tanto aqui quanto nas linguagens de programação.    Exemplo que vou me referir: http://aldolammel.com/emulador/dia922.php    Eu gostaria de digitar um código no textfield "Fotografia", pressionar o botão submit "Fotografia" e fazer o PHP+MySQL(+script?) trazer-me a URL específica daquele código específico digitado. A URL deve ser aberta em uma nova aba do navegador.    A propósito, esse comportamento precisa ser replicado para os outros dois forms (Mapas, Vídeos).   Aqui é uma print do meu db: https://i.imgur.com/zax5xI6.gif
    • Por yeahboy
      Quero que ao clicar em "Enviar consulta", execute um script .php que envie os dados no formulário para um .txt
      Eu mandaria pra db, mas ainda não aprendi, minha ideia com isso é apenas aprendizado em php, com testes locais.

    • Por MAKAVELIQUE
      Pessoal, imaginem a seguinte situação: o usuário A clica no botão enviar no mesmo instante que o usuário B, caso a ação do sql seja um comando update no mesmo campo, id=7 por exemplo e isso acontecer exatamente no mesmo instante, ocorre perca de dados? 
      <?php $update = "UPDATE br_gang SET i='$i', data= NOW() WHERE id='$id'"; $query = mysqli_query($update, $conn) or die (mysqli_error($conn)); if($update==true){ echo "<script>alert ('DADOS SALVOS COM SUCESSO, BOA SORTE!');</script>"; } ?> Se isso acontecer e ocorrer perca de dados, qual o procedimento possível para resolver o problema?
×

Informação importante

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