jQuery colorbox打破了ASP.NET Web窗体中的回发

Question

我们有一个Web窗体项目，在其中我想使用jQuery的colorbox插件弹出带有提交按钮的小窗口。 因为我们使用的是Web表单，所以form标签不能是colorbox的一部分。 问题在于，当颜色盒将DOM中的元素加载到颜色盒中时，实际上会将其移到主体的顶部，成为绝对定位的元素。

通常，这很好，但是实际上会将内容从form标记中删除。 这样可以使颜色框中的提交按钮不再引起回发。

这是代表问题的小提琴： http : //jsfiddle.net/Chevex/vbLFD/

如果单击“提交更改”按钮，您会注意到该表单已发布到google，并且该窗口已加载google。 但是，如果您单击链接以将DIV加载到colorbox中，然后在colorbox中单击“提交”按钮，则不会发生任何事情。 该按钮已从form标签中取出。

是否有解决此问题的简便方法？

编辑

我想到了用jQuery提交表单，如下所示： http : //jsfiddle.net/Chevex/vbLFD/6/

这样做的问题是，如果DIV包含其他输入元素，例如文本框，那么它们也将从表单标签中删除。 因此，即使表单是使用jQuery提交的，原本应该与表单一起发布的输入值也不会包括在内。

似乎解决此问题的唯一方法是使颜色框以某种方式保留在表单中。

Answer 1

我们正在使用Colorbox v1.4.33，应用接受的答案并不能解决问题。

Colorbox将创建两个单独的DIV元素，一个元素的ID = colorbox，另一个元素的ID = cboxOverlay。 您需要移动这两个DIV元素，以便Colorbox对话框能够正确呈现，并触发ASP.NET回发。

    $(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

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

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

现在，您在其中加载的所有内容都应该在全局窗体内。

您可以使用的替代选择器是body > form作为全局表单，但它的速度不如id。

Answer 3

下方将打开一个2按钮形式的颜色框，该颜色框允许将数据保存回到“保存”按钮上后面的页面。

1）实际的内联表格

<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

颜色框将隐藏的容器附加到<body>标签，该标签位于asp <form>标签之外...

解决方法是：

附加到<form>标签而不是<body>标签

在jquery.colorbox.js文件中，搜索以下行：

$（document.body）.append（$ overlay，$ box.append（$ wrap，$ loadingBay））;

将其替换为以下行：

$（'form'）。prepend（$ overlay，$ box.append（$ wrap，$ loadingBay））;

jQuery colorbox打破了ASP.NET Web窗体中的回发

问题描述

编辑

4 个解决方案

解决方案1
4 2014-02-04 14:54:14

解决方案2
3 已采纳 2011-08-03 16:29:37

解决方案3
0 2016-01-08 15:55:13

解决方案4
0 2017-11-07 13:20:42

jQuery colorbox打破了ASP.NET Web窗体中的回发

问题描述

编辑

4 个解决方案

解决方案1 4 2014-02-04 14:54:14

解决方案2 3 已采纳 2011-08-03 16:29:37

解决方案3 0 2016-01-08 15:55:13

解决方案4 0 2017-11-07 13:20:42

解决方案1
4 2014-02-04 14:54:14

解决方案2
3 已采纳 2011-08-03 16:29:37

解决方案3
0 2016-01-08 15:55:13

解决方案4
0 2017-11-07 13:20:42