JS Total Count not updating on IE

86 views Asked by At

I'm having a problem with IE where if I check the items on a list it doesn't update the total value on the cart. It works fine on all other browsers but not on IE.

By default the button is PAY ALL, but if you select an item it will update the total value and change the button, here's the function that does it:

update: function() {
    if (this.paying > 0) {
        this.element.find('.on_selected').show()
                .find('h2 span').text('$' + this.paying.toFixed(2));
        this.element.find('.on_selected_none, .pay_all').hide();
        this.element.find('.continue').css('display', 'block');
    } else {
        this.element.find('.on_selected_none, .pay_all').show();
        this.element.find('.on_selected, .continue').hide();
    }
}

And here is my whole JS class for this

var Ticket = can.Control.extend({
/**
 * @var int total
 */
total: 0.00,
/**
 * @var int paying 
 */
paying: 0.00,
/**
 * 
 * @param {type} element
 * @param {type} options
 */
init: function(element, options) {
    var self = this;
    element.find(':checkbox').each(function() {
        self.total += parseFloat($(this).val());
        if ($(this).is(":checked")) {
            self.add($(this));
        }
    });
    this.update();
},
/**
 * 
 * @param dom el
 */
add: function(el) {
    var v = parseFloat(el.val());
    this.paying += v;
},
/**
 * 
 * @param dom el
 */
substract: function(el) {
    var v = parseFloat(el.val());
    this.paying -= v;
},
/**
 * Event Listener
 * @param dom el
 */
':checkbox change': function(el) {
    if (el.is(":checked")) {
        this.add(el);
    } else {
        this.substract(el);
    }
    this.update();
},
'table tr div.row click': function(tr,e){
//        console.log();
//        if($(e.target).is('label')){ return; }
        tr.parent().prev().find('input[type=checkbox]').trigger('click');
    },
    'table .checkbox-big label click': function(tr){
//        console.log(tr.prev());
//        tr.prev().trigger('click');
//        tr.find('label').trigger('mouseover');
    },
    /**
     * Form button event lister
     * 
     * Submits form
     */
    'a.button click': function(btn, ev) {
        ev.preventDefault();
        if (btn.hasClass('pay_all')) {
            this.element.find(':checkbox').each(function() {
                $(this).trigger('click');
            });
            this.element.submit();
        }else{
            if(this.paying > 1){
                this.element.submit();
            }else{
                alert('Please select tickets to proceed.');
            }
        }
    },
    /**
     * Based on user selection message and button gets changed
     */
    update: function() {
        if (this.paying > 0) {
            this.element.find('.on_selected').show()
                    .find('h2 span').text('$' + this.paying.toFixed(2));
            this.element.find('.on_selected_none, .pay_all').hide();
            this.element.find('.continue').css('display', 'block');
        } else {
            this.element.find('.on_selected_none, .pay_all').show();
            this.element.find('.on_selected, .continue').hide();
        }
    }
});

Does anyone know if it's a common problem on IE with canJS? Or am I doing something wrong?

You can live view it at http://driv.io/webwidget/ , search for plate FXZ4448, state NY and hit search... my problem is on the ticket selection screen

0

There are 0 answers