Creating your own jquery plugin - function problem

Question

Hi all,

I'm trying to pass a function as an option through a jquery plugin that I'm building myself.

At the moment when initializing my plugin with the following option:

$.fitAjaxSubmit({
  formId:         "new_team",
  postUrl:        "/teams/create.json",
  redirectUrl:    "/teams/",
  saveBoxText:    "Saving Team...",
  beforeSubmitFn: function(){ alert('Boo!'); }
});

In my plugin I'm trying to call the beforeSubmitFn like so (I'm also using the ajax form plugin):

(function($){
    $.fn.fitAjaxSubmit = function(options) {

        var defaults = {
            formId:                 "formId",
            postUrl:                "postUrl",
            redirectUrl:            "redirectUrl",
            saveBtnId:              "save_button",
            saveBtnEnableText:      "Save",
            saveBtnDisableText:     "Saving...",
            saveBoxId:              "saving-box",
            saveBoxText:            "Saving...",
            errorMsgId:             "error_messages",
            beforeSubmitFn:         function(formData, jqForm, options) {},
            successFn:              function(response) {
                if(response.success == true) {
                    window.location = options.redirectUrl + response.object_id;
                } else {
                    $('#'+options.saveBtnId).removeAttr('disabled').val(options.saveBtnEnableText);
                    $('#'+options.saveBoxId).text(options.saveBoxText).fadeOut(300);
                    $('#'+options.errorMsgId).html(errorMessages(response)).hide().fadeIn(300);
                    window.scrollTo(0,0);
                }
            }
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            $('#'+options.saveBtnId).click(function() {

                $('#'+options.saveBtnId).attr('disabled', 'disabled').val(options.saveBtnDisableText);
                $('#'+options.saveBoxId).text(options.saveBoxText).fadeIn(200);

                $('#' + options.formId).ajaxForm({
                    url: options.postUrl,
                    type: "POST",
                    dataType: "json",
                    beforeSubmit: options.beforeSubmitFn,
                    success: options.successFn
                })
            });
        });
    };
})(jQuery);

For some reason the beforeSubmitFn works in Firefox however in Internet Explorer, Safari and Chrome it doesn't work at all!

Is there something I'm missing here?

Thanks in advance!

Answer 1

Guessing here since you're not showing all your code. The code you have posted here looks fine.

IE and most other browsers handle object map formatting a little differently. You might check for an extra Comma in your options definition.