JQuery blockui & ASP.NET postback conflicts

Question

Background:

I'm using jquery blockui 2.31 on jquery 1.3.2, on ASP.NET 2.0.

I'm using the dialog to show a (normally) hidden DIV as sort of a pop-up modal dialog, with ASP.NET server side controls in it (for simplicity's sake, an asp:Button). There's no AJAX, or not guaranteed to be any.

One of the things jquery blockui does, if you pass it some html elements--is it will remove the control from its place in the page, and append it to the body.

ASP.NET 2.0 seems to want controls that post back to be in the form you can find with $(#aspnetForm). jquery blockui just moved them to the body, so the postback never fires.

The method is an instance method and probably won't work well as static (references logged in user and page controls...)

I've done some digging:

I modified jquery blockui to append to the form (and wrestled with the selector to remove the block) but it borks IE6 and IE7--the overlay starts at the form and the entire dialog appears off-center. Hiding the overlay is not an option, and I really hate messing with IE-specific css & IE-specific script.

I tried appending some layers to the body and some to the form, but the body layers always show on top of the form layers (so the opaque layer that blocks input will also block the input on the div I'm trying to show).

I'm thinking the solution is in having the div call a hidden dummy anchor to execute the original button's postback. sontek suggested this in his answer to a related question.

My actual question:

Am I on the right track with the fake postback trick? I suppose that if I'm relying on jquery for modal dialog functionality I shouldn't be worried about fallback.

Or, should I continue to muck about with the styling of the form addition?

Answer 1

You're pretty much stuck putting the tags back within the form tag if you want normal asp.net behavior such as the events to fire.

That being said, if you are stuck on using the jQuery modal, I don't think triggering the postback is such a bad thing. As you mentioned from the linked/related question, you can get the postback reference GetPostBackEventReference in your code-behind and pass in the control who's event you want to fire, such as:

//assuming your button is btnMyButton and
Page.ClientScript.GetPostBackEventReference(btnMyButton, null);

You could attach this javascript call to any other button, including the button you're moving around outside the form tag. This will essentially wireup the postback and raise that control's events as usual.

Not the most elegant solution but I think you're on the right track with it if you need to use jQuery modal.