Fancybox - кнопка ASP.NET не работает

Я только что определил использование Firebug, что при создании окна Fancybox он фактически принимает все мои элементы управления ASP.NET(содержащиеся в теге DIV) и помещает их вне тега FORM. Поэтому я предполагаю, что это причина, почему тогда кнопка ASP.NET ничего не делает - она помещается вне формы.

Итак, есть ли у вас какие-либо предложения о том, как я могу предотвратить это (или заставить эту кнопку ASP.NET работать), кроме использования совершенно другого модального диалога?

EDIT: ОК, люди сообщают, что некоторые из предлагаемых исправлений работают на них в определенных версиях. Поэтому обязательно прочтите все ответы/прокрутите страницу вниз, чтобы исправить эту проблему в разных версиях Fancybox.

Ответы

Ответ 1

Вам нужно изменить это (где-то вокруг строки 719 jquery.fancybox-1.3.1.js):

$('body').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
        );

$('form').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
);

Ответ 2

Для тех, кому нужен простой ответ на эту проблему, используя Fancybox версии 2, гораздо проще это сделать. Все, что вам нужно сделать, это добавить родителя: "form: first" в коде, например

    $(document).ready(function () {
        $(".various").fancybox({
            parent: "form:first",
            fitToView: true,
            width: '300px',
            height: '100px',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none',
            modal: false
        });
    });

то это добавит элементы fancybox в dom внутри тега формы, а не внутри тега body.

Ответ 3

Fancybox Version 2.1.4

Измените эти 2 строки

Вокруг строки 2069:

document.all && !document.querySelector ? $('html') : $('body');

document.all && !document.querySelector ? $('html') : $('form:first');

и вокруг линии 1960:

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');

this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');

Вы также можете использовать appendTo, но это зависит от вас. В моем случае мне нужно было сделать preendTo.

Ответ 4

Я пытался выяснить эту проблему всю неделю, мне действительно не повезло

Я только что наткнулся на эту статью

http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html

Это объясняет, как получить обратную связь с диалоговым окном jQuery UI.

Если это не 100% необходимо использовать причудливый бокс, то этот метод определенно стоит попробовать, он спас мне много хлопот сегодня.

Ответ 5

Без изменения источника FancyBox поместите это после FancyBox script (вне любых событий загрузки!!!):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">

    // Override $.fancybox.init to fix ASP.NET PostBack bug;
    var fancyboxInitOld = $.fancybox.init;
    $.fancybox.init = function () {
        fancyboxInitOld.apply(arguments);
        $("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
    };

    // Your code ...

</script>

Ответ 6

Приведенное выше обновление не сработало для меня, fancybox все еще добавлялся вне формы. Затем я прокомментировал эти 6 строк в jquery.fancybox-1.3.2.js и обнаружил, что они вообще не используются в моем коде.

Я сделал поиск в 'body' в файлах fancybox js и изменил его на 'form' в:

jquery.fancybox-1.3.2.js(ln 484)
jquery.fancybox-1.3.2.pack.js(ln 27, ln 41)

Теперь в форму добавляется fancybox, и серверные элементы управления работают.

Ответ 7

jquery.fancybox-1.3.4.js строка 1040

//$('body').append(
   $('form').append(
            tmp = $('<div id="fancybox-tmp"></div>'),
            loading = $('<div id="fancybox-loading"><div></div></div>'),
            overlay = $('<div id="fancybox-overlay"></div>'),
            wrap = $('<div id="fancybox-wrap"></div>')
        );

Работает (мой asp: Button делает postback) для меня на FF и IE9, спасибо за решение

Ответ 8

Fancybox Version: 2.1.2

Строка 1782 из jquery.fancybox.js

Измените это:

this.el     = document.all && !document.querySelector ? $('html') : $('body');

Для этого:

this.el     = document.all && !document.querySelector ? $('html') : $('form:first');

Ответ 9

Я использую Fancybox 1.3.4, чтобы показать страницу aspx как всплывающее окно в fancybox iframe. Но кнопка на всплывающей странице не вызывает обратную передачу. Я ничего не изменил, как вы говорили раньше. Скорее я сделал следующее.

 function check() 
 {
            var validated = Page_ClientValidate();
            if (validated) {
                __doPostBack('<%=bur.ClientID%>','');             
                parent.$.fancybox.close();                                                       
                return true;
            }
            else 
            {
                return false;
            }
 }



 <asp:Button ID="bur" runat="server" Text="ser"  
            OnClientClick="check()"   />


protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.

}

Ответ 10

Fancybox 1.3.4 фактически выполняет обратную передачу.

Но если он закрыт в OnClientClick, который находится перед событием на стороне сервера, он не будет возвращать. Так вышесказанное является решением этой проблемы. (Добавление doPostBack в функцию javascript).

Обычно Fancybox 1.3.4 выполняет обратную передачу без каких-либо изменений в своих .Js файлах. Но чтобы закрыть его, нужно написать эту строку ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); в событии клика на стороне сервера. Только тогда вызываются и события serveride, и fancybox также закрывается.

Но Fancybox 2.1.3 (последнее) делает событие обратной передачи после закрытия в OnClientClick.

Ответ 11

Если обновление родителя является решением, которое служит этой цели, вы можете обновить onClosed:

$(".fancybox").fancybox({
  'onClosed': function() {
   parent.location.reload(true);
  } 
});

Ответ 12

Без изменения файла библиотеки fancybox js, то, что работает для меня, было ниже,

$('.your-selector').fancybox({ 
        afterShow: function () {
            $('.fancybox-overlay').appendTo('form');
        }
});

Я переместил fancybox div внутри тега формы, и теперь кнопка на стороне сервера работает как шарм:) Все лучшее.. Надеюсь, это сработает и для вас..:)

Ответ 13

Вам не нужно менять какой-либо код или какую-либо библиотеку... Просто попробуйте это.

$('.fancybox').fancybox({
     parent: "form:first", // jQuery selector
});

Ответ 14

Это худшее решение, но это сработало для меня. Мне одновременно нужны были faceybox и codebehind. Настройте свой причудливый ящик для загрузки при нажатии кнопки. Затем onClosed передать значения на другую страницу С# и сделать код на странице Load.

<script type="text/javascript">
    $(document).ready(function () {
    $(".fancy").fancybox({
        onClosed: function () {
            window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
                "&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
                "&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
        }
    });
});

а затем просто "class=":

<asp:Button ID="Button1" href="logo.png" runat="server" class="fancy" Text="Create" Width="109px" BorderColor="#009933" OnClick="Button1_Click" />

Ответ 15

Для любого другого бедного человека, который все еще вынужден использовать WebForms, вот мой ответ, который сработал (я нашел его после того, как почти бросил и прочитал модальную документацию jquery):

$(".pensionPartnerEdit").fancybox({
    //fancystuff
}).parent().appendTo('form');