Страница Magnific Popup возвращается к исходному формату при попытке отправить данные

У меня есть всплывающая страница Magnific:

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 имеет две таблицы, которые я скрываю или показываю в зависимости от контекста (страница загружается с data1table показом и data2table скрытием):

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

В таблице1 есть кнопка, которая скрывает table1 и показывает table2. В table2 есть кнопка, которая вызывает функцию javascript для отправки данных:

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

который затем вызывает:

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

Моя проблема заключается в том, что когда вы нажимаете кнопку для вызова dataCheck(), она возвращается к отображению table1 (как изначально загружено Magnific Popup) и фактически не вызывает событие dataCheck(). Если пользователь снова нажимает кнопку, чтобы отобразить table2, он может затем нажать кнопку для dataCheck() второй раз, и все будет работать нормально. Спасибо за любые идеи - я не понимаю, почему это происходит, особенно учитывая, что это работает во второй раз.


javascript ajax magnific-popup
person user3398945    schedule 25.08.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я наконец понял проблему. В обратных вызовах я создал EventListener на основе предложений автора Magnific Popup и других, чтобы позволить манипулировать элементами DOM. Это связано с тем, что обратный вызов open происходит до создания элементов, и поэтому, если вы попытаетесь внести изменения прямо из этого обратного вызова, вы получите сообщение об ошибке, что они не существуют. Эта информация находится здесь (я частично отвечаю на свой вопрос, потому что кажется, что другие были испорчены тем, что нет обратного вызова afterload, т.е. Magnific popup: получить текущий элемент в обратном вызове):

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

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

Однако использование focus в качестве вашего события в EventListener, по-видимому, проблематично, поскольку нажатие второй кнопки приводило к перефокусировке страницы и запуску EventListener (именно здесь я видел странное поведение). Я попытался использовать другой тип event, в данном случае onload:

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

что вроде сработало... но потом вызвало другие проблемы. Лучшим решением было обновить функцию mpTable, чтобы она срабатывала только один раз:

function mpTable(e){

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

    //other stuff that the function does

}

Я надеюсь, что это поможет кому-то когда-нибудь!

person user3398945    schedule 26.08.2015