How to replace/update content of an ajax type Magnific Popup?

[jpcharrier]

Running into an issue where I can't update the content of an ajax type popup (all the current hotfixes for inline type have not worked..).

I have two popups currently. One is a large area that brings in a whole bunch of product info. The second is a popup that brings in shipping info (this is actually contained in the product info area...). So when a user clicks the product popup, a link to the shipping popup is in there. I need to update/replace/change the content of popup with the content for the new popup.

Here is what im trying (unsuccessfully) so far...

    // Shipping popup
    if ($(".pop-ajax")[0]) {

        $('.pop-ajax').magnificPopup({
            type: 'ajax',
            closeBtnInside: true, // put close button on inside

            callbacks: {
                parseAjax: function(mfpResponse) {
                    mfpResponse.data = $(mfpResponse.data).find('.l-main');
                },
                ajaxContentAdded: function() {
                    // console.log('it works');
                }
            }
        });
    };

    // Ajax popup - initialise if .pop-ajax is on the page
    if ($(".pop-product")[0]) {

        $('.pop-product').magnificPopup({
            type: 'ajax',
            closeBtnInside: true, // put close button on inside

            callbacks: {
                parseAjax: function(mfpResponse) {
                    mfpResponse.data = $(mfpResponse.data).find('#product-ajax');
                },
                ajaxContentAdded: function() {
                    console.log('First popup');
                    // var mfp = $.magnificPopup.instance;
                    //     mfpContentContainer = mfp.contentContainer;
                    //     mfpContent = mfp.content;

                    $('.pop-ajax').click(function(){
                        $('.pop-product').magnificPopup('close');
                        $('.pop-ajax').magnificPopup({
                            type: 'ajax',
                            closeBtnInside: true, // put close button on inside

                            callbacks: {
                                parseAjax: function(mfpResponse) {
                                    mfpResponse.data = $(mfpResponse.data).find('.l-main');
                                },
                                ajaxContentAdded: function() {
                                    // console.log('it works');
                                }
                            }
                        });
                    });
                }
            }
        });
    };

How do i update the content of a popup created from .pop-product to the content that .pop-ajax refers to?

[qzminski]

This requires some dirty hacks but the following solution should work (note ES6 syntax):

$('a').on('click', function (e) {
    e.preventDefault();

    const instance = $.magnificPopup.instance;

    instance.open({
        callbacks: {
            beforeAppend() {
                if (!instance.waitingForAjax) {
                    instance.content = [$('<div/>')];
                }

                instance.waitingForAjax = false;
            },
            parseAjax(response) {
                instance.currTemplate = {'ajax': true};
                instance.waitingForAjax = true;
            },
        },
        items: {
            src: $(this).attr('href'),
            type: 'ajax'
        }
    });

    instance.ev.off('mfpBeforeChange.ajax');
});