How to create a request via GET

Question

This attribute below is working with href, and directing me to the desired page.

<a href="prod_detalhe_5.php?codigo=<?php echo $res['codigo']; ?>">
    <img src="img_produtos/<?php echo $res['img01']; ?>" />
</a>

I’d like to use a REQUISITION to open the selected item in a DIV with the Class by name visual so there is no refresh on the page.

I tried to create the attribute with the script below but without success, because when I click on the link nothing happens, it does not direct me to the page prod_details_5.php with the product data and does not inform me any kind of error, gets totally static.

<a class="detalhe" style="cursor:pointer;" id="<?php echo $res['codigo']; ?>">
    <img style="width:100%; max-width:100px;" src="img_produtos/<?php echo $res['img01']; ?>" />
</a>

<script language="javascript">
$(document).ready(function(){
    $('.detalhe').click(function(){
        var cod = $(this).attr('id');
        $.ajax({
            url:'prod_detalhe_5.php?codigo='+cod,success:function(data){
            $('#visual').html(data);
            }
        });
    });
});
</script>

With attribute data working with href, friends can show me where I’m going wrong in the script, or even give me a hint of how I should proceed to make it possible for me to open the prod_details_5.php with product data using a AJAX REQUEST to avoid refreshing the page.

Thank you in advance for your attention to my problem.

Answer 1

If it’s just a link you can use an id instead of a class, and you can also use the data attribute, see an example.

 <a id="detalhes" style="cursor:pointer;" data-id="<?php echo $res['codigo']; ?>">
    <img style="width:100%; max-width:100px;" src="img_produtos/<?php echo $res['img01']; ?>" />
</a>

<script language="javascript">
$(document).ready(function(){
    $('#detalhes').click(function(){
        var cod = $(this).attr('data-id');
        $.ajax({
            url:'prod_detalhe_5.php?codigo='+cod,success:function(data){
            $('#visual').html(data);
            }
        });
    });
});
</script>

I hope it helps you.