레일 3은 Ajax로 회선 총계를 계산합니다.

Question

인보이스 앱이 있습니다. 인보이스에 광고 항목이 있습니다. 인보이스를 제출하면 회선 총계 및 총액이 올바르게 계산됩니다.

그러나 인보이스가 제출되기 전에 총계와 총액을 계산하고 싶습니다. 예를 들어 수량을 변경하면 선계와 총계가 변경됩니다.

현재 다른 jQuery 플러그인을 찾고 있습니다. 어쩌면 당신은 과거에 비슷한 것을했을 것입니다. 무엇을 추천하나요?

Answer 1

플러그인이 필요하지 않습니다. jQuery 만 있으면 충분합니다. 당신이하고자하는 것은 .change() 또는 .blur()에 대한 application.js 파일에 핸들러를 추가하는 것입니다. 나는 후자를 추천한다. 그런 다음 HTML5의 "데이터"속성을 사용하여 가격을 평범한 Float으로 저장하면 jQuery가 가격을 붙잡고이를 계산할 수 있습니다.

invoice.html.erb

<div class="item"> 
    <h3>Item #1</h3> 
    Price: <div class="price" data-price="10.20">$10.20 USD</div> 
    Qty: <input type="text" size="2" id="product_1_quantity" class="quantity" value="1"> 
</div><br /><br /> 

<div class="item"> 
    <h3>Item #2</h3> 
    Price: <div class="price" data-price="3.50">$3.50 USD</div> 
    Qty: <input type="text" size="2" id="product_2_quantity" class="quantity" value="1"> 
</div><br /><br /> 

Total Price: <span id="total-price">input quantities</span> 

은,이 (당신이 $ 50.9999999 원인이 곱셈에 대한 몇 가지 처리를 추가해야합니다 완벽하지

function getTotal(quantities) { 
    var total = 0; 
    $.each(quantities, function() { 
     total += parseFloat($(this).closest('.item').find('.price').attr('data-price')) * parseInt($(this).val()); 
    }); 
    $("#total-price").html("$" + total + " USD"); 
} 

$(document).ready(function() {  
    var quantity = $('.quantity'); 
    getTotal(quantity); // So the total is calculated on page load. 

    quantity.blur(function() { 
     getTotal(quantity); 
    }); 
}); 

application.js 예를 들어, Zero를 끝내기 위해), 아이디어는 거기에 있습니다.

여기 테스트 : 는 또한 수량 중 하나가 비어있는 경우이 코드를 사용하여, 그것이 작동하지 않습니다 http://jsfiddle.net/J3YKh/1/

편집. 쉽게 해결할 수 있습니다.

quantity.blur(function() { 
    var qty = $(this).val; 
    if(!qty) qty = '0'; 
    getTotal(quantity); 
} 

값이 없으면 "0"으로 채우고 정상적으로 진행됩니다. 테스트되지 않았습니다.