Question

我正在使用facebox在灯箱内显示一个表单，没什么太令人兴奋的（只有几个日期选择器，一些文本框和一个复选框）。但是，我在回发时遇到问题，每当我从facebox回发时，它会在输入的开头添加一个'，'（所以“兔子”变成“，兔子”）现在，我看到ajaxcontroltoolkit中的modalpopup扩展器存在同样的问题，所以我认为这是一个常见的问题。

任何人~~都可以解释为什么发生这种情况，或者告诉我如何修复它？~~提供了解决这个问题的正确方法？我实际上已经做到了，而且效果非常好，但我真的不想回答我自己的赏金问题，所以其他人也试一试！

干杯，艾德

修改的

请参阅附件以获得正确的解决方案（我最终解决了这个问题，但不想破坏赏金问题，所以在此之前留下答案）。

Answer 1

为什么不修剪输出？只需删除每个字符串的'，'

Answer 2

我从未在ASP.NET中编程或者使用过facebox，但是这里有一些可能有用的小解决方案。

facebox源中有一个reveal函数，用于完成实际克隆：

reveal: function(data, klass) {
  $(document).trigger('beforeReveal.facebox')
  if (klass) $('#facebox .content').addClass(klass)
  $('#facebox .content').append(data) // <--- This does the cloning

额外的逗号显然来自重复的原始表单字段。您可以将click（）函数绑定到提交表单的提交按钮，并在该函数中删除其中一个克隆。由于此函数应在处理表单数据之前运行，因此应该处理重复项。

$("#my-submit-button").click(function() { $('#facebox .content').empty(); }

如果这不起作用，那肯定会。 Facebox有很多钩子可以在各种事件后运行你的代码。其中一个钩子是reveal.facebox或afterReveal.facebox。由于克隆是在揭示上完成的，因此您必须绑定自定义函数才能在此事件中运行，并在该函数中更改所有元素的ID /名称。为每个元素附加一个像_temp之类的随机单词。不是确切的代码，但我希望你能得到这个想法。

(document).bind('reveal.facebox', function() {
    $("#facebox .content > *").each( 
        // change the id's/name's 
    );
});

修改：

查看面向Facebox示例的html，看起来它位于自己的<div>内，并复制必须在该div中显示的任何内容。因此，样本面板框页面的结构可能如下所示：

<html> .. <form runat="server"> <div id="myForm"> // original form controls go here, probably hidden <input id="theId" type="text" value="" /> </div> <div id="facebox"> ... <div class="content"> // the original form is copied inside this space and then displayed // this is the one the user interacts with and makes changes to <input id="theId" type="text" value="new value" /> </div> ... </div> </form> .. </html>

因此，基于此结构和示例，带有id=theId的输入框会显示在div#myForm和div#facebox中。 div#facebox是具有我们需要的更新值的那个。

Answer 3

好的，以下是我修复它的方法：

更改

    function fillFaceboxFromHref(href, klass) {
....
        if (href.match(/#/)) {
            var url = window.location.href.split('#')[0]
            var target = href.replace(url, '')
            $.facebox.reveal($(target).clone().show(), klass)
....
    }

至

    function fillFaceboxFromHref(href, klass) {
....
        if (href.match(/#/)) {
            var url = window.location.href.split('#')[0]
            var target = href.replace(url, '')
            $.facebox.reveal($(target).show(), klass)
....
    }

将停止克隆输入，而是使用实际的div。

然后，它只是将内部内容重新附加到#aspnetform（或者#body，因为它最初使用[你必须改变它以允许asp.net回发]）然后在close.facebox中清除之前的情况。绑定，像这样：

    $(document).bind('close.facebox', function() {
/// two added lines to add the content back to the #aspnetForm, with display:none; (i.e. invisible)
        $('#facebox .content').children().css({'display' : 'none'});
        $('#aspnetForm').append($('#facebox .content').html());
/// extra line to make sure there's no flashing effect as the facebox closes: the content is still in there too!
        $('#facebox .content').children().css({ 'display': 'block' });
....

现在将使用原始div作为内容，避免逗号问题。但是，如果你想使用最初在页面上可见的div，那么在close.facebox绑定中需要一些额外的twiddling。

Facebox添加逗号以输入

3 个答案: