The jquery dialogbox didn't close when it is opened on usercontrol page

Question

I used the jQuery dialog. The parent has user control which has an image to open the popup page when it is on click. The aspx page has cancel button to close jquery method and it is worked. I added the my jquery files on the parent page. I put the dialog div on parent page.

The problem is for closing the jquery dialog box and reloading the parent. If I added my jquery files on the header on the popup page, the function is called but the error is:

JavaScript runtime error: Object doesn't support property or method 'dialog'. Also the Cancel button didn't close the jquery.

However, when I uncomment my jquery files on the popup page, the cancel button works. But the another button which close the popup and reload parent page, the jquery method is not called and the popup page reload and not closed.

There is my code in jQuery

function openmodel(url, name, width, height) {
  var maxHeight = dialogMaxHeight(height);
  var dialogHeight = height;
  if (height > maxHeight)
    dialogHeight = maxHeight;   

  $('#dialog-model').dialog({
    my: "center",
    at: "center",
    of: window,
    autoOpen: false,
    resizable: true,
    max_height:'auto',      
    height: 'auto',
    width: width,
    title: name,
    modal: true,
    draggable: true,        
    open: function( ) { 
        $(this).load(url);           
    }, 
 });

$('#dialog-model').dialog('open');
return false;
}

function CloseDialogmodel() {    
    $('#dialog-model').dialog({
        autoOpen: false,
        resizable: true,     
        title: name,
        modal: true, 
    });

    $('#dialog-model').dialog('close');
 }


function CloseDialogModelAndReloadParent() {    
   CloseDialogmodel(); }

The code behind on aspx page:

 Private Sub btnDone_Click(sender As Object, e As EventArgs) Handles btnDone.Click
 'do something on server
  Dim cs As ClientScriptManager = Page.ClientScript
  cs.RegisterStartupScript(Page.GetType (), "closeandload", "CloseDialogBoxAndReloadParent();", True)
End Sub

Hope someone tell me how to resolve the problem, so I can close the popup page and reload it. Thanks in advance.

Answer 1

I have same issue and I handled it like below:

Child.aspx-Markup

<div class="button">   
    <asp:Button ID="btnDone" Text="Done" runat="server" />

    <a ID="lnkClose" onclick="DecideForParent(false,true);return false;">
        Close
    </a>
</div>

<script type="text/javascript">
    function DecideForParent(AllowReferesh, AllowClose) {
        try {
            if (AllowReferesh)
                window.opener.HandlePopupResult();
        }
        catch (ex) {
        }
        // Close dialog
        if (AllowClose)
            $('#dialog-model').dialog('close');
    }
</script>

Child.aspx-Code behind (C#)

private void btnDone_Click(object sender, EventArgs e) 
{
    // Do something ...
    Page.ClientScript.RegisterStartupScript(this.GetType(), "CallreturnToParent", "$(window).load(function () { DecideForParent(true,true);return false;});", true);
}

Parent.aspx-Markup

<script type="text/javascript">
    function HandlePopupResultLURow() {
        document.getElementById('<%=btnRefresh.ClientID%>').click();
    }
</script>

Parent.aspx-Code behind (C#)

private void btnRefresh_Click(object sender, EventArgs e) 
{
    // Refresh your data        
}

Answer 2

if i guess right, you create the dialog like this

$( "#dialog-confirm" ).dialog({
  //....
  modal: true,
  buttons: {
    "Do Action": function() {
              CloseDialogBoxAndReloadParent();
    },
    "Cancel" : function() {
     CloseDialogBox();

    }
  }
});

} );

if you add the element to the parameters

 "Cancel" : function() {
     CloseDialogBox(this);

    }

you can access the right element

function CloseDialogBox(element) {
$(element).dialog('close');

}