Drupal 7 jQuery drupal behaviours issue

Question

I am stuck trying to convert a javascript file that ran perfectly in d6 to d7, I have been searching through the info about drupal behaviours but cannot seem to find the correct manner to resolve this.

The following script returns an unexpected token error ), for the closing bracket before (jQuery).

(function($){

var VAT = 0.2;
var QUANTITY_SUFFIX = "field-po-quantity";
var PRICE_SUFFIX = "field-po-price";
var SUBTOTAL_SUFFIX = "field-po-item-st";
var VAT_SUFFIX = "field-po-item-vat";
var TOTAL_SUFFIX = "field-po-item-total";

var quantityFields;
var priceFields;
var fieldsValid = false;

function isNumber(value) {
  return    !isNaN(parseFloat(value)) &&
        isFinite(value);
}

function validValue(value) {
  return    isNumber(value) &&
      parseFloat(value) > 0;
}

function addCommas(nStr) {
  nStr += '';
  var x = nStr.split('.');
  var x1 = x[0];
  var x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
return x1 + x2;
}   

function decimalise(value) {
  if (isNumber(value)) {
    var numericValue = parseFloat(value);
    return numericValue.toFixed(2);
  }
}

function validateFields() {
  var fieldsValid = true;
  var allFields = new Array();

  quantityFields = jQuery('input[id*="' + QUANTITY_SUFFIX + '"]');
  priceFields = jQuery('input[id*="' + PRICE_SUFFIX + '"]');

  allFields.push.apply(allFields, quantityFields);
  allFields.push.apply(allFields, priceFields);

  for (i=0; i<allFields.length; i++) {
    var field = allFields[i];
    var valueString = field.value;
    if (!validValue(valueString)) {
      field.style.borderStyle="solid";
      field.style.border="inset 1px red";
      fieldsValid = false;
    } else {
      field.style.borderStyle="none";
    }
  }
  this.fieldsValid = fieldsValid;
}

jQuery(document).click(function() {
  validateFields();
  if (fieldsValid) {
    var subTotalSum = 0;
    var vatSum = 0;
    var totalSum = 0;
    jQuery('#field-po-items-values tbody tr:not(.content-multiple-removed-row)').each(function(){
      var quantityString = jQuery(this).find('input[id*="' + QUANTITY_SUFFIX + '"]').val();
      var numericQuantity = decimalise(quantityString);
      var priceString = jQuery(this).find('input[id*="' + PRICE_SUFFIX + '"]').val();
      var numericPrice = decimalise(priceString);
      var subtotal = parseFloat(numericPrice * numericQuantity);
      jQuery(this).find('input[id*="' + SUBTOTAL_SUFFIX + '"]').val(addCommas(decimalise(subtotal)));
      var vat = subtotal * VAT;
      jQuery(this).find('input[id*="' + VAT_SUFFIX + '"]').val(addCommas(decimalise(vat)));
      var total = subtotal + vat;
      jQuery(this).find('input[id*="' + TOTAL_SUFFIX + '"]').val(addCommas(decimalise(total)));
      subTotalSum += subtotal;
      vatSum += vat;
      totalSum += parseFloat(total);
    });
    jQuery('input[id*="edit-field-po-subtotal"]').val(addCommas(decimalise(subTotalSum)));
    jQuery('input[id*="edit-field-po-vat"]').val(addCommas(decimalise(vatSum)));
    jQuery('input[id*="edit-field-po-total"]').val(addCommas(decimalise(totalSum)));
  }
}

})(jQuery);

The file is being called from template.php, using drupal_add_js inserted in the top of the file, not under pre-process or anything.

I understand that the jQuery(document).click(function() { might also be causing an issue and may ultimately be the reason for the unexpected token error?

Thank you in advance

Answer 1

I don`t know whether your code is correct but it is highly recommended to use JavaScript in Drupal>7 this way:

(function ($) {
    Drupal.behaviors.yourFunction = {
        attach: function(context, settings) {

            var VAT = 0.2;
            var QUANTITY_SUFFIX = "field-po-quantity";
            var PRICE_SUFFIX = "field-po-price";
            var SUBTOTAL_SUFFIX = "field-po-item-st";
            var VAT_SUFFIX = "field-po-item-vat";
            var TOTAL_SUFFIX = "field-po-item-total";

            var quantityFields;
            var priceFields;
            var fieldsValid = false;

            function isNumber(value) {
                return    !isNaN(parseFloat(value)) &&
                    isFinite(value);
            }

            function validValue(value) {
                return    isNumber(value) &&
                    parseFloat(value) > 0;
            }

            function addCommas(nStr) {
                nStr += '';
                var x = nStr.split('.');
                var x1 = x[0];
                var x2 = x.length > 1 ? '.' + x[1] : '';
                var rgx = /(\d+)(\d{3})/;
                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }
                return x1 + x2;
            }

            function decimalise(value) {
                if (isNumber(value)) {
                    var numericValue = parseFloat(value);
                    return numericValue.toFixed(2);
                }
            }

            function validateFields() {
                var fieldsValid = true;
                var allFields = new Array();

                quantityFields = $('input[id*="' + QUANTITY_SUFFIX + '"]');
                priceFields = $('input[id*="' + PRICE_SUFFIX + '"]');

                allFields.push.apply(allFields, quantityFields);
                allFields.push.apply(allFields, priceFields);

                for (i=0; i<allFields.length; i++) {
                    var field = allFields[i];
                    var valueString = field.value;
                    if (!validValue(valueString)) {
                        field.style.borderStyle="solid";
                        field.style.border="inset 1px red";
                        fieldsValid = false;
                    } else {
                        field.style.borderStyle="none";
                    }
                }
                this.fieldsValid = fieldsValid;
            }

            $(document).click(function() {
                validateFields();
                if (fieldsValid) {
                    var subTotalSum = 0;
                    var vatSum = 0;
                    var totalSum = 0;
                    $('#field-po-items-values tbody tr:not(.content-multiple-removed-row)').each(function(){
                        var quantityString = $(this).find('input[id*="' + QUANTITY_SUFFIX + '"]').val();
                        var numericQuantity = decimalise(quantityString);
                        var priceString = $(this).find('input[id*="' + PRICE_SUFFIX + '"]').val();
                        var numericPrice = decimalise(priceString);
                        var subtotal = parseFloat(numericPrice * numericQuantity);
                        $(this).find('input[id*="' + SUBTOTAL_SUFFIX + '"]').val(addCommas(decimalise(subtotal)));
                        var vat = subtotal * VAT;
                        $(this).find('input[id*="' + VAT_SUFFIX + '"]').val(addCommas(decimalise(vat)));
                        var total = subtotal + vat;
                        $(this).find('input[id*="' + TOTAL_SUFFIX + '"]').val(addCommas(decimalise(total)));
                        subTotalSum += subtotal;
                        vatSum += vat;
                        totalSum += parseFloat(total);
                    });
                    $('input[id*="edit-field-po-subtotal"]').val(addCommas(decimalise(subTotalSum)));
                    $('input[id*="edit-field-po-vat"]').val(addCommas(decimalise(vatSum)));
                    $('input[id*="edit-field-po-total"]').val(addCommas(decimalise(totalSum)));
                }
            }


        }
    };
})(jQuery);

More info about Drupal Behaviours:

• Drupal behaviors

• Theming, jQuery, DRupal Behaviours