Question

I don’t think this is a Drupal-specific question, but more of a general jquery/ajax issue:

Basically, I’m trying to use javascript to add up form fields and display the result in a “subtotal” field within the same form. Everything is working fine until i click the option to add another field (via ajax), which then changes my “subtotal” field to zero, and won’t work again until I remove the field.

Here is the function that adds up the fields:

function calculateInvoiceFields(){
var total = 0;
var rate = 0;
var quantity = 0;
var i = 0;
var $ = jQuery;

    $("#field-aminvoice-data-values tr").each(function(){
        // quantity field number
        quantity = $("#edit-field-aminvoice-data-und-"+i+"-field-aminvoice-quantity-und-0-value").val();
        // rate field as number
        rate = $("#edit-field-aminvoice-data-und-"+i+"-field-aminvoice-rate-und-0-value").val();
        if(!isNaN(quantity) && !isNaN(rate)){
            total  += quantity*rate;
        }
        i++;
    });

return total;   
}

And here are the functions that get fired for .ready and .live:

jQuery(document).ready(function(){
    var $ = jQuery;
    $(".field-type-commerce-price input").val(calculateInvoiceFields());
});


jQuery(function(){
    var $ = jQuery;
    $(".form-text").live('change', function(){
        $(".field-type-commerce-price input").val(calculateInvoiceFields());
    });
});

Any ideas would be a big help. Thanks in advance!

Answer 1

I recommend using ‘on’ for any binding statement. and ‘off’ for unbinding.
The reason it doesn’t work after an AJAX call, is because you need to be watching for that element to be added to the DOM, and an event attached to it after it gets loaded. If you load a new element in, and there is nothing watching for it, it won’t add the event watch to that new DOM element.
As below:

function calculateInvoiceFields(){
   /*..*/
return total;   
}


$(document).ready(function(){
    $(".field-type-commerce-price input").val(calculateInvoiceFields());
    $("body").on('change', ".form-text", function(){
        $(".field-type-commerce-price input").val(calculateInvoiceFields());
    });
});