Search code examples
jqueryasp.netfancybox-2

Button Click does not fire with fancybox2 from webForms


I have a custom control and it's been registered in main page in a hidden div. On page load I show a modal window (fancybox 2) with content the one that has the hidden div.

My problem is that this control has a button and it doesn't fire from the fancybox.

I tried this Fancybox - ASP.NET button not working but nothing changed.

Does anyone know how to fix this? The preferable would be a fix without amending the fancybox.js.

The code where the control is placed in

<a href="#inline" style="display: none" id="trigerButton"></a>
<div id="inline" style="display: none; width: 500px;">
    <asp:PlaceHolder runat="server" ID="PhCtrl"></asp:PlaceHolder>
</div>

from codeBehind

var ctrlName = LoadControl("~/Path/control.ascx");
ctrlName.ID="ctrlID";
PhCtrl.Controls.Add(ctrlName);
var sb = new StringBuilder();
sb.Append("$(document).ready(function() {");
sb.Append("$('#trigerButton').fancybox({modal:true}).trigger('click');");
sb.Append("$('#clickNo').click(function(){$.fancybox.close(true)});");
sb.Append("});");
ClientScript.RegisterStartupScript(typeof(T), "_script", sb.ToString(), true);

The custom control

It has a button and this button doesn't fire

<asp:Button runat="server" ID="Button1" Text="Upgrade" OnClick="Button1_click" />
  protected void Button1_click(object s,EventArgs e)
    {
        //Do something 
    }

I would appreciate any suggestions

Thanks

SOLUTION

I didn't manage to find a solution without editing the fancybox.js, though I replaced every

appendTo('body')

with

appendTo('form:first')

Solution

  • The main reason for this issues is because the funcybox is making modifications on the DOM struct in order to make the dialog and place it somewhere in the page.

    In your case the issue can be that the end rendered control is place the final input button outside the asp.net form, and that's why is not even fired.

    Update

    I found a similar question, on similar box. The solution may also work here

    Its add the dialog creation inside the form using the

    jQuery('#dialogof').appendTo('form');
    

    ASP.NET Form Fields Not POSTing from colorbox