Search code examples
asp.netwebformsmagnific-popup

postbacks from inside not firing


I have a bit of ASP code that I'm trying to show/hide via Magnific Popup, by passing it a div from the page as a source.

<a href="#import-popup" ToolTip="Import New Proposal" class="open-popup-link">Insert New Record</a>
<div id="import-popup" class="white-popup mfp-hide">
    <span>Proposal to Import:</span>
    <asp:TextBox ID="txtPropNum" runat="server" />
    <asp:Button ID="btnImport" runat="server" Text="Import" OnClick="btnImport_Click" />
</div>

JS:

$(document).ready(function () {
    $('.open-popup-link').magnificPopup({
        type: 'inline',
        midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    });
})

The div displays and hides perfectly fine. I can't seem to get the asp:Button id="btnImport" to actually fire it's function (which right now is a MsgBox to display the contents of the asp:TextBox) though. In fact, I don't even see a post/get request being logged in my web console.

The button however, works fine when not located inside that div, and the TextBox is even accessible from code behind as well, so I know my actual click function is working. Any ideas what might be going on? Is Magnific somehow preventing a postback?


Solution

  • I wound up moving my popup's content to it's own page, then invoking magnific through the iframe type, as below:

    JS:

    $(document).ready(function () {     
        $('.open-popup-link').magnificPopup({
            type: 'iframe',
            iframe: {
                markup: '<div class="mfp-iframe-scaler" style="width:100px; height:100px;">'+
                        '<div class="mfp-close"></div>' +
                        '<div class="custom-mfp-border">'+
                        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                        '</div>'+
                        '</div>'
                },
            midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    
        });
    
    })
    

    Parent Page:

    <a href="/Proposals/ImportProposal.aspx" ToolTip="Insert New Record from ACT" class="open-popup-link">Insert New Record</a>
    

    Then my child page is essentially just the <div> I posted in the question.