Question

My lightview modal keeps closing after an Ajax request. Meaning when I make an Ajax request and after that I call a lighview for a pop-up, the pop-up closes right away after loading the pop-up page. If I do not make an Ajax request, the pop-up works fine and does not close unless done by the user.

Can anyone help me out what I am doing wrong? Below is the code that simulates my problem.

<script language="JavaScript" type="text/javascript">
Event.observe(
    window,
    'load',
    function ( event ) {
        $( 'ajaxBtn' ).observe(
            'click',
            function( event ) {
                ajaxCall( 'ajax.png' );
            });
    });

function ajaxCall( img_url )
{
    Lightview.show({ href: img_url, rel: 'image', options: { width: 100, height: 100, autosize: false, keyboard: true, overlayClose: false, menubar: false } });

    document.observe("lightview:opened", function(event)
    {
        new Ajax.Request(
            'ajax_post.html',
            {
                method: 'POST',
                parameters: $('frmName').serialize( true ),
                onComplete: ajaxSuccess,
                onFailure: ajaxFailed
            });
    });
}

function ajaxSuccess( )
{
    Lightview.hide();
    alert("Ajax call success");
}

function ajaxFailed()
{
    Lightview.hide();
    alert("Ajax call failed");
}
</script>

<form accept-charset="utf-8" name="frmName" id="frmName" method="post">
    Name: <input type="text" name="full_name" id="full_name" value="" />
    <input type="hidden" name="id" id="id" value="1" /><br />

    <img id="ajaxBtn" src="ajaxBtn.jpg" style="cursor: pointer;" title="Ajax Call" alt="Ajax Call" border="0" />

    <a href="pop-up.html" class="lightview" title="pop-up :: :: topclose: true, width: 600, height: 180">pop-up window</a>
</form>

Thanks in Advance.

Answer 1

On ajaxSuccess() and ajaxFailed() function calls Lightview.hide(), I think that’s the cause.
Did you try to remove Lightview.hide()?