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

Question

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! :)

Answer 1

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

Answer 2

Im actually the person who reported that issue. Firstly, have u tried the ASP.NET nyroModal plugin that jimbobmcgee (on the same page u linked to) developed? I haven't as yet, as I coludnt find the time to go thru the contained documentation. If u do tho, let me know how i works out for u.

This is actually perfect timing...Another alternative, which is what Im in the midst of investigating, is using normal HTML pages instead of WebForms in the modal. So, I intend to wrap my server-side code within a webservice, and use jQuery to make a call to it, and return a JSON response.

Forgive the accuracy of my explanation, as I just started with webservices and page methods, so I am too learning. Hence the reason my asking for someone to post a simple "Hello World" example.

Hope that helps a bit.

Answer 3

If you put this in the head of a page. It allows nyro modal closing to simulate a postback.

<script type="text/javascript">
$(document).ready(function(){$.nyroModalSettings({
  modal: true,minWidth: ###,minHeight: ###,
  endRemove:function(){
   document.location='pageYouWantToRefresh.aspx';
  }    
});});  
</script>

just change document.location and it will go there when the window closes.

Answer 4

The easiest solution I've found sofar is to load the popup window as an iframe, not inline or via AJAX. Just a thought. :)