jQuery colorbox ломает постбэки в ASP.NET Web Forms

Question

У нас есть проект веб-форм, и в нем я хочу использовать плагин colorbox jQuery, чтобы открыть маленькое окно с кнопкой отправки.Поскольку мы используем веб-формы, тег формы не может быть частью colorbox.Проблема в том, что когда colorbox загружает элемент из DOM в colorbox, он фактически перемещает его в верхнюю часть тела в абсолютно позиционированный элемент.

Обычно это нормально, но фактически вынимает содержимое из тега формы.Это делает так, чтобы кнопки отправки внутри цветового ящика больше не вызывали обратной передачи.

Вот скрипка, представляющая проблему: http://jsfiddle.net/Chevex/vbLFD/

Если вы нажмете кнопку отправки изменений, вы заметите, чтоформа сообщений в Google и окно загружается с Google.Однако, если вы щелкнете по ссылке, чтобы загрузить DIV в colorbox, а затем нажмете кнопку отправки из colorbox, ничего не произойдет.Кнопка была удалена из тега формы.

Есть ли простое исправление для этого поведения?

Редактировать

Я думал о том, чтобы отправить форму с помощью jQuery, как в этой скрипке: http://jsfiddle.net/Chevex/vbLFD/6/

Проблема в том, что если DIV содержит другие элементы ввода, например текстовые поля, то они тоже будут удалены из тега формы.Таким образом, даже если форма будет отправлена ​​с помощью jQuery, входные значения, которые должны были быть размещены с формой, не будут включены.

Казалось бы, единственный способ исправить это - оставить colorbox в пределахФорма как-то.

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 для глобальной формы, но он не так быстр, как идентификатор.

Answer 3

Цветное поле добавляет скрытый контейнер к тегу , который находится вне тега asp ...

Решение:

Добавить тег вместо тега

В файле jquery.colorbox.js найдите следующую строку:

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

замените его следующей строкой:

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

Answer 4

Ниже открывается цветная коробка в форме 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;
  });
});