jQuery Onblur -> Mesmo caindo no ELSE, faz ação do IF.

[Maykel-ctba 233]

Fala galera,

 

Estou com um problema e não consigo identificar o que pode estar acontecendo.

 

Situação:

Tenho um carrinho de compras, e o usuário pode editar a quantidade do seu item mesmo após tê-lo adicionado. Cada produto tem uma quantidade mínima que é informada no próprio input através de um atributo "data-quantidade-minima". Se o cliente digita uma quantidade válida, executa um ajax para atualizar seu preço.

 

Problema:

Com um produto funciona bem. Quando tem dois ou mais, começa o problema:

 

Se tenho um produto com a quantidade válida e outro não, ao alterar o válido, executa o ajax para o inválido também. Mas programei o script para que o ajax altere apenas a linha que esteja mexendo.

 

Comentei o script abaixo para que fique mais fácil de compreender. Também coloquei o código no CodePen para ver a execução.

 

Para testar:

 

O primeiro produto possui quantidade mínima = 30. O segundo possui quantidade mínima = 100.

Se colocar um destes com a quantidade inválida, alterará do mesmo jeito, mesmo não podendo.

 

Ex: Item 01: 30 e Item 02: 98 (inválido, já que o mínimo é 100). Ele executa.

 

O que posso fazer? :huh:

 

 

 

 

 

 

JS:

// * Ao digitar uma nova quantidade em um campo
$('input[name="txQtdAlterar"]').blur(function(){
        // * Verifica se o valor digitado é vazio, e se não for...
	if(!$(this).val() == ""){
                // * Verifica se o valor digitado é maior ou igual a quantidade mínima. Se for
		if( $(this).val() >= $(this).attr('data-quantidade-minima') ){
                        // * Executa o ajax, atualizando a linha
			$.ajax(
			{
				url : 		"/common/function/retornaPrecoQuantidade.php",
				type : 		"POST", 
				data: 		{ 
					quantidade: $(this).val(),
					sessionLinha: $(this).attr('data-session')
				},
				dataType: 	"json",
				beforeSend: function()
				{
					$("#overlay").fadeIn();
				},
				success: function(data)
				{
					if(data.sucesso == 1)
					{
						location.reload();
					}
					else
					{
						alert('Erro ao buscar o preço deste produto');
					}
					$("#overlay").fadeOut()
				}
			});
		}
	}
});

HTML:

<table class="table validar" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Produto</th>
            <th width="80">Qtd.</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td><strong>Mochila Adventure</strong><br /><small>Cód. 12070</small></td>
                <td><input data-quantidade-minima="30" data-session="0" type="text" name="txQtdAlterar" class="form-control validate[required,min[30]]" value="30" /></td>
                <td>R$ 1386.00</td>
            </tr>
            <tr>
                <td><strong>Mochila Danka Neo Ultraslim Preta</strong><br /><small>Cód. 12006</small></td>
                <td><input data-quantidade-minima="100" data-session="1" type="text" name="txQtdAlterar" class="form-control validate[required,min[100]]" value="100" /></td>
                <td>R$ 2800.00</td>
            </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="9">Total: R$ 4186.00</th>
        </tr>
    </tfoot>
</table>

[Maykel-ctba 233]

Resolvido, aparentemente.

 

Se eu colocar os números entre parseInts, parece ter funcionado. Creio que o script estava considerando como string, e não números na comparação, dando problema.

if( parseInt($(this).val()) >= parseInt($(this).attr('data-quantidade-minima')) )