Jquery – Nested ASP.Net web forms + nyromodal : Postbacks die after modal is closed

asp.net-ajaxjquerynyromodalwebforms

I have an ASP.Net web page, which uses a Master Page template.

The page has an UpdatePanel with some basic AJAX functionality (change the value of a DropDownList and the UpdatePanel will refresh). This is all working nicely.

I also have a link that pops up a nyromodal Modal, inside the modal, another ASP.Net web form is loaded.. Because I want this page itself to have its own functionality and not just be a static page etc. Its a "Create New" dialogue to be precise. So it creates a new record, then when it closes you go back to the main "list of records" page etc.

I'm using the following jQuery code to initiate the nyromodal calls. This code also includes various other tweaks and settings to make nyromodal more compatible with ASP.Net, as this is about the 5th successive incompatibility I've faced and solved between nyromodal and ASP.Net (Lesson: Stay away from ASP.Net)

$(document).ready(function(){
    $(function(){
      $('.modal').live('click', function(evt){
        $(this).nyroModalManual({'blocker':'#aspnetForm',minWidth:640,minHeight:400,endShowContent:function(elt, settings) { $('input:text:first', elt.content).focus(); }});
        evt.preventDefault();
      });
    });
});

This code is working very well (Thanks Brian) as it solves a couple of other problems with ASP.Net and nyromodal working together. Its even using the blocker:#aspnetForm bit which stops nyromodal from going outside of ASP.Net's main postback form named aspnetForm, which is meant to solve an almost identical problem.

BUT..

The web page that I'm loading into my modal, is ALSO a .Net web form. So it also has its own built-in postback aspnetForm of course. So when the modal appears and I use FireBug to check the DOM structure, I actually have two ASP.Net forms now (nested). And because nyromodal is essentially just a div (or a few divs), the form tags are essentially nested.

So I think this is screwing things up big time. It's actually crashing IE7 totally (fatal exceptions). IE7 + FireFox: When I close the dialogue, my main web form won't postback any more. I think its been very confused by the 2 form tags that were there a moment ago.

It should be a really simple requirement to be able to open an ASP.Net web form as the contents of your modal using nyromodal. I do blame it on ASP.Net for being so lame and putting a mandatory "form" tag in every page. If I was using PHP, I wouldn't have experienced ANY of these problems I've had today, but I'm stuck using ASP.Bloat for work purposes.

Any thoughts or insight greatly appreciated! 🙂

Best Solution

Have you considered opening the page in the modal as an iFrame so that its contents (the new form tag, etc.) will not interfere with the host page?

$(this).nyroModalManual({type:'iframe'});