CODEWITHSUNDEEP
javascriptjqueryfirefox
dalcantara
dalcantara

Reputation: 1611

Jquery selector in Firefox

I'm learning the javascript revealing prototype pattern. I have two scripts 1 that defines a dialog and another that consumes it. Everything seems to work fine except that this javascript throws a $(dialogDiv) is not defined in Firefox? However, the script works fine in IE and Chrome.

revealing prototype:

var Sandbox = Sandbox || { };
Sandbox.UI = Sandbox.UI || { };

Sandbox.UI.AjaxContentModalDialog = function(elementId, dialogOptions) {
    this.dialogDiv = elementId;
    this.options = dialogOptions;    
};

Sandbox.UI.AjaxContentModalDialog.prototype = function () {

    var open = function (methodName, url) {
        $(dialogDiv).css("overflow", "hidden");
        $(dialogDiv).dialog({
            width: this.options.width,
            height: this.options.height,
            autoOpen: false,
            resizable: false,
            modal: true,
            title: this.options.title,

            buttons: {
                Save: function () {
                    var form = $(options.formToPost);
                    $.ajax({
                        type: "POST",
                        url: form.attr('action'),
                        data: form.serialize(),
                        success: function (data, status, xhr) {
                            if (data.IsValid) {
                                $(dialogDiv).dialog('close');
                                $(dialogDiv).empty();
                                $(options.divToUpdate).empty();
                                $(options.divToUpdate).html(data.View);
                            } else {
                                $("#errorDiv").html(data.Message + "<br/>");
                            }
                        }
                    });
                },

                Cancel: function () {
                    $(dialogDiv).dialog('close');
                    $(dialogDiv).empty();
                }
            }
        });
        $.ajax(
            {
                Type: methodName,
                url: url,
                success: function (data, status, xhr) {
                    openDialog(data);
                }
            });

        function openDialog(data) {
            $(dialogDiv).html(data);
            $(dialogDiv).dialog('open');
        }
    };

    return {
        open: open
    };

} ();

Consumer:

"use strict";

var options = { title: 'Edit User Profile Setting Value',
    height: 180,
    width: 375,
    formToPost: '#userProfileSettingForm',
    divToUpdate: '#userProfileDetail',    
    buttons: [{ text: "Ok" }, { text: "Cancel"}]
};

var dialog;
dialog = new Sandbox.UI.AjaxContentModalDialog('#dialogDiv', options);

$(document).ready(function () {    
    disableInheritLinks();
    $('.Sandbox-udsActionLink').live("click", function (e) {

        e.preventDefault();
        dialog.open('get', this.href);
        return false;
    });


    function disableInheritLinks() {
        $('.Sandbox-disabled').each(function (item) {
            this.href = '';
        });


        $('.Sandbox-disabled').live("click", function (e) {
            e.preventDefault();
            this.href = '';
            console.log("disalbed: " + this.href);
            return false;
        });
    }
});

Upvotes: 1

Views: 426

Answers (3)

Dennis
Dennis

Reputation: 32598

Since you have an element with an id, IE (and Chrome in an attempt to be compatible with IE) create properties on window with each id:

window.dialogDiv //points to the element with id=dialogDiv

Firefox doesn't do this which is why it fails in that browser. You should be using this.dialogDiv anyway since it fits your model. Also, the window.elementId properties are non-standard and should not be relying on.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

I think you mean $(this.dialogDiv). Also, the fact that it's behaving differently in different browsers probably means you have an inconsistency in the this context.

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71918

It has to be $(this.dialogDiv). Without this, it world refer to a local variable, not an object property. Not sure oh it's working in other browsers, though...

Upvotes: 0

Related Questions