Jump to content

Recommended Posts

Posted (edited)

Pessoal,

Tenho no meu site um JCarrousel que passa uma imagens carregadas do banco por um while php: tudo funciona.

Agora, quero colocar uma caixa de texto (ou coisa parecida) com a finalidade de, à medida que a pessoa vai digitando o nome da imagem (portal) na caixa, o ajax vai pesquisando no banco se existe aquela combinação. Caso exista, o javascript marcará e exibirá (caso esteja escondido) a imagem do JCarroussel.

Estou tentando com ajax assim:

function selecionaPortal(campo)
{
try { ajax = new ActiveXObject("Microsoft.XMLHTTP");}
catch(e)
{
 try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); }
 catch(ex)
 {
try { ajax = new XMLHttpRequest(); }
catch(exc)
{
	 alert("Esse browser não tem recursos para uso do ajax");
	 ajax = null;
 }
}
  }
 if(ajax)
 {
 ajax.open("POST", "global/funcoes_php/selecionaPortal.php", true);	
 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 processXMLPortais(ajax.responseXML,campo);

 var params = "nome="+campo;
 ajax.send("nome="+params);
  }
}
function processXMLPortais(obj,campo)
{
 alert(obj);
 var dataArray   = obj.getElementsByTagName("portal");

  if(dataArray.length > 0)
  {
     var codigo	=  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
     var nome =  item.getElementsByTagName("nome")[0].firstChild.nodeValue;

      alert(nome);
    }
 }
</script>

Ao executar o ajax.open, ele não consegue conectar com o arquivo php.

Eu fiz um include(''); do php com o endereço de ajax.open para ter certeza que o endereço estava certo e estava. Mas o ajax.open não consegue abrir.

E o alert(obj); esta dando null;

Poque será?

Eis o código do php também:

<?php
 require_once("../config/conexao.inc");

 $selecionaPortalString = "SELECT id, nome FROM portais WHERE nome='".$_POST["nome"]."''";
 $selecionaPortalQuery = $conexao->Query($selecionaPortalString);

 if($selecionaPortalQuery->num_rows>0)
 {				
    list($codigo, $nome)=$selecionaPortalQuery->fetch_row();
    //XML
    $xml  = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
    $xml .= "<portais>\n";			  
    $xml .= "<portal>\n";	
    $xml .= "<codigo>".$codigo."</codigo>\n";				  
    $xml .= "<nome>".$nome."</nome>\n";		
    $xml .= "</portal>\n";	
    $xml.= "</portais>\n";
 }

 header("Content-type: application/xml; charset=utf-8");
 echo $xml;
?>

Se eu rodar esse php substituindo o parâmetro por um valor que sei que exista, ele gera certinho o xml.

Será que existe alguma coisa errada? Ou alguém tem uma ideia melhor?

Edited by carcleo
Posted

Descobri que usando:

       <div id="result"></div>
       <script>$('#result').load('global/funcoes_php/selecionaPortal.php?nome="Portal 1"');</script>

Eu consigo popular a div com id='result' com o resultado do banco.

Mas preciso arranjar uma forma de passar

?nome="Portal 1"

Por parâmetro. Pois a consulta no arquivo php é

 $selecionaPortalString = "SELECT id, nome FROM portais WHERE nome='".$_GET["nome"]."''";

Passando

?nome="Portal 1"

não funciona. Mas colocando diretamente no php

 $selecionaPortalString = "SELECT id, nome FROM portais WHERE nome='Portal 1'";

Funciona.

Como resolver isso?

Posted (edited)
global/funcoes_php/selecionaPortal.php?nome="Portal 1"

Isso?

Mesmo com Portal 1 estando entre aspas?

Será que não existe uma forma mais fácil de fazer isso?

Observe:

http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/

Abaixo do banner tem um jcarrousel dos portais.

Eu preciso criar uma caixa para o usuário digitar o nome do portal.

O portal a ser selecionado deve ser o que o php retornar que a combinaçao da entrada de texto que o usuario entrou retornar.

Edited by carcleo
Posted (edited)

Sim porque no fim a url que vai ser gerada será

global/funcoes_php/selecionaPortal.php?nome=Portal 1

E não será válida.

Se meteres no browser, o espaço é feito encode automáticamente.

Então para resolver a situação acho que tens de usar o encodeURIComponent.

Let's get started!

