Carregar consulta na mesma pagina.

mzaidan · Abril 1, 2015

Prezados, possuo um codigo onde eu vou digitando e vai fazendo consulta no banco de dados.

Quando eu acho uma mensagem, eu clico nesse resultado e ele busca exatamente o que eu queria, mostrando logo abaixo.

Só que eu estava carregando na pagina.

Tem como ser com ajax?



<script type="text/javascript">

$(function(){

$(".search").keyup(function() 

{ 

var searchid = $(this).val();

var dataString = 'search='+ searchid;

if(searchid!='')

{

	$.ajax({

	type: "POST",

	url: "search.php",

	data: dataString,

	cache: false,

	success: function(html)

	{

	$("#result").html(html).show();

	}

	});

}return false;    

});



jQuery("#result").live("click",function(e){ 

	var $clicked = $(e.target);

	var $name = $clicked.find('.name').html();

	var decoded = $("<div/>").html($name).text();

	$('#searchid').val(decoded);

});

jQuery(document).live("click", function(e) { 

	var $clicked = $(e.target);

	if (! $clicked.hasClass("search")){

	jQuery("#result").fadeOut(); 

	}

});

$('#searchid').click(function(){

	jQuery("#result").fadeIn();

});

});


function ativar() {

    event.target.parentNode.classList.add('ativado');

}

function desativar() {

    event.target.parentNode.classList.remove('ativado');

}


</script>


<div class="content">


 <img src="por-ing.fw.png"><br>

  <input type="text" class="search" class="input" id="searchid" placeholder="Digite em inglês ou português" />


 <div align="justify" id="result">


 </div>

 <div class="conteudo">


<?

if($_GET){

  include('db.php');

  $arquivo = $_GET['phrasal'];

  $sql_res=mysql_query("select * from phrasal where ingles='$arquivo'");


  while($row=mysql_fetch_array($sql_res)){

   $ingles=$row['ingles'];

   $portugues=$row['portugues'];

   $exemplo = $row['exemplo'];

  }


  echo "<br><br><table border='0' width='95%' class='sample1'><tr><td align='center' bgcolor='#a4a4a4'><font color='#00000'>Dicionário de Phrasal Verbs</font></td></tr><tr><td>";

  echo " <b><font color='#4682B4' size='4'>".$ingles."</font></b><br>";

  echo "<b>Tradução:</b> <font size='2'>".$portugues."</font><br>";

  echo "<b>Exemplo:</b> <font size='2'>".$exemplo."</font><br>";

  echo "</td></tr><tr><td bgcolor='#4a4a4a' align='right'>English Group - Todos os direitos reservados</td></tr></table>";

}

?>

</td>

</div>

Ta dando td certinho, só que ta carregando a pagina.

Queria que fosse com ajax.

ç

(RNU) Ruan Silva · Abril 1, 2015

talvez isso sirva... http://lucasmoreira.com.br/2013/06/23/usar-jquery-ajax-e-php-para-atualizar-div-sem-refresh/

mzaidan · Abril 1, 2015

Cara, tentei aqui isso:

<script>
function alterar_div() {
  $.ajax({
    type: "GET",
    url: "phrasal.php",
    data: {
      nome_usuario: $('#searchid').val()
    },
    success: function(data) {
      $('#conteudo').html(data);
    }
  });
}
</script>

phrasal.php:

<span class="name" onclick="alterar_div()"><font size="3"><?php echo $final_username; ?></font></span> <br/>
<b>Tradução:</b> <?php echo $final_email; ?><br/>
</div>
<?php
}
}


$nome_usuario = $_GET['nome_usuario'];
echo $nome_usuario;

Deu em nada.

Como eu não sei "ovo" em ajax, tem como vc dizer qual meu erro?

Grato.

(RNU) Ruan Silva · Abril 1, 2015

vc carregou o jquery na sua pagina HTML?

jgustavo99 · Abril 1, 2015

Olá! Então como nosso amigo citou, você carregou o jQuery? Se sim, depois do sucess coloque o error:

 success: function(data) {
      $('#conteudo').html(data);
 },
 error:function(data){
  alert("erro no ajax");
 }

mzaidan · Abril 1, 2015

Resolvi utilizar o codigo do willian bruno:

http://wbruno.com.br/ajax/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

index.php:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var content = $('#content');
 
		//pre carregando o gif
		loading = new Image(); loading.src = 'loading.gif';
		$('#menu a').live('click', function( e ){
			e.preventDefault();
			content.html( '<img src="loading.gif" />' );
 
			var href = $( this ).attr('href');
			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var data = $( '<div>'+response+'</div>' ).find('#content').html();
 
					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();
						});
					}, 500 );
				}
			});
 
		});
	});
	</script>
</head>
<body>
	<ul id="menu">
		<li><a href="teste.php">Home</a></li>
	</ul><!-- /menu -->
	<div id="content">
		<h1>Bem Vindo!</h1>
		<p>Essa eh a home desse nome pseudo-site.</p>
	</div><!-- /content -->
</body>
</html>

teste.php:

<?
echo "testando..";
    
?>

Mas não deu certo.

Pq será?

(RNU) Ruan Silva · Abril 1, 2015

o exemplo que te mandei:

tags html com o javascript

<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
       function alterar_div() {
           $.ajax({
           type: "POST",
           url: "alteradiv.php",
           data: 
           {
               nome_usuario: $('#seu_nome').val()
           },
           success: function(data) {
           $('#conteudo').html(data);
           }
           });
        }
	</script>
</head>

formulario que o usuario digita o nome, no seu caso seria seu campo de busca;

<body>
<div id="conteudo">Este conteúdo será alterado</div>
Qual é seu nome? <input type="text" id="seu_nome">
 
<button type="button" onclick="alterar_div()">Alterar</button>

e por fim, a div a ser alterada:

<?php
if(isset($_POST['nome_usuario']))
{
    $nome_usuario = $_POST['nome_usuario'];
 
    // Faz o processamento no banco de dados.
    // Insere, apaga ou modifica.
    // Aqui pode ser feito qualquer processamento,
    // não apenas em banco.
 
    echo 'Este conteúdo foi alterado por '.$nome_usuario;
}
?>

mzaidan · Abril 1, 2015

Certo. Deu certo aqui.

Vou tentar adptar ao meu script e ja volto para dizer se deu certo ou não.

Valeu.

Cara, deu quase certo.

Adptando para meu codigo, não ta carregando na mesma pagina, pq sera??

Ta dando erro.

Vamos ao meu codigo:

index.php:

<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
	$.ajax({
	type: "POST",
	url: "search.php",
	data: dataString,
	cache: false,
	success: function(html)
	{
	$("#result").html(html).show();
	}
	});
}return false;    
});


jQuery("#result").live("click",function(e){ 
	var $clicked = $(e.target);
	var $name = $clicked.find('.name').html();
	var decoded = $("<div/>").html($name).text();
	$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
	var $clicked = $(e.target);
	if (! $clicked.hasClass("search")){
	jQuery("#result").fadeOut(); 
	}
});
$('#searchid').click(function(){
	jQuery("#result").fadeIn();
});
});

function ativar() {
    event.target.parentNode.classList.add('ativado');
}
function desativar() {
    event.target.parentNode.classList.remove('ativado');
}

function alterar_div() {
           $.ajax({
           type: "POST",
           url: "alteradiv.php",
           data: 
           {
               nome_usuario: $('#seu_nome').val()
           },
           success: function(data) {
           $('#conteudo').html(data);
           }
           });
        }
</script>

<div class="content">

 <img src="por-ing.fw.png"><br>
  <input type="text" class="search" class="input" id="searchid" placeholder="Digite em inglês ou português" />

 <div align="justify" id="result">

 </div>

 </body>
 </html>


    <div class="conteudo">


<?
if($_GET){
  include('db.php');
  $arquivo = $_GET['phrasal'];
  $sql_res=mysql_query("select * from phrasal where ingles='$arquivo'");

  while($row=mysql_fetch_array($sql_res)){
   $ingles=$row['ingles'];
   $portugues=$row['portugues'];
   $exemplo = $row['exemplo'];
  }

  echo "<br><br><table border='0' width='95%' class='sample1'><tr><td align='center' bgcolor='#a4a4a4'><font color='#00000'>Dicionário de Phrasal Verbs</font></td></tr><tr><td>";
  echo " <b><font color='#4682B4' size='4'>".$ingles."</font></b><br>";
  echo "<b>Tradução:</b> <font size='2'>".$portugues."</font><br>";
  echo "<b>Exemplo:</b> <font size='2'>".$exemplo."</font><br>";
  echo "</td></tr><tr><td bgcolor='#4a4a4a' align='right'>English Group - Todos os direitos reservados</td></tr></table>";
}
?>

Um input, onde à medida em que vai sendo digitado, vai carregando os dados.

search.php

<?php
include('db.php');
$pg = "index.php?phrasal=";
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select * from phrasal where ingles like '%$q%' or portugues like '%$q%' order by id LIMIT 4");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['ingles'];
$email=$row['portugues'];
$b_username='<strong><font color="#ff0000">'.$q.'</font></strong>';
$b_email='<strong><font color="#0000ff">'.$q.'</font></strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
$link = $final_username;
$exemplo = $row['exemplo'];
?>



<div class="show" align="justify">



<? echo "<a href='".$pg.$username."'>"; ?>

<span class="name" onclick="hide()"><font size="3"><?php echo $final_username; ?></font></span> <br/>
<b>Tradução:</b> <?php echo $final_email; ?><br/>
</div>
<?php
}
}

?>

phrasal.php:

<?
include('db.php');
    $arquivo = $_GET['phrasal'];
$sql_res=mysql_query("select * from phrasal where ingles='$arquivo'");

while($row=mysql_fetch_array($sql_res))
{
$ingles=$row['ingles'];
$portugues=$row['portugues'];
$exemplo = $row['exemplo'];
}

echo $ingles."<br>";
echo $portugues."<br>";
echo $exemplo."<br>";
?>

Tentei implementar nesse codigo ai, mas nao deu.

Dellacurtais · Abril 1, 2015

Tem uma extensão para alguns Navegadores chrome, firefox, enfim.. Chamada Firebug LITE, vc pode encontrar ela no Webstore do google chrome... Ao ativar ela, vc podera ver as requisições em ajax q estão sendo feitas, e analisar se ta ocorrendo tudo certinho, no proprio google chrome tb tem Ferramentas para Desenvolvedor, na opção console vc pode obter algumas lista de erros que pode esta ocorrendo!

Enfim tenha boa Tarde/Noite/Dia kkk!

(RNU) Ruan Silva · Abril 1, 2015

qual é a pagina que deve ficar ? no index? Aquele exemplo que te mostrei, tudo esta na mesma pagina...

o form, que no seu caso é o campo de busca; o ajax que vai trabalhar em cima desse form e uma div (que deve estar abaixo do form, provavelmente) que vai apresentar os dados a medida que a consulta for acionada.

mzaidan · Abril 2, 2015

É cara, mas por alguma besteira minha, ta dando refresh da mesma forma.

Vou ter que estudar mais Ajax, pq o que parece simples, pra mim ainda é complicado.

Vou ficar fuçando, se conseguir aviso.

De qualquer forma, valeu. :joia:

Arquivado

Carregar consulta na mesma pagina.

Recommended Posts

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

(RNU) Ruan Silva 61

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

(RNU) Ruan Silva 61

Compartilhar este post

Link para o post

Compartilhar em outros sites

jgustavo99 85

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

(RNU) Ruan Silva 61

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dellacurtais 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

(RNU) Ruan Silva 61

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Ler campos com caracteres especiais no xml

Fóruns

Tempo Real

Informação importante