Postback after JQuery Dialog box closes causes js error in IE

Question

I am creating JQuery dialog boxes and need the close functionality to cause a postback to the parent form (so that data changed in the popup form displays immediately on the parent screen). I have the code written and the dialog box in place. However, there is an issue. In IE, when I close the popup and the postback occurs, I get this javascript error that states "Object doesn't support this property or method" and it refers to the block of code that creates the dialog box.

Just some backgroud: The page with the popup is an aspx page with many areas that display database information that can be changed. This page uses master pages. The popup contains an iframe that I change the source of depending on what button is clicked. I was hoping to use the same dialog box and popup div for the many popup forms we have.

Here is the javascript. It is located in the $(document).ready section:

//Source of IE error
$("#popup").dialog({
    bgiframe: true,
    resizable: false,
    height: 217,
    modal: true,
    autoOpen: false,
    close: function()
    {
        $('#aspnetForm').submit(); //Submit the parent form to cause postback
    }
});

$("#BHSubmitBtn").click(function()
{
    var splitChar = $("#ctl00_Main_splitCharacter");
    var queueId = $("#ctl00_Main_queueId");
    var siteName = $("#ctl00_Main_siteName");
    var queryString = "Add" + splitChar + siteName + splitChar + queueId;

    $("#popupFrame").attr('src', 'BusinessHoursSubForm.aspx?var1=' + queryString);
    $("#popup").dialog('open');
});

Here is the div I am popping up:

<div id="popup" title="Business Hours" >
<iframe id="popupFrame" src=""></iframe>
</div>

Here is the button that opens the form:

<input class="clsSubmitBtn" id="BHSubmitBtn" type="button" value="Add" />

I have tried many different ways to handle this, most ending in a javascript error (the one above) in the ui.dialog on the line that starts with:

$.widget('ui.dialog', ...) or my javascript.

Can anyone think of why this is happening? I have gotten it to work (with the postback) but I had to strip the page of everything but the section I am working on but there isn't anything I can see that would cause it.

Answer 1

I think you need to access the parent document like this.

$('#aspnetForm', window.parent.document).submit();

Answer 2

The problem is that the ASP.NET generated page depends on some global javascript values. These values are likely being overwritten by the dialog you are injecting. My solution to this problem was to have an object which saves off the current state before loading the dialogs, then restore it when done.

To determine what values need to be saved off, you need to be careful to review the pages you load as dialogs. Review all script tags. Some of the values I've found worth saving/restoring are: "__doPostBack", "theForm", "WebForm_OnSubmit", "Page_Validators", "ValidatorOnSubmit", "Page_ValidationActive", "ValidatorOnChange"

This list will grow as you use more ASP.NET features within your dialog.

Answer 3

Instead of writing submit() to submit the form for doing a postback, you can use __doPostback('XYZ,''); for causing a postback to occur.

Answer 4

The actual problem had nothing to do with how the form was being posted back. The issue (groan) is that we were using the now deprecated SmartNav page attribute (Part of my task was to get rid of this) and for some reason it was causing the error (probably because of what smartNav does in the background). Once I removed it from all the pages it worked.