<div id="result"></div>
 <script>$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent("Portal 1"));</script>

Depois no php receberás o parametro com o encode ( se não me engano ), mas antes ves se o no php se o parametro no $_GET é recebido bem, se não estiver tens de usar o urldecode.

$search = urldecode($_GET["nome"]);

a partir daqui já sabes o caminho 😉

Edited by Devexz
  • Vote 1

Contador de calorias: caloriaspordia.com

Posted (edited)

Ok.

Deu certo.

Mas no momento, estou a imprimir os valores em uma div.

Mas o que eu quero é pegar o nome retornado do php e ver se existe algum objeto na jcarroussel e selecionar ele.

Estou tentando assim:

<script>$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent(document.getElementById('pesquisaPortal').value);</script>

E não esta dando certo para pegar o que esta no campo e enviar por parâmetro

Edited by carcleo
Posted

tens de dividir o problema em partes para ser resolvido.

1º tens de receber o valor do php, já recebes ?

2º ver se existe alguma maneira de obter os objetos da jcarroussel

3º verificiar se existe dentro do jcarrousel o valor retornado pelo php

4º se existir procurar a função do jcarrousel para selecionar o objecto.

Quais são os pontos que já estão ?

Contador de calorias: caloriaspordia.com

Posted (edited)

Se eu fizer:

<script>$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent("Portal 1"));</script>

Sim, recebo.

Mas, se eu Substituir o valor 'Portal 1' no código acima pelo value do campo pesquisaPortal que é o campo da caixa de pesquisa ,aí não retorna nada

<script>$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent(document.getElementById('pesquisaPortal').value);</script>
Edited by carcleo
Posted (edited)

Cheguei a montar desse jeito uma função:

function pesquisa(campo)
{
valor=document.getElementById(campo).value;
$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent(valor));
}

Com o HTML

<div id="result"></div>
<div>
   Pesquisa:
  <form name="selecionaPostal" action="">
	 <input type="text" name="pesquisaPortal" id="pesquisaPortal" onkeypress="pesquisa(this.id)" />
   </form>
 </div>

Até que funcionou.

Agora é comparar com o JCarroussel

Podes testar em:

http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/

Edited by carcleo
Posted (edited)

Esse código:

valor=document.getElementById(campo).value;
$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent(valor));

Mais precisamente:

$('#result').

Entrega o resultado da pesquisa à uma div.

Como fazer para marcar uma imagem que possui uma id com o resultado da consulta ao php?

Estou tentando com o código abaixo mas todas dão que existe mesmo não existindo:

function pesquisa(campo)
{
 valor1=document.getElementById(campo);
 valor2='"#'+valor1.value+'"';

 if ( $(valor2) )
 {
   alert(valor2);
   $(valor2).css({ "border": '2px solid #ff0000'});
 } 
}

??

Edited by carcleo
Posted

Esse código:

valor=document.getElementById(campo).value;
$('#result').load('global/funcoes_php/selecionaPortal.php?nome='+encodeURIComponent(valor));

Mais precisamente:

$('#result').

Entrega o resultado da pesquisa à uma div.

Como fazer para marcar uma imagem que possui uma id com o resultado da consulta ao php?

Estou tentando com o código abaixo mas todas dão que existe mesmo não existindo:

function pesquisa(campo)
{
 valor1=document.getElementById(campo);
 valor2='"#'+valor1.value+'"';

 if ( $(valor2) )
 {
alert(valor2);
$(valor2).css({ "border": '2px solid #ff0000'});
 }
}

??

isso está mal, porque o if apenas verifica se o valor é true ou se está definido.

Tens antes de ver se existe algum elemento no DOM com esse ID

function pesquisa(campo)
{
 valor1=document.getElementById(campo);
 valor2='"#'+valor1.value+'"';
 if ( $(valor2).length )
 {
   alert(valor2);
   $(valor2).css({ "border": '2px solid #ff0000'});
 }
}

Contador de calorias: caloriaspordia.com

Posted (edited)

Confere lá fazendo favor.

Não esta funcionando;

http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/

Alterei para:

campo aqui é this na chamada á função
function pesquisa(campo)
{
 valor='"#'+campo.value+'"';
 if ( $(valor).length )
 {  
alert(valor);
$(valor).css({ "border": '2px solid #ff0000'});
 }
}

E ainda não deu!

Edited by carcleo
Posted (edited)

