Problem with postback on a lightbox form in ASP.NET

StackOverflow https://stackoverflow.com/questions/5031438

Question

I need to display a submission form inside a lightbox of an ASP.NET page. If there is an error in the submission form such as user name not being unique, the postback then renders the ASP.NET page outside the lightbox. How can I solve that problem?

Here is a code snippet of the .aspx page that includes the lightbox:

<...>
<p>
    QunatumMotors is located in Detroit. Please use the link below to contact us.</p>
<p>
 <!--START CONTACT FORM OVERLAY-->

        <!-- first overlay. id attribute matches the selector -->
        <a href="**../informational/contactform.aspx"** rel="#overlay" style="text-decoration:none">
        &gt; Click here to contact us
        </a>

        <div class="simple_overlay" id="form_contact">
            <!-- overlayed element -->
            <div class="apple_overlay" id="overlay">
                <!-- the external content is loaded inside this tag -->
                <div class="contentWrap"></div>
            </div>
        </div>
 <!--END CONTACT FORM OVERLAY-->

<p>&nbsp;</p><p>&nbsp;</p>
<...>

contactform.aspx is just a standard .aspx page with form fields, field validators, label to display errors (e.g. username not unique) and submit button. When a postback occurs on contactform.aspx then (of course) it is rendered outside the lightbox. How can I display the postback of contactform.aspx inside the lightbox? Thanks for your help!

Was it helpful?

Solution

The lightbox content isn't like another tab or window: it becomes part of the host page.

In other words, it incorporates the HTML generated by contactform.aspx into the host page's document object model (DOM). Activating the lightbox adds a form to the host page that posts to the contact page:

 <html><body>
     <!-- host page content here -->
     <!-- contact form content -->
     <form action="contactform.aspx">
         <!-- text boxes, buttons, etc. -->
     </form>
 </body></html>

When the user submits, their browser issues a new request: a POST to contactform.aspx. That request returns the contact form's HTML.

There are several ways you might work around that:

  • Use ajax to perform the update asynchronously. (You might even be able to do this by using an UpdatePanel in contactform.aspx, but I don't use them much anymore and haven't though that through).

  • Convert contactform.aspx into a control (if you're using it in several places) and embed it in the host page.

  • At the end of the contact form's submit handler, redirect to the host page with a flag that instructs the page to immediately activate the lightbox. (This has numerous issues and sounds pretty fragile ... but it's plausible.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top