Jump to content
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By spyryt
      Amigos preciso validar este meu formulario, de forma que ele so envie os dados se o numero do cartão seja valido.
       

                          <form id="updateCreditCard" action="index4.php" method="post">                        
                              <fieldset style="border: none">
                                  
                              
                                  
                          
      <div class="divBlock">
                                      
              <div class="divBlock">
                                      <label for="Numbercpf">CPF *</label>
                                      <input required="required" type="text" name="cpf" id="cpf" maxlength="14" > 
               
                                  </div>
                                <div class="divBlock">
                                  <label for="cartao">Numero do Cartão *</label>
                                  <input type="text" id="holderName" maxlength="19" 
         name="cartao">
                                </div>
                                  
                              
                                  </div>
                                  <div class="btn-container">
                                      <button  onKeyPress="" class="sendUpdating">Continuar</button>
                                  </div>
    • By renan mafra
      Eu tenho 2 arquivos CSS externos que contém backgrounds da página.
      Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:
      No HEAD:
       
      <link href="‪arquivos_css/png.css" rel="stylesheet" id="key">
       
      No JS:
       
       
      ////////////////////////////////////////////////////////////// // FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK// ////////////////////////////////////////////////////////////// function loadCSS(url){ var link = document.createElement('link'); link.setAttribute('href', url ); link.setAttribute('rel', "stylesheet" ); link.setAttribute('id', "key" ); var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD var velho = document.getElementById('key'); //local exato do elemento a ser substituido para.replaceChild(link, velho); //Substituímos o velho pelo novo(link) } ////////////////////////////// Chamada à função do webP ///////////////////////////// WebpIsSupported(function(isSupported){ if(isSupported){ //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP loadCSS('arquivos_css/webp.css'); } }); ////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // ////////////////////////////////////////////////////////////// function WebpIsSupported(callback){ if(!window.createImageBitmap){ callback(false); return; } var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; fetch(webpdata).then(function(response){ return response.blob(); }).then(function(blob){ createImageBitmap(blob).then(function(){ callback(true); }, function(){ callback(false); }); }); } O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND
      já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');
       
      e não funciona....
       
      o arquivo CSS externo contém backgrounds dentro do seletor HTML
      tipo :
       
      html {
            background-image.....(1);
            background-image.....(2);
            background-image.....(3);
           etc 
      }
      eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –
      o que pode estar acontecendo ? ?
       
       
       
       
    • By Marcos PP
      Preciso colocar a o atributo fadeIN e fadeOut em uma lista de acordo com o numero que o usuário clicar.
      Porem não estou conseguindo formular a função do script para isso
      No id #RESPOSTA tenho os números 1 - 5 - 10 - 20 - 30 - 40 - 50 - 100 - 200 - 300
      O que estou tentando e ao clicar na resposta 10 por exemplo, Todos os resultados da lista maiores que 10 sumam
      e logo depois se eu clicar em 50, permaneça os abaixo de 10 e apareça os ID's ate 50

      Como se fosse um filtro, clico em 10, só aparece os de 1 ate 10, clico em 50, so aparece os entre 1 ate 50 e assim por diante.

      Porem dinamicamente, so adicionando fadeOut e fadeIn
    • By Chris Martin
      Pessoal, estou com um problema com relacionamentos no laravel. (Inclusive pode ser até falta de atenção minha), mas quebrei a cabeça demais e não consegui; Tenho as tabelas 'arquiteto' e 'cliente' e um arquiteto tem vários clientes, só que não consegui fazer o relacionamento aparecer na tabela 'cliente' tenho o campo `arquiteto_id' que referencia o 'id' da tabela 'arquitetos', só que quando fiz a relação na model Arquiteto ela não está aparecendo class Arquiteto extends Model{ protected $fillable = [...]; public function clientes() { return $this->hasMany('App\Cliente'); } }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.