jQuery的颜色框突破回传的ASP.NET Web窗体 [英] jQuery colorbox breaks postbacks in ASP.NET Web Forms

问题描述

我们有一个web形式的项目，并在它，我想用jQuery的颜色框插件弹出一个小窗口，一个提交按钮。因为我们使用Web表单，表单标签不能是颜色框的一部分。的问题是，当颜色框加载在DOM的元素进入颜色框，它实际上它移动到主体的顶部成绝对定位的元素。

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.

下面是一个小提琴重新presenting问题：
http://jsfiddle.net/Chevex/vbLFD/

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

如果您点击提交按钮的变化，你会发现表单发送到谷歌和窗口加载谷歌。但是，如果您单击的DIV加载到颜色框链接，然后从颜色框内点击提交按钮，没有任何反应。该按钮被带出的形式标记。

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?

我想在这拨弄提交与jQuery的形式为： http://jsfiddle.net/ Chevex / vbLFD / 6 /

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

这样做的问题是，如果DIV包含在其他投入要素，如文本框，然后他们也会从表单标签被删除。所以，即使形式被使用jQuery提交，被张贴被认为是输入值的形式将不包括在内。

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.

推荐答案

您可以使用一个简单的jQuery块将其移动到主窗体的顶部。

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.

您可以使用另一种选择是身体GT;形式全球的形式，但它不是一样快的ID。

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

这篇关于jQuery的颜色框突破回传的ASP.NET Web窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！