Veja meu código (fonte):

<script type="text/javascript">
$(window).load(function () {
$("#carrossel").jCarouselLite({
btnPrev : '#prev1',
btnNext : '#next1',
auto : 0,
speed : 500,
visible : <?php echo $quantasFotos; ?>
})
})
</script>
<script>
function pesquisa(campo)
{
valor='"#'+campo.value+'"';
if ( $(valor).length )
{
alert(valor);
$(valor).css({ "border": '2px solid #ff0000'});
}
}
</script>
<div id="result"></div>
<div>
Pesquisa: <form name="selecionaPostal" action="">
<input type="text" name="pesquisaPortal" id="pesquisaPortal" onkeyup="pesquisa(this)" />
</form>
</div>

<div><a href="#" class="prev" id="prev1"><img src="img/anterior.png" width="30px" /></a></div>
<div id="carrossel" style="float:left">
<ul>

Note que existe uma imagem com id="Portal 1'.

Mas mesmo assim ela não e marcada

Alguma orientação?

Grato a quem puder ajudar!

Edited by carcleo
Posted

Consegui assim:

<label class="titulos">Portais</label>
<div id="container">
  <?php
    $pesquisaPortaisString ="SELECT id, nome, logo FROM portais ORDER BY nome";
    $pesquisaPortaisQuery=$conexao->Query($pesquisaPortaisString);
    if ($pesquisaPortaisQuery->num_rows==0)
    {
        echo "Ainda não há portais cadastrados!";
    }
    else
    {
if ($pesquisaPortaisQuery->num_rows<=5)
{
$quantasFotos=$pesquisaPortaisQuery->num_rows;
}
else
{
$quantasFotos=5;
}
?>
       <div>
         Pesquisa: <form name="selecionaPostal" action="">
           <input type="text" name="pesquisaPortal" id="pesquisaPortal"/>
         </form>
       </div>

       <div><a href="#" class="prev" id="prev1"><img src="img/anterior.png" width="30px" /></a></div>  
       <div id="carrossel" style="float:left">
         <ul>
         <?php
          while(list($id, $nome, $nomeFoto)=$pesquisaPortaisQuery->fetch_row())
          {
?>
      <li><img src="<?php echo endereco_portais."/".$nomeFoto; ?>" alt="<?php echo $nome; ?>" title="<?php echo $nome; ?>" onclick="javascript:AbreImagemGrande('portaisMostrar.php?id=<?php echo $id; ?>','ImpNot','1100','700')" width="183px" /></li>
      <?php
          }
          ?>
         </ul>
      </div>
      <div><a href="#" class="next" id="next1"><img src="img/proximo.png" width="30px" /></a></div>
    <script type="text/javascript">
       $("#pesquisaPortal").on("keyup", function(){
           //Pesquisa pot title 
           $("[title='" + $(this).val() + "']").css('border', '1px solid red');
       });

       $(window).load(function () {
           $("#carrossel").jCarouselLite({
                 btnPrev : '#prev1',
                 btnNext : '#next1',
                 auto    : 0,
                 speed   : 500,
                 visible : <?php echo $quantasFotos; ?>
           })
      })
      </script>  
    <?php 
}
   ?>
</div>

Mas acontece que este código esta ocorrendo uma falha ainda:

Achado uma imagem e estando ela marcada, se eu apagar alguma letra ou acrescentar mais alguma, o valor do title é mudado e então, aquela imagem já não é a procurada. Obviamente, o que se espera é que o Jquery desmarque. Mas não esta desmarcando não. Ou seja, se acrescentando (ou excluindo) alguma letra na caixa de pesquisa, se existir aquela combinação, então teremos duas imagens marcadas em vez de uma.

Como corrigir isso?

Posted (edited)

Há-de ser algo deste género :

$("#pesquisaPortal").on("keyup", function(){
           // Pesquisa pot title 
           $("[title='" + $(this).val() + "']").css('border', '1px solid red');
           // Desmarcar outras imagens
           $("[title!='" + $(this).val() + "']").css('border', '1px solid #ccc');
       });
Edited by yoda
Posted (edited)

É. mas penso que então será necessário verificar de o campo existe.

Pois deste jeito esta marcando tudo no browser!

Seria alguma coisa do tipo:

if ($("[title!='" + $(this).val() + "']").exists())
{
}

?

Edited by carcleo

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
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.