Ajax

[Carcleo 4]

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?

[William Bruno 1501]

Não é bem isso que vc tá achando não cara..

 

vc precisa esperar o ajax retornar. Use o evento onreadystatechange para isso.

[Carcleo 4]

Como e onde?

Seria:

if(ajax) 

{

  ajax.open("POST", "global/funcoes_php/selecionaPortal.php", true);   

  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  ajax.onreadystatechange = function() 

  {

                 f(ajax.readyState == 4 ) 

{

      if(ajax.responseXML) 

  {

         processXMLCidades(ajax.responseXML, campo);

  }

    }

  }


  var params = "nome="+campo;

  ajax.send("nome="+params);

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?

[William Bruno 1501]

sem as aspas

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

[Carcleo 4]

<div id="result"></div>

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

Não retorna nada.

Parece que ele fica procurando por uma página com o nome completo: global/funcoes_php/selecionaPortal.php?nome=Portal 1

E não, acha a página: global/funcoes_php/selecionaPortal.php, e passa o parâmetro?nome=Portal 1

[William Bruno 1501]

Acompanhe no console oque acontece com a requisição:

 

http://wbruno.com.br/ajax/como-debugar-ajax-firebug/

[Carcleo 4]

console:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js:3

Invalid App Id: Must be a number or numeric string representing the application id. all.js:56

FB.getLoginStatus() called before calling FB.init(). all.js:56

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.

[Carcleo 4]

Experimentei criar uma div para obter retorno

Cheguei a montar desse jeito uma função:

function pesquisa(campo)
{
valor=document.getElementById(campo).value;
alert(valor);
$('#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.
Mas o alert só dá as letras uma atrasada em relação à outra.
Exemplo: digitei P, o alert retorna vazio, digitei o, o alert retorna o P e assim por diante.
Sendo assim, para haver comparação, será necessário digitar alguma coisa depois.

Podes testar em:

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

 

 

 

Troquei para onkeyup e funcionou.

 

 

 

Agora é comparar com o JCarroussel

 

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;
  valor3="'#"+valor2+"'";
  
  if ( $(valor3) )
  {
    alert('Existe');
    $(valor3).css({ "border": '2px solid #ff0000'});
  }
}

[Carcleo 4]

Alterei para:

 

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

Continua dando erro

[William Bruno 1501]

Pq vc tá usando ajax ?

 

se o que vc quer já está no html, não tem nenhum motivo para vc ir no servidor e voltar.

 

faz tudo no javascript.

[Carcleo 4]

Notou que passei a usar jquery?

 

É nele que esta o problema agora.

 

Para qualquer id do documento, o codigo acima diz que existe o elemento.

 

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!

[Carcleo 4]

Veja meu código (fonte):

 

 

<div id="container">
    <script type="text/javascript">
          $(window).load(function () {
              $("#carrossel").jCarouselLite({
                    btnPrev : '#prev1',
                    btnNext : '#next1',
                    auto    : 0,
                    speed   : 500,
                    visible : 1              })
        })
        </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>
                 <li><img  id="Portal 1" src="img/home/portais/7576f83c10976b2df8288191660a7bfa.gif" alt="Portal 1" title="Portal 1" onclick="javascript:AbreImagemGrande('portaisMostrar.php?id=1','ImpNot','1100','700')" width="183px" /></li>
                 </ul>
       </div>
       <div><a href="#" class="next" id="next1"><img src="img/proximo.png" width="30px" /></a></div>
     </div>

[William Bruno 1501]

troca:

valor='"#'+campo.value+'"';

por:

valor='#'+campo.value;

[Carcleo 4]

Mas isso geraria algo do tipo

 

#Portal 1

 

O correto não seria entre aspas duplas conforme abaixo?

 

"#Portal 1"

[William Bruno 1501]

Nops.

 

O correto é uma string contendo #Portal 1, e não uma string com ""#Portal 1"" que é o que vc tá fazendo.

[Carcleo 4]

Bruno, veja:

<div id="container">
    <script type="text/javascript">
          $(window).load(function () {
              $("#carrossel").jCarouselLite({
                    btnPrev : '#prev1',
                    btnNext : '#next1',
                    auto    : 0,
                    speed   : 500,
                    visible : 1              })
        })
        </script>  

Veja:

 

$("#carrossel")

Esse código funciona.

 

Note que #carroussel esta entre aspas duplas.

 

Não é assim não? Fiquei na dúvida agora!

 

Obs.: Desculpa a exibição dos código fora da caixa mas é que se coloco code, o resto do texto abaixo dele esta sumindo.

[William Bruno 1501]

Não cara.. vamos lá:

 

qndo vc coloca aspas, vc está indicando que aquilo é uma string, ok ?

var foo = 'tal';
console.log(typeof foo, foo);

vc verá que o tipo é String, e o valor é: tal

 

qndo vc faz:

var foo = '"tal"';
console.log(typeof foo, foo);

vc continua com uma string, só que o valor dela passa a ser "tal", e não mais tal que é o correto.

 

Deu pra entender ?

 

oq vc está fazendo é colocar aspas dentro de aspas, ai vai procurar o elemento

id=""carrossel""

oque não existe e nem faz sentido.

[Carcleo 4]

Obrigado por adicionar code ao post anterior.

Sim. Entendi sua explicaçao.

Mas, veja só:

Quando eu faço:

valor='"#'+campo.value+'"';

E mando

alert(valor)

A saida do navegador é:

"$Portal 1"

Quando faço:

if ( $(valor) )

Como o valor da variavel valor é

"$Portal 1"

Logo, o que imprime no lugar da variavel valor seria:

if ( $("$Portal 1") )

Comparando com:

$("#carrossel")

Esta correto. Não esta não?

Chegou a olhar em:

http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/?pesquisaPortal=Portal+1

O comportamento?

[William Bruno 1501]

Não, está errado.

 

O certo é:

valor='#'+campo.value;

Ah, e IDs não podem ter espaços. Isso torna o atributo inválido.

[Carcleo 4]

O Correto então seria assim?

 

<script>
        function pesquisa(campo)
        {
          valor='#'+campo.value;
          if ( $(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>
          <?php
           while(list($id, $nome, $nomeFoto)=$pesquisaPortaisQuery->fetch_row())
           {
?>
       <li><img id="<?php echo str_replace(' ','', $nome); ?>" 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>

 

O único id que tenho é 'Portal 1'. Com o str_replace, ficou Portal1.

 

Busquei por Portal1 e não encontrei.

 

Já atualizei no site