jQueryUI Dialog + Firefox + ASP.Net = access to strict mode caller function is censored

I have a page that works great in IE and Chrome, but doesn’t work in Firefox and Opera. When I say it doesn’t work I mean that the Submit button doesn’t do anything at all. It is a page with several nested UpdatePanels on it and a couple of jQueryUI Accordions on it too.

I have a simple div.

<div id="date-dialog" title="Date?">
    <label id="lblDate" for="txtDate">
        Please Enter Your The Date:
    </label>
    <input type="text" id="txtDate" class="text ui-widget-content ui-corner-all" />
</div>

And then I have some simple code to turn it into a dialog:

$('#date-dialog').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    buttons: {
        "Submit": function () {
            __doPostBack('DateButton', $('#txtDate').val());
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$('#txtDate').datepicker({ dateFormat: 'yy-mm-dd' });

I’ve also tried adding this, which doesn’t help and which actually doesn’t work with a modal dialog:

    open: function (type, data) {
        $(this).parent().appendTo("form");
    },

In Firefox I get the following error:

Error: TypeError: access to strict mode caller function is censored
Source File: http://ajax.microsoft.com/ajax/4.0/2/MicrosoftAjaxWebForms.debug.js
Line: 718

I have no idea what to do to fix this. I would love to turn off strict mode, but I can’t find any information on how to do that. I can barely find any information about that error using Google. It seems like what I’m doing should be quite simple.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This is kind of an old post, but this issue still occurred to me today.
I didn’t wanted to use the click of the button, so instead i tried a setTimeout and it also works.

To people having this issue, try this solution:

setTimeout(function() { __doPostBack('DateButton', $('#txtDate').val()); }, 1);

Method 2

Having recently had to address this issue I found that I could solve the problem and get __doPostBack working in Edge, IE, Chrome & FireFox by adding the following script to the top of my app.

    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { window.event = {}; }    

Using the SetTimeout function breaks Edge. Just putting in window.event={} broke IE.

Method 3

While this doesn’t actually explain how to fix the problem, this is a working work-around.

I created a hidden field that corresponded to each field in the dialog box. Then I created a button. These had to be kept outside of the dialog box div because the div is moved to outside the form when it is turned in to a dialog box. Then I modified my dialog box creation code to be something like this:

$('#date-dialog').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    buttons: {
        "Submit": function () {
            $('#<%=hfDate.ClientID %>').val($('#txtDate').val());
            $('#<%=btnFormSubmit.ClientID %>').click();
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

Method 4

This is working for IE, Chrome and Firefox. browser!, Thanks to https://mnaoumov.wordpress.com/2016/02/12/wtf-microsoftajax-js-vs-use-strict-vs-firefox-vs-ie/

function hackEventWithinDoPostBack() {
var originalEventDescriptor = Object.getOwnPropertyDescriptor(Window.prototype, "event");
    var hackEventVariable = false;
    var eventPropertyHolder;
    Object.defineProperty(window, "event", {
        configurable: true,
        get: function get() {
            var result = originalEventDescriptor ? originalEventDescriptor.get.apply(this, arguments) : eventPropertyHolder;
            if (result || !hackEventVariable)
                return result;
            return {};
        },
        set: function set(value) {
            if (originalEventDescriptor)
                originalEventDescriptor.set.apply(this, arguments);
            else
                eventPropertyHolder = value;
        }
    });
    var originalDoPostBack = window.__doPostBack;

    window.__doPostBack = function hackedDoPostBack() {
        hackEventVariable = true;
        originalDoPostBack.apply(this, arguments);
        hackEventVariable = false;
    };
}

hackEventWithinDoPostBack();

Method 5

This happened to me in Firefox Quantum. I was using a jQuery 3.x CDN, I had to download it to reference it locally in my project. After that I edited it (jquery.3.x.min.js) and commented/removed the following:

"use strict";

I had to do a search to remove them all. There were two.

Method 6

This might be some good news but I am unable to replicate the problem in the latest Firefox 84.0.2 and jQuery 3.5.1. I tested the reported scenario plus other __doPostBack problematic scenarios related to the ‘use strict’ rule and all of them seem to work without any JS errors.

Do you still experience this issue with the latest jQuery 3.5.1 and latest Firefox 84.0.2?

There is also an official statement from jQuery team but it is old and applies to jQuery 1.9.1, but not 3.5.1 – https://bugs.jquery.com/ticket/13335.

Thank you!

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0