Magnific Popup page reverts to original format when try to send data

Question

I have a Magnific Popup page:

function dataLink(){
    $.magnificPopup.open({
        items: {
            src: 'datapage.html',
            type: 'ajax'
        },
        closeOnContentClick : false, 
        closeOnBgClick :true,
        showCloseBtn: false,
        enableEscapeKey : false,
        callbacks: {
            open: function(){
                $.magnificPopup.instance.wrap[0].addEventListener('focus', mpTable);
            },
            close: function(){
                $.magnificPopup.instance.wrap[0].removeEventListener('focus', mpTable);
            },
        }
    });
}

datapage.html has two tables, that I hide or show depending on the context (page is loaded with data1table showing and data2table hidden):

<div class="white-popup">
  <table id="data1table" class="table1">    
  </table>
  <table id="data2table" class="table2">
  </table>    
</div>

Within table1 there is a button that hides table1 and shows table2. In table2 there is a button that calls a javascript function to send data:

<input onclick="dataCheck()" type="button" value="Check Data" />

which then calls:

function dataCheck(){
    if(datacheck[0]==false || datacheck[1]==false){
        alert("Please enter data in all fields correctly.");
    } else{
        $.ajax({
            url: 'dataconfirm.php',
            type: "POST",
            async: false,
            data: {

            },
            dataType: 'json',
            success: function(data){
                alert("Thank you!");
                localdata=data;
                $.magnificPopup.close();
            }
        });
    };
}

My challenge is that when you click on the button to call dataCheck(), it reverts to showing table1 (as originally loaded by Magnific Popup) and in fact doesn't event call dataCheck(). If the user clicks again on the button to show table2, they can then click the button for dataCheck() a second time, and it works fine. Thanks for any ideas- I am at a loss as to why this is happening, especially given that it works the second time around.

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I finally figured out the issue. In the callbacks I had created an EventListener, based on suggestions by the author of Magnific Popup and others, to allow manipulation of the DOM elements. This is because the open callback occurs before the elements are created, and so if you try to do changes straight from this callback, you get an error that they don't exist. This information is found here (I am in part answering my question, because it appears that others have been messed up by how there isn't an afterload callback, i.e. Magnific popup: Get current element in callback):

https://github.com/dimsemenov/Magnific-Popup/pull/634

https://github.com/dimsemenov/Magnific-Popup/issues/632

However, using focus as your event in the EventListener is apparently problematic, in that clicking the second button caused the page to be refocused, and the EventListener to be triggered (which is where I was seeing the odd behavior). I tried to use a different type of event, in this case onload:

$.magnificPopup.instance.wrap[0].addEventListener('onload', mpTable);

which sort of worked... but then caused other problems. The best solution was to update the mpTable function to make it only fire once:

function mpTable(e){

    e.target.removeEventListener(e.type, arguments.callee);

    //other stuff that the function does

}

I hope this helps someone someday!

Magnific Popup page reverts to original format when try to send data

1 Answers1