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