Help to create an AJAX event

Question

I’m with that HREF down below,

and by clicking on it, I have the return of all products registered in the table "PRODUCTS", using the script:

I need this href to bring me only the products referring to the selected category.

In PHP I use the code below: that works perfect.

The help I need from friends is to convert this code to an Ajax event, so that href works by opening only products for the selected category.

Hugs to all and waiting for tips and solutions.

Answer 1

With jQuery you can simply use the method post to request your *.php file to receive the data from it.

You will have to separate your *.php file and respond to the client-side with some sort of separate string in some way that represents the values of the variables $nome_cat and $img_cat. You can respond to the client-side with JSON and interpret it with the method JSON.parse (if sending strings that include quotes, declare "\\" before the quotation mark, or simply: $value= str_replace('"', '\\"', $value);).

To answer the client-side you declare the echo or printf with some argument string in PHP.

Now, you can use $.post to run the file next to the server and get a response from it in a callback function, success in the first parameter, which occurs when the request is made successively.

$.post({
    /* Coloque os dados de postagem e seus valores no objeto `data` */
    data: {
        codigo: null,
        descricao: null,
        img_prod: null,
        nome_cat: null,
        titulo: null
    },
    success: function(reply) {
        var data = JSON.parse(reply),
            $link = $('.cat-link');

        $link.attr("title", data.nome_cat);

        var catImage = $link[0].getElementsByTagName("img")[0];
        catImage.setAttribute("title", data.nome_cat);
        catImage.src = "img_cate/" + data.img_cat;
    },
    url: "script.php"
});

In PHP, you could respond to the client-side in this way if you use JSON:

echo '{'.
     '"codigo":'.$codigo.
     '"descricao":'.$descricao.
     '"img_prod":'.$img_prod.
     '"nome_cat":'.$nome_cat.
     '"titulo":'.$titulo.
     '}';

With this, you will have to ignore the use of PHP in some cases.

Answer 2

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

Down with 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 I can help other users with the same problem.