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

Question

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.

Answer 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);

Answer 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.

Answer 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");
        }
    }
});

Answer 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();

Answer 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.