when save() executes this.reset() or that.reset() it can't find the reset() method and says it's not a function. I used a workaround on init() to get it to work, but that method didn't work in save()

var vehicle = function () {
    return {
        init: function () {
            var that = this;

            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                that.remove(jQuery(e.currentTarget).parents('.vehicle-year-profile'));
            });

            jQuery('.vehicle-year-profile .options .edit').bind('click', function (e) {
                e.preventDefault();
                that.edit(jQuery(e.currentTarget).parents('.vehicle-year-profile').attr('id'));
            });

            jQuery('#association-detail .save').bind('click', function (e) {
                e.preventDefault();
                that.save();
            });
        },
        save: function () {
            var data = new Array();
            data['onSet'] = '';
            var onSet = jQuery('#association-detail input:checked');
            for (var i = 0; i < (onSet.length-1); i++) {
                data['onSet'] = data['onSet']+','+onSet.attr('id');
            }

            var priceSet = jQuery('#association-detail input[type=text]');
            for (var i = 0; i < (priceSet.length-1); i++) {
                data['priceSet'] = data['priceSet']+','+priceSet.attr('id')+':'+priceSet.val();
            }

            jQuery.ajax({
                type: 'post',
                url: '/ajax/store/product/saveAssocDetail.php',
                data: data,
                    success: function (r) {
                    if (r.length > 0) {
                        document.triggerNotification('check', 'Changes have been saved');
                        var that = this;
                        that.reset(); //ERROR IS TRIGGERED HERE
                    } else {
                        document.triggerNotification('x', 'Unable to save changes');
                    }
                    },
                error: function () {
                    document.triggerNotification('x', 'Unable to process your request, ajax file not found');
                    return false;
                }
            });
        },
        reset: function () {
            jQuery('#association-detail h3').html('');
            jQuery('#assocationVehicleId').val('');

            jQuery('#association-detail input:checked').attr('checked', false);
            jQuery('#association-detail input[type=text]').val('0.00');

            jQuery('#association-detail').hide();
        }
    }
}();
jQuery(function() {
    vehicle.init();
});

when save() executes this.reset() or that.reset() it can't find the reset() method and says it's not a function. I used a workaround on init() to get it to work, but that method didn't work in save()

var vehicle = function () {
    return {
        init: function () {
            var that = this;

            jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
                e.preventDefault();
                that.remove(jQuery(e.currentTarget).parents('.vehicle-year-profile'));
            });

            jQuery('.vehicle-year-profile .options .edit').bind('click', function (e) {
                e.preventDefault();
                that.edit(jQuery(e.currentTarget).parents('.vehicle-year-profile').attr('id'));
            });

            jQuery('#association-detail .save').bind('click', function (e) {
                e.preventDefault();
                that.save();
            });
        },
        save: function () {
            var data = new Array();
            data['onSet'] = '';
            var onSet = jQuery('#association-detail input:checked');
            for (var i = 0; i < (onSet.length-1); i++) {
                data['onSet'] = data['onSet']+','+onSet.attr('id');
            }

            var priceSet = jQuery('#association-detail input[type=text]');
            for (var i = 0; i < (priceSet.length-1); i++) {
                data['priceSet'] = data['priceSet']+','+priceSet.attr('id')+':'+priceSet.val();
            }

            jQuery.ajax({
                type: 'post',
                url: '/ajax/store/product/saveAssocDetail.php',
                data: data,
                    success: function (r) {
                    if (r.length > 0) {
                        document.triggerNotification('check', 'Changes have been saved');
                        var that = this;
                        that.reset(); //ERROR IS TRIGGERED HERE
                    } else {
                        document.triggerNotification('x', 'Unable to save changes');
                    }
                    },
                error: function () {
                    document.triggerNotification('x', 'Unable to process your request, ajax file not found');
                    return false;
                }
            });
        },
        reset: function () {
            jQuery('#association-detail h3').html('');
            jQuery('#assocationVehicleId').val('');

            jQuery('#association-detail input:checked').attr('checked', false);
            jQuery('#association-detail input[type=text]').val('0.00');

            jQuery('#association-detail').hide();
        }
    }
}();
jQuery(function() {
    vehicle.init();
});

• javascript
• jquery

• It seems to me that you have not understood how scope(/context) work in JavaScript. – ase Commented Sep 21, 2010 at 19:46

2 Answers 2

Perhaps it's because you've made your reference to this inside your ajax call. Try putting this line:

var that = this;

before you make your ajax call, and then refer explicitly to that in your ajax call. So, something like:

var that = this;

jQuery.ajax({
    type: 'post',
    url: '/ajax/store/product/saveAssocDetail.php',
    data: data,
    success: function (r) {
        if (r.length > 0) {
            document.triggerNotification('check', 'Changes have been saved');

            /**
            * now you can refer to "that", which is in the proper scope
            */

            that.reset(); //ERROR IS TRIGGERED HERE
        } else {
            document.triggerNotification('x', 'Unable to save changes');
        }
    },
    error: function () {
        document.triggerNotification('x', 'Unable to process your request, ajax file not found');
        return false;
    }
});

you should look at this: http://api.jquery./jQuery.proxy/ and also - check Function.bind prototype (ES5 spec) - https://developer.mozilla/en/JavaScript/Reference/Global_Objects/Function/bind or alt ways like http://webreflection.blogspot./2010/02/functionprototypebind.html

using that = this is fair but probably does not read as clearly.

jQuery ajax also supports context: this to rebind the callbacks for you automatically.