Carlos Rocha Posted February 21, 2014 at 11:06 PM Report #546106 Posted February 21, 2014 at 11:06 PM (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 February 21, 2014 at 11:49 PM by carcleo
Carlos Rocha Posted February 22, 2014 at 09:17 AM Author Report #546113 Posted February 22, 2014 at 09:17 AM 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?
Devexz Posted February 22, 2014 at 10:50 AM Report #546116 Posted February 22, 2014 at 10:50 AM isso porque não podes ter uma url com espaços entre os parâmetros, eu vou tomar o pequeno almoço 😄 , e se entretanto ninguém te ajudar, eu ajudo-te Contador de calorias: caloriaspordia.com
Carlos Rocha Posted February 22, 2014 at 11:12 AM Author Report #546118 Posted February 22, 2014 at 11:12 AM (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 February 22, 2014 at 11:22 AM by carcleo
Devexz Posted February 22, 2014 at 11:28 AM Report #546120 Posted February 22, 2014 at 11:28 AM (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 February 22, 2014 at 11:29 AM by Devexz 1 Report Contador de calorias: caloriaspordia.com
Carlos Rocha Posted February 22, 2014 at 11:49 AM Author Report #546123 Posted February 22, 2014 at 11:49 AM (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 February 22, 2014 at 12:11 PM by carcleo
Devexz Posted February 22, 2014 at 12:12 PM Report #546127 Posted February 22, 2014 at 12:12 PM 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
Carlos Rocha Posted February 22, 2014 at 12:25 PM Author Report #546129 Posted February 22, 2014 at 12:25 PM (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 February 22, 2014 at 12:58 PM by carcleo
Devexz Posted February 22, 2014 at 12:56 PM Report #546131 Posted February 22, 2014 at 12:56 PM já tentaste ver o valor do document.getElementById('pesquisaPortal').value faz um alert para ver, e se meteres "Portal 1" na pesquisa, também não dá? Contador de calorias: caloriaspordia.com
Carlos Rocha Posted February 22, 2014 at 12:59 PM Author Report #546132 Posted February 22, 2014 at 12:59 PM (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 February 22, 2014 at 01:10 PM by carcleo
Carlos Rocha Posted February 22, 2014 at 01:14 PM Author Report #546133 Posted February 22, 2014 at 01:14 PM (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 February 22, 2014 at 02:24 PM by carcleo
Devexz Posted February 22, 2014 at 03:15 PM Report #546138 Posted February 22, 2014 at 03:15 PM 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
Carlos Rocha Posted February 22, 2014 at 08:25 PM Author Report #546196 Posted February 22, 2014 at 08:25 PM (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 February 22, 2014 at 08:59 PM by carcleo
Carlos Rocha Posted February 22, 2014 at 09:38 PM Author Report #546228 Posted February 22, 2014 at 09:38 PM (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 February 23, 2014 at 11:36 AM by carcleo
Carlos Rocha Posted February 24, 2014 at 03:01 PM Author Report #546478 Posted February 24, 2014 at 03:01 PM 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?
yoda Posted February 24, 2014 at 03:52 PM Report #546488 Posted February 24, 2014 at 03:52 PM (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 February 24, 2014 at 03:53 PM by yoda before you post, what have you tried? - http://filipematias.info sense, purpose, direction
Carlos Rocha Posted February 24, 2014 at 04:05 PM Author Report #546489 Posted February 24, 2014 at 04:05 PM (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 February 24, 2014 at 04:21 PM by carcleo
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now