0

Estou com esse código abaixo,

<?php include "conexao.php"; ?>
<div id="produtos-content">
<!-- Listando os Categorias -->
    <?php
    $nome_cat = $_POST['nome_cat'];
    $img_cat = $_POST['img_cat'];
    $query_categoria = mysql_query("SELECT * FROM categoria");
    while($res = mysql_fetch_array($query_categoria)){
    ?>
   <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
            <a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">
                <img style="position:relative; top:50%; transform:translateY(-50%);"
                src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
                title="<?php echo $res['nome_cat']; ?>" />
            </a>
            <div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px;" class="single-cat">
                <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
                <div style="margin-left:357px;width:50px;" class="cat-links">
                    <a class="close-btn" href="javascript:;" title="Voltar">
                        <img src="img/fechar.jpg" />
                    </a>
                </div>
    <?php
    $codigo = $_POST['codigo'];
    $img_prod = $_POST['img_prod'];
    $titulo = $_POST['titulo'];
    $descricao = $_POST['descricao'];
    $nome_cat = $_POST['nome_cat'];
    $query_produtos = mysql_query("SELECT * FROM produtos") or die(mysql_error());
    while($res = mysql_fetch_array($query_produtos)){
        ?>
        <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
        <a class="song-link" href="javascript:;" title="">
            <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" />
            </a>

            <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
            <div style="width:50px;margin-left:300px;" class="song-links">
                <a class="close-btn" href="javascript:;" title="Voltar">
                    <img src="img/fechar.jpg" />
                </a>
                    <div class="song-sides">
                        <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
                    </div>
                </div>
                <h1> <?php echo $res['titulo']; ?> </h1>
                <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
                <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
                <?php echo nl2br($res['descricao']); ?>
                </p>
                <div class="jspContainer" style="width: 100px; height: auto;">
                <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
                </div></div>
                </div>
                <span class="song-sides left-side"></span>
            </div>
        </div>
    <?php } ?>
            </div>
        </div>
        <?php
        }
        ?>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".single-cat .close-btn").click(function(){
        jQuery(this).parent().parent().fadeOut();
    });

    jQuery(".single-song .close-btn").click(function(){
        jQuery(this).parent().parent().fadeOut();
    });
 });
 </script>

e precisando da ajuda dos amigos para fazer o href="javascript:;" da DIV id="cats-list", trazer somente os produtos referente a Categoria selecionada, abrindo-os na DIV id="songs-list".

No momento ao clicar em qualquer uma das duas categorias cadastradas, me traz todos os produtos cadastrados na tabela "PRODUTOS".

Já tentei usar o código abaixo (Que funciona perfeito em PHP),

<?php
include "conexao.php";
$nome_cat = $_GET['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos WHERE nome_cat = '$nome_cat'") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){

$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
?>

para buscar somente os produtos referentes a categoria selecionada e enviada via GET na DIV id="songs-list", mas sem sucesso.

Acredito que tenha que criar um evento para essa function, mas sou muito leigo em JavaScript, e conto com a ajuda dos amigos se possível.

Problema resolvido com o código abaixo:

Com a ajuda do amigo @Givanildo R. de Oliveira, conseguimos solucionar o problema e trazer somente os produtos referentes a Categoria selecionada.

Abaixo o código funcionando:

<?php include "conexao.php"; ?>

<div id="produtos" class="sections full-width-wrapper bg_4">
    <div class="centered-wrapper">

        <div class="section-header">
            <?php include 'menu_pags.php';?>            
        </div>

<div id="produtos-content">

    <!-- Listando os Categorias -->
    <?php
    $nome_cat = $_POST['nome_cat'];
    $img_cat = $_POST['img_cat'];
    $query_categoria = mysql_query("SELECT * FROM categoria");
    while($res = mysql_fetch_array($query_categoria)){
    ?>
    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
        <a class="cat-link" href="?nome_cat=<?php echo $res['nome_cat']; ?>#produtos" title="<?php echo $res['nome_cat']; ?>">
        <img style="position:relative; top:50%; transform:translateY(-50%);"
            src="img_cate/<?php echo $res['img_cat']; ?>" width="100"
            title="<?php echo $res['nome_cat']; ?>" />
        </a>
        <div style="background:#2f2140; ; width:880px;z-index:999;border-radius:25px; <?php echo $res['nome_cat']==$_GET['nome_cat'] ? 'display:block;' : ''; ?>" class="single-cat">
            <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
            <div style="margin-left:357px;width:50px;" class="cat-links">
                <a class="close-btn" href="javascript:;" title="Voltar">
                    <img src="img/fechar.jpg" />
                </a>
            </div>

<!-- Listando os produtos -->
<?php
$nome_cat = $_GET['nome_cat'];
$query_produtos = mysql_query("SELECT * FROM produtos WHERE nome_cat = '$nome_cat'") or die(mysql_error());
while($res = mysql_fetch_array($query_produtos)){

$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$nome_cat = $_POST['nome_cat'];
?>

    <div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
            <a class="song-link" href="javascript:;" title="">
            <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['img_prod']; ?>" width="100" title="<?php echo $res['titulo']; ?>" /></a>

        <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
            <div style="width:50px;margin-left:300px;" class="song-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
                <div class="song-sides">
                    <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['img_prod']; ?>" width="369" />
                </div>
            </div>

            <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

            <h1> <?php echo $res['titulo']; ?> </h1>
            <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px;">
            <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
            <?php echo nl2br($res['descricao']); ?>
            </p>
            <div class="jspContainer" style="width: 100px; height: auto;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
            </div></div></div>
            <span class="song-sides left-side"></span>
        </div>
    </div>
<?php
}
?>

        </div>
    </div>
    <?php
    }
    ?>
</div>

</div></div></div>

Espero que possa ajudar a outros usuários com o mesmo problema.

2
  • OK @Bacco, realmente eu já fiz uma pergunta sobre esse assunto, porém não obtive uma resposta que solucionasse ou mesmo me ajudasse a solucionar o problema, então se você puder responde-la ficarei muito grato. Commented 13/07/2016 às 11:27
  • 1
    Na verdade você está fazendo uma série delas. Para que a comunidade consiga te ajudar, é importante você dar uma atenção maior aos comentários e às perguntas que os outros colegas fazem para entender melhor seu problema. Fazer várias perguntas não vai te ajudar, se concentrar em elaborar melhor uma, dá maior chance de sucesso. Fica a sugestão de se prender menos ao código que já tem, e explicar melhor nas perguntas o efeito a ser obtido (talvez com exemplos) pra não cair num Problema XY. O código é mera consequência.
    – Largato
    Commented 13/07/2016 às 15:35

0

Pesquise outras perguntas com a tag .