jQuery colorbox breaks postbacks in ASP.NET Web Forms

Question

We have a web forms project and in it I want to use jQuery's colorbox plugin to pop up a small window with a submit button. Because we are using web forms, the form tag cannot be part of the colorbox. The problem is that when colorbox loads the element in the DOM into the colorbox, it actually moves it to the top of the body into an absolutely positioned element.

Normally this is fine, but it actually takes the contents out of the form tag. This makes it so that submit buttons within the colorbox no longer cause post backs.

Here is a fiddle representing the problem: http://jsfiddle.net/Chevex/vbLFD/

If you click the submit changes button you will notice that the form posts to google and the window loads with google. However, if you click the link to load the DIV into colorbox and then click the submit button from within colorbox, nothing happens. The button was taken out of the form tag.

Is there an easy fix for this behavior?

Edit

I thought of submitting the form with jQuery as in this fiddle: http://jsfiddle.net/Chevex/vbLFD/6/

The problem with that is if the DIV contained other input elements, like text boxes, then they too would be removed from the form tag. So even if the form gets submitted with jQuery, the input values that were supposed to be posted with the form will not be included.

It would seem the only way to fix this would be to have colorbox stay within the form somehow.

Answer 1

We're using Colorbox v1.4.33, and applying the accepted answer did not solve the problem.

Colorbox creates two separate DIV elements, one with ID=colorbox and one with ID=cboxOverlay. You need to move both of these DIV elements in order for the Colorbox dialog to render correctly and the ASP.NET postback to trigger.

    $(function () {
        $("#btnBoligforholdAdd").colorbox({
            inline: true,
            href: "#modalDialog_Boligforhold",
            width: "450px",
            closeButton: false,
            opacity: 0.5,
            onOpen: function () {
                $('#aspnetForm').append($('#cboxOverlay'));
                $('#aspnetForm').append($('#colorbox'));
            }
        });
    });

Answer 2

You can use a simple jQuery block to move it to the top of the main form.

$(document).ready(function() {
  var colorbox = $("#colorbox");
  colorbox.remove(); // Removes from dom
  $('form#idOfForm').prepend(colorbox);
});

Now anything you load in there should be within the global form.

An alternative selector you can use is body > form for the global form, but it's not as fast as an id.

Answer 3

The below opens a colorbox of a 2 button form which allowsthe data to be saved back to the page behind function on the Save button.

1) The actual inline form

<div style="display: none;">
  <div id="formcontent" class="form-horizontal padder">
    <!--no <form> tag here as its inline content-->
  </div>
</div>

2) Javascript

$(document).ready(function () {    
  $("#colorbox, #cboxOverlay").appendTo('form:first'); //required for colorbox forms!

  $("#<%=cmdAdd.ClientID %>").colorbox({ inline: true, href: "#ColorBoxNewDiagram" });

  $("#cmdNewDiagram").click(function () {
    $.fn.colorbox.close();
  });

  $("#<%=cmdCancelAdd.ClientID%>").click(function () {
    $.fn.colorbox.close();
    return false;
  });
});

Answer 4

Color box appends the hidden container to the < body> tag which is outside the asp < form > tag...

Solution is:

Append to < form > tag instead of the < body > tag

In the jquery.colorbox.js file, search for the following line:

$(document.body).append($overlay, $box.append($wrap, $loadingBay));

replace it with the following line:

$('form').prepend($overlay, $box.append($wrap, $loadingBay));