How to create an event for href="javascript: void (0);" onclick="? ();"

Question

How to create an event for href="javascript: void (0);" onclick="? ();"

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

By visiting the link address, you can check that I can bring and view the two categories listed in the "CATEGORY" table in the BD ( Image below),

ButIwouldlikethatwhenoneofthecategoriesisselected,onlytheproductsthatarerelatedtotheselectedcategorywillbeshown,registeredinthe"PRODUCTS" table in the BD (Image below).

Todirectthemtotheproductsforthedesiredcategory,ItriedusingaPHPcommand(Imagebelow),

TobringtheresultIused(ImageBelow)

Thinkingthatwouldsolve(Pureillusionandpretenseonmypart)...Rsrsrsrs...

Butasyoucansee,whenIclickonanyofthetwocategories,itbringsmealltheproductsregisteredinthe"PRODUCTS" table in the DB.

By doing a search on the Network, I discovered that maybe the solution is to create an event for you to use with javascript: void (0) . But I'm totally lay in JavaScript, and I need the help of friends to create such an event.

For this I am posting below the codes used so far:

Page listing the categories:

    <!-- 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; margin-left:-300px; 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>
<!-- Listando os Produtos por Categoria -->
<?php include "pag_lista_produtos.php"; ?>                  
    </div>
</div>
<?php
}
?>

Page listing the Products for Selected Categories:

    <!-- Listando os produtos referente a Categorias selecionada -->
<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$img_prod = $_POST['img_prod'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$mome_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>

            <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
}
?>

JavaScript related to the pages posted here.

jQuery(".cat-link").click(function(){
    jQuery(this).parent().find(".single-cat").fadeIn();
});

jQuery(".song-link").click(function(){
    jQuery(this).parent().find(".single-song").fadeIn();
    jQuery(".single-song .entry").jScrollPane();
});

I look forward to good tips and solutions to my problem, and thanking everyone for their attention.

php javascript

asked by anonymous 09.07.2016 / 14:53

2 answers

2

You do not need JavaScript to do this, your error is trying to use JS where you do not need it. This should work (assuming your file listing the products is called produtos.php ):

<a class="cat-link" href="produtos.php?nome_cat=<?php echo $res['nome_cat']; ?>">

However, there are some other issues in your code.

Relationship between tables using the category name instead of the code. The correct thing would be to have the category code in the product table, and use a JOIN in the query to get both the product data and the selected category name. See this question for details on how the joins work.

You are using an outdated driver to access the database, mysql_* . The recommended is to use mysqli or PDO. See here and here for more details.

Using mysqli or PDO, you can use # to avoid a SQL injection vulnerability present in your current code. Read the contents of this link for details. Basically, it is not recommended to interpolate in your query data that comes from the user, as you are doing in ... WHERE nome_cat = '$nome_cat' .

09.07.2016 / 16:14

Perform a function while loading the page, JavaScript and Angular how to set space between buttons on Android?

score 0 · Accepted Answer

With the help of our friend @Givanildo R. de Oliveira, we were able to solve the problem and only bring the products related to the selected Category.

Below the working code:

<?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>

I hope you can help other users with the same problem.