How to "break out" of a JQuery color box
<p>If I have a JQuery <code>colorbox()</code> using an iframe, and there is a <code>&lt;form&gt;</code> in that (e.g. login form), then:</p>

<ul>
<li>If the submission of the form is <strong>not successful</strong> (e.g. mandatory field empty) then the form should be re-displayed with the error <strong>in the iframe</strong></li>
<li>If the form is <strong>successful</strong> (e.g. password correct), the <strong>surrounding page</strong> should be reloaded with the result</li>
</ul>

<p>Only the server request can know if the submission is successful or not (e.g. password correct for a login form), therefore one cannot use a <code>target=</code> parameter on the <code>&lt;form&gt;</code> tag. (As that must be set on the requesting page, where the success of the response is not yet known.)</p>

<p>How should one go about achieving that? Right now I do the following:</p>

<ul>
<li>The <code>&lt;form&gt;</code> has no particular "target", i.e. the result is displayed in the iframe</li>
<li>If the form submission is unsuccessful, re-display the form in the iframe (the simple case)</li>
<li>If the form submission is successful then display a "response" page in the iframe, which contains Javascript, to refresh the whole page.</li>
</ul>

<p>The Javascript looks like the following (the <code>wicket:id="link"</code> means that the web framework adds a <code>href=</code> to the link, to specify the resulting page which should be displayed in the whole browser window).</p>

<pre><code>&lt;a wicket:id="link" id="linkToSuccessPage" target="_top"&gt;&lt;/a&gt;
&lt;script&gt;
  $(function() {
    top.$.colorbox.close();
    top.location.href =
      document.getElementById("linkToSuccessPage").getAttribute("href");
  });
&lt;/script&gt;
</code></pre>

<p>The trouble with this approach is, firstly it feels inelegant, but it creates an odd visual effect. The colorbox firstly closes, then there this redirect happens. The other option is not to close the colorbox, but then the contents of the colorbox gets replaced by a blank page while the redirect happens.</p>

<p>Any better ways? This must be a common problem, must have a common elegant solution?</p>

<p>P.S. I have to use the <strong>iframe</strong> method of the colorbox (rather than JQuery taking the form and placing it in a <code>&lt;div&gt;</code> in the page) for the following reasons: the web framework I'm using (Wicket) submits forms to a relative URL. The relative URL in the <code>&lt;form&gt;</code> is relative to the URL of the page containing the form (= the colorbox contents). If a <code>&lt;div&gt;</code> is used, then this form is inserted into the surrounding page which has a different URL, therefore the relative URLs in the form submission do not work.</p>
