1

Olá! estou tendo um problema com JS que é o seguinte: O evento focusout não está ativando o $.ajax

JS:

$('.focusout_input_budget').focusout(function () {
  var amount = $(this).val(),
      id = $(this).parent('.line-table-products').attr('data-id'),
      nomeprod = $(this).parent('.line-table-products').find('.coll1-line-product-list').html();

  if (amount > 0) {
     $.ajax({
        url : SITE  + 'addbudget',
        type: "POST",
        dataType: "JSON",
        data: { id: id, amount: amount, nomeproduto: nomeproduto },
        async: false,
        success: function (json) {
           json = json;
           if (json['true'] === 'true') {
              $('.icon-inform-budge').html(json['quant']);
              console.log(json['quant']);
              if (json['quant'] == 1) { 
                 $('#products-budge-top li').first().remove();
                 var li = "<li class='item-product-budge-top'>"+json['nome']+"</li>";
                 $('#products-budge-top').append(li);
              }
              if (json['quant'] > 1 && json['quant'] <= 5) {
                 $('#products-budge-top li').last().remove();
                 var li = "<li class='item-product-budge-top'>"+json['nome']+"</li>";
                 $('#products-budge-top').append(li);
              }
              if (json['quant'] == 6) {
                 $('#products-budge-top li').last().remove();
                 var li = "<li class='item-product-budge-top'>Ver todos os produtos...</li>";
                 $('#products-budge-top').append(li);
              }
              if(json['quant'] >= 6){
                 $('#products-budge-top li').first().remove();
                 var li = "<li class='item-product-budge-top'>"+json['nome']+"</li>";
                 $('#products-budge-top').append(li);
              }                     
              var link = SITE + 'carrinho';
              var last = "<li class='item-product-budge-top'><a href='"+link+"' title='acessar carrinho' class='button-budget-budge-top'>Revisar Orçamento</a></li>";
              $('#products-budge-top').append(last);

              $(this).html('ADICIONADO COM SUCESSO');
              setTimeout(function(){
                 $('.button-add-product-budget').html('ADICIONAR AO ORÇAMENTO');
              },200);           
           } else {
              $(this).html('ERRO AO ADICIONAR');
              setTimeout(function(){
                 $('.button-add-product-budget').html('ADICIONAR AO ORÇAMENTO');
              },2000);            }
        }
     });

  } else {
     $.ajax({
        url : SITE  + 'removebudget',
        type: "POST",
        dataType: "JSON",
        data: { id:id },
        async: false,
        success: function(json){
           json = json;
           if(json == 'true'){
              location.reload();
           }
        }
     });
  }
});

html:

<ul id="main-products">
            <li class="line-table-products line-title-table-products">
                <span class="coll-line-product coll-title-line-product coll1-line-product">NOME DO PRODUTO</span>
                <span class="coll-line-product coll-title-line-product coll2-line-product">UNIDADE</span>
                <span class="coll-line-product coll-title-line-product coll3-line-product">QUANTIDADE</span>
                <span class="coll-line-product coll-title-line-product coll4-line-product">ADICIONAR AO MEU ORÇAMENTO</span>
            </li>
            <?php foreach($produtos as $prod){ ?>
            <li class="line-table-products" data-id="<?php echo $prod->codigo; ?>">
                <span class="coll-line-product coll1-line-product coll1-line-product-list <?php if(check_size_line($prod->nome, 36, 'space') == 'true') echo 'item-large-size-products'; ?>"><?php echo $prod->nome; ?></span>
                <span class="coll-line-product coll2-line-product"><?php echo $prod->unidade; ?></span>
                <div class="coll-line-product coll3-line-product">
                    <img src="<?php echo IMG . 'px.png'; ?>" alt="Icone diminui quantidade" data-operation="subtraction" class="icon-amount-product-budget icon-decrease-product-budget" />
                    <input type="text" name="productqtd" value="<?php echo check_prod_in_budget($prod->codigo); ?>" placeholder="00" class="input-amount-product-budget focusout_input_budget"/>
                    <img src="<?php echo IMG . 'px.png'; ?>" alt="Icone diminui quantidade" data-operation="sum" class="icon-amount-product-budget icon-increase-product-budget" />
                </div>
                <span class="coll-line-product coll4-line-product button-add-product-budget">ADICIONAR AO ORÇAMENTO</span>
            </li>
            <?php } ?>
        </ul>

Alguém poderia me Ajudar?

5
  • Mas o evento usado aí é o blur.
    – Jéf Bueno
    Commented 8/06/2017 às 20:38
  • eu já tentei e não funcionou também, ai um colega me disse para usar o evento focusout Commented 8/06/2017 às 20:44
  • o código funciona até a checagem do "if(amount > 0){" depois ele não funciona mais! Commented 8/06/2017 às 20:45
  • Podes montar um exemplo com HTML aqui ou no jsFiddle?
    – Sergio
    Commented 8/06/2017 às 20:51
  • link para o jsFiddle: jsfiddle.net/samuelbdesouza/ufetc77b Commented 8/06/2017 às 20:56

1 Resposta 1

3

Existe um erro no seu if, algumas '{' estavam em lugares errados, coloque ele dessa forma:

if(amount > 0){
    $.ajax({
        url : SITE  + 'addbudget',
        type: "POST",
        dataType: "JSON",
        data: { id:id, amount:amount, nomeproduto:nomeproduto },
        async: false,
        success: function(json){
            json = json;
            if(json['true'] == 'true'){
                $(this).html('ADICIONADO COM SUCESSO');
            }
            else {
                $(this).html('ERRO AO ADICIONAR');
            }
        }
    });

}

Abaixo um exemplo funcional utlizando o on() do jquery.

jQuery(document).ready(function(){
  jQuery('#teste').on('focusout',function(){
     alert('focusout ativado');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="teste">

9
  • Corrigi os erros, mas ainda não está funcionando! Commented 9/06/2017 às 11:11
  • Poste o código atual e completo inclusive os elementos html Commented 9/06/2017 às 11:18
  • editei a pergunta adicionando o html e js atual Commented 9/06/2017 às 11:42
  • Testei seu código no próprio jsfiddle e deu problema na variável SITE, ela não está definida favor verificar, fora isso ao retirar todos os locais que ela está funcionou normal, tente adicionar antes de tudo a 'var SITE = ' ';' Commented 9/06/2017 às 12:03
  • A variável "url : SITE + 'addbudget'," está mandando os dados para uma pagina que faz o cadastro dos códigos na sessão e no banco, já testei esse mesmo código com o evento click e funciona normalmente, só com o focusout ou blur que não está funcionando! Commented 9/06/2017 às 12:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .