Help with Ajax and FORM Requests

Question

I am using the form below to make the consultation by products...

<form action="prod_index_consulta.php" enctype="multipart/form-data" name="busca" method="post">
    <span>Busca Avançada</span>
    <a class="search" id="<?php echo $res['titulo'];?>" style="cursor:pointer;"><img src="img/search.gif" /></a>
    <input style="width:100%;" size="23" type="text" value="" name="buscar"/>
</form>

And using this code below on the "prod_index_query.php" page to return the result of the query...

<?php
include "conexao.php";

$buscar = $_GET['buscar'];  
$sql = $pdo->prepare("SELECT * FROM pagcabecalho, menu, produto WHERE titulo LIKE '%$buscar%'");
$sql->execute();
foreach($sql->fetchAll() as $res){

echo'
    <div id="prod" style="background-color:'.$res["fundosite_cor"].';width:33%; float:left; padding:10px 0;" class="center_prod_box">
        <div align="center" id="titulo" style="width:100%;">
            '.$res["titulo"].'
        </div>
        <div align="center" style="width:100%; height:130px; background-color:'.$res["fundosite_cor"].';">
            <div align="center">
                <a href="prod_detalhe_5.php?codigo='.$res["codigo"].'">
                    <img style="width:100%; max-width:100px;" src="img_produtos/'.$res["img01"].'" />
                </a>
            </div>
        </div>
        <div align="center" id="preco" style="width:100%;">
            <span style="">R$ '.$res["preco"].'</span>
        </div>                        
        <div align="center" id="carrinho" style="width:100%;">
            <a href="prod_carrinho.php?acao=add&codigo='.$res["codigo"].'">
                <img style="width:100%; max-width:20px;" src="img/carrinho.png" title="Por no Carrinho" />
            </a>
        </div>                        
     </div>
';
}?>

And I tried to use the Request SCRIPT as follows, but without success...

<script language="javascript">
////// Link para visualizar o produto quando consultado pelo titulo /////
$(document).ready(function(){
    $('.search').click(function(){
        var cod = $(this).attr('id');
        $.ajax({url:"prod_index_consulta.php?buscar="+cod,success:function(data){
            $('#visual').html(data);
            }
        });
    });
});
</script>

If anyone can help me so that I can bring the result of the consultation into the '#visual' DIV, I would be most grateful.

Answer 1

Let’s make some changes to the $.ajax():

$.ajax({
    url:"prod_index_consulta.php?buscar="+cod,
    dataType:'Json',
    success:function(data){
        $('#visual').html('');
        $.each(data,function(key,value){
            $('#visual').append(value);
        });
    }
});

And in the PHP:

<?php
    include "conexao.php";
    $buscar = $_GET['buscar']; 
    $sql=$pdo->prepare("SELECT * FROM pagcabecalho, menu, produto WHERE titulo LIKE '%$buscar%'");
    $sql->execute();
    foreach($sql->fetchAll() as $res){
        $return[]='
        <div id="prod">
            <div align="center" id="titulo" style="width:100%;">
                '.$res['titulo'].'
            </div>
            <div align="center" style="width:100%; height:130px; background-color:'.$res['fundosite_cor'].';">
                <div align="center">
                    <a href="prod_detalhe_5.php?codigo='.$res['codigo'].'">
                        <img style="width:100%; max-width:100px;" src="img_produtos/'.$res['img01'].'" />
                    </a>
                </div>
            </div>
            <div align="center" id="preco" style="width:100%;">
                <span style="">R$ '.$res['preco'].'</span>
            </div>
            <div align="center" id="carrinho" style="width:100%;">
                <a href="prod_carrinho.php?acao=add&codigo='.$res['codigo'].'">
                    <img style="width:100%; max-width:20px;" src="img/carrinho.png" title="Por no Carrinho" />
                </a>
            </div>
        </div>'; 
    }
    echo json_encode($return);
?>