Call the Jquery function

Asked

Viewed 1,518 times

2

I am developing a shopping cart, I am wanting to put an element inside a DIV, this element has a function Jquery that is not working your call(function to remove products from the cart).

$('.add_produto').click(function(){
       $.ajax({
           url: CI_ROOT + "frontend/site/add_produto",
           data: {
              id:$(this).attr("idproduto"),
          },
        dataType: "json",
        type: "POST",
        success: function(data){
            var verifica = $('.recebe_produto #'+data.produto.id_produto+'').html();

            $('.carrinho_vazio').remove();
            if (verifica == undefined) {

                var html =  '<div class="produtos_carrinho" id="'+data.produto.id_produto+'">'
                        +'<div class="imagem_carrinho"><img src="'+CI_ROOT+'img/'+data.produto.foto+'" style="margin-top:5px;"></div>'
                        +'<div class="carrinho_excluir">'
                            +'<a href="#" title="Alterar quantidade"><i class="icon-pencil"></i></a>'
                            +'<a style="cursor:pointer;" class="remove_produto" idproduto='+data.produto.id_produto+' qnt='+data.id_qnt+' title="Remover produto"><i class="icon-remove"></i></a>'
                        +'</div>'
                        +'<div class="descricao_carrinho">'
                           +' <font color="#A02D34">'+data.produto.nome+'</font><br>'
                            +' <span class="qnt">'+data.id_qnt+'</span> un - R$ <span class="valor">'+data.valor+'</span>'
                        +'</div>'
                        +'</div>'
                        $('.recebe_produto').append(html);
                        remove_produto();                        

            }else{

                $('#'+data.produto.id_produto+' .qnt').html(data.id_qnt);
                $('#'+data.produto.id_produto+' .valor').html(data.valor);
                $('#'+data.produto.id_produto+' .remove_produto').replaceWith('<a style="cursor:pointer;" class="remove_produto" idproduto='+data.produto.id_produto+' qnt='+data.id_qnt+' title="Remover produto"><i class="icon-remove"></i></a>');

            }
            var verifica_valor = $('.recebe_valor').html();

                        if (verifica_valor == "") {
                            var valor = '<div class="valor_carrinho">'
                            +'<div class="preco_carrinho">'
                                +'R$ <span class="total_produtos">'+data.valor_total+'</span><br>'
                                +'R$ 5,00<br>'
                                +'R$ <span class="total_carrinho">'+data.valor_total+'</span>'
                            +'</div>'
                                +'Total produtos <br>'
                                +'Taxa entrega <br>'
                                +'<b>TOTAL GERAL</b>'

                        +'</div>';
                        $('.recebe_valor').append(valor);

                    }else{

                        $('<span class="total_produtos">'+data.valor_total+'</span>').replaceAll('.total_produtos');
                        $('<span class="total_carrinho">'+data.valor_total+'</span>').replaceAll('.total_carrinho');   
                    }
        }   
    });
});
function remove_produto(){
     $('.remove_produto').click(function(){
        var id = $(this).attr("idproduto");
        var qnt = $(this).attr("qnt");
        $.ajax({
            url: CI_ROOT + "frontend/site/remover_produto",
            data: {
                id:id,
                qnt:qnt,
            },
            dataType: "json",
            type: "POST",
            success: function(data){

                if (data.id_qnt >= '1') {

                    $('#'+id+' .qnt').html(data.id_qnt);
                    $('#'+id+' .valor').html(data.valor_parcial);
                    $('.carrinhovazio').remove();
                    $('#'+id+' .remove_produto').replaceWith('<a style="cursor:pointer;" class="remove_produto" idproduto='+id+' qnt='+data.id_qnt+' title="Remover produto"><i class="icon-remove"></i></a>');
                    remove_produto();
                }else{

                    $('#'+id).remove();

                }

                if (data.valor === 0) {

                    $('.valor_carrinho').remove();
                    var html = '<div class="carrinho_vazio">'
                        +'<div class="carrinhovazio"><img src="'+CI_ROOT+'img/carrinho.jpg" style="margin-top:5px; margin-left:50px; width:50%;"></div>'
                        +'</div>'
                        $('.recebe_produto').append(html);

                }else{  

                    $('<span class="total_produtos">'+data.valor+'</span>').replaceAll('.total_produtos');
                    $('<span class="total_carrinho">'+data.valor+'</span>').replaceAll('.total_carrinho');

                }        
            }
        });
    });
}
jquery ajax

  • Please edit your question by posting more details, preferably including the relevant code snippet so we can evaluate it. The way it is, it’s not clear what you’re asking.

  • guy puts the code there

  • I put an image of the function to add products in the cart, I need to call the function remove_products, but currently the way the call is not worked.

  • In fact it gets to work bad not correctly, when I click delete product, it is making several requests envés of only one

  • The function remove_products. Function remove_product(){ $('. remove_product'). click(Function(){

  • @Fortunato It is impossible to read... there is some reason not to post the text of the code instead of an image of it?

  • Yeah, the code’s a little big, and I don’t know why I try to glue it back together. I don’t know if I have to use any tag to post the code. First time using here.

  • @Fortunato 1. paste the code; 2. select it whole; 3. click the "code sample" button on the edit bar (looks like this: { })

  • www.jsfiddle.net

  • 2

    Ready is all there the code now, what is happening is that it makes more of a request when it should do only one, and sometimes it does not work.

Show 5 more comments

1 answer

4


Your problem seems to me to be that you’re adding the Handler to class remove_produto several times (once to each Ajax call). Also, when your code enters the first else you are replacing elements of this class with others (replaceWith), and in no time do you add a Handler to them.

The simplest way I see to solve this is to use .on in class remove_produto. Replace the function remove_produto for:

$(document).on("click", ".remove_produto", function(){
    var id = $(this).attr("idproduto");
    var qnt = $(this).attr("qnt");
    ...
});

The method on will deal with the event click for every element with class remove_produto, present or future, so that you don’t need to reassign it every time you do Ajax. That is, run the code above only once.

  • Thank you very much mgibsonbr worked perfectly now. Really the problem was this.

Browser other questions tagged jquery ajax

You are not signed in. Login or sign up in order to post.