Fancybox - botón ASP.NET no funciona

Question

Acabo de determinar el uso de Firebug que cuando se crea la ventana Fancybox realmente toma todos mis controles ASP.NET (contenidos en la etiqueta DIV) y los coloca fuera de la etiqueta FORM. Así que supongo que esta es la razón por la cual el botón ASP.NET no hace nada, se coloca fuera del formulario.

Entonces, ¿tiene alguna sugerencia de cómo puedo evitar esto (o hacer que el botón ASP.NET funcione), aparte de usar un diálogo modal completamente diferente?

EDIT: OK, las personas informan que algunas de las soluciones propuestas les funcionan en ciertas versiones. Por lo tanto, asegúrese de leer todas las respuestas/desplácese hasta el final para saber cómo solucionar este problema en diferentes versiones de Fancybox.

Answer 1

es necesario cambiar este (en algún lugar alrededor de la línea 719 de 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>') 
     ); 

a

$('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>') 
); 

Answer 2

He estado tratando de averiguar esto problema de toda la semana, que en realidad no han tenido suerte

me encontré con este artículo

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

Explica cómo hacer que la devolución de datos funcione con el cuadro de diálogo de jQuery UI.

Si no es 100% necesario usar una caja elegante, entonces definitivamente vale la pena probar este método, hoy me ha ahorrado muchas molestias.

Answer 3

La actualización anterior no funcionó, la fancybox todavía se agregó fuera del formulario. Luego comenté esas 6 líneas en jquery.fancybox-1.3.2.js y descubrí que no estaban siendo utilizadas en absoluto en mi código.

Hice una búsqueda en 'cuerpo' en los archivos de la FancyBox js y lo cambió a 'forma' en:

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

La fancybox ahora se está agregando al formulario y los controles del servidor están funcionando.

Answer 4

línea 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>') 
     ); 

Obras (mi asp: Button hace devolución de datos) para mí en FF y gracias IE9, para la solución

Answer 5

Sin alterar el FancyBox fuente, poner esto después de la secuencia de comandos FancyBox (fuera de los eventos de carga !!!):

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

Answer 6

FancyBox Versión: 2.1.2

Línea 1782 de jquery.fancybox.js

cambiar esta situación:

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

A esto:

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

Answer 7

utilizo FancyBox 1.3.4 para mostrar una página aspx como una página emergente en el marco flotante FancyBox. Pero el botón en la página emergente no causa devolución de datos. No cambié nada como dijiste antes. Más bien hice lo siguiente.

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. 

} 

Answer 8

Fancybox 1.3.4 actually does postback.

Pero si está cerrado en OnClientHaga clic en eso antes de que el servidor haga clic en el evento que no será una devolución de datos. Así lo anterior es la solución a este problema. (Añadiendo doPostBack en la función javascript).

Normalmente, Fancybox 1.3.4 realiza una devolución de datos sin ningún cambio en sus archivos .Js. Pero para cerrarlo, necesita escribir esta línea ScriptManager.RegisterClientScriptBlock(this, GetType(), "", "parent.$.fancybox.close();", true); en el evento de clic del lado del servidor. Solo entonces se llama a ambos eventos del lado del servidor y también se cierra fancybox.

Pero Fancybox 2.1.3 (último) hace un evento de postback después de que se cierra en OnClientClick.

Answer 9

FancyBox Versión 2.1.4

cambiar estas 2 líneas

alrededor de la línea 2069:

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

a

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

y alrededor de 1960: Línea

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

a

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

También es posible usar appendTo pero eso depende de ti. En mi caso, necesitaba prependTo.

Answer 10

Para cualquiera que necesite una respuesta simple a este problema utilizando Fancybox versión 2 hay una manera mucho más fácil de hacerlo. Todo lo que tiene que hacer es añadir los padres: "forma: en primer lugar" en el código de ejemplo

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

entonces esto va a añadir los elementos FancyBox en el DOM dentro de la etiqueta de formulario, en lugar de en el interior del cuerpo de la etiqueta.

Answer 11

Si la actualización de la matriz es una solución que sirve al propósito, puede actualizar onClosed:

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

Answer 12

Sin ningún cambio en el archivo de la biblioteca FancyBox js, lo que funciona para mí era más adelante,

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

He movido el div de fancybox dentro de la etiqueta de formulario, y ahora, el botón del lado del servidor funciona como un amuleto :) Todo lo mejor ... Espero que esto también funcione para usted. .:)

Answer 13

que no es necesario cambiar ningún código o cualquier biblioteca ... Intenta esto ..

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

Answer 14

Heres la peor solución posible, sin embargo funcionó para mí. Necesitaba faceybox y codebehind al mismo tiempo. Configura tu elegante caja para cargar cuando se presiona el botón. Luego, cerrar los valores de paso a otra página de C# y hacer el código en la Carga de página.

<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; 
     } 
    }); 
}); 

y luego simplemente la "clase =" cosa aquí:

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