使用Ajax数据更改Fancybox iframe的内容

Question

I have a template site which contents I want to change with data from an ajax call.

I have a button which opens an fancybox 3 iframe. The content of this page is what I want to change.

Button to open fancybox:

'<i class="fa fa-info-circle fa-2x inv-details" invoiceId="' + data[index].invoiceid + '"' +
'aria-hidden="true" data-fancybox data-type="iframe" data-type="iframe" href="javascript:;" data-src="/invoice_details/"</i>'

click event to trigger ajax call:

$('#my_in').on('click', 'i.inv_details', function () {
    var inv_id = $(this).attr("invoiceId");
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'post',
        dataType: 'json',
        data: {
            action: 'invoice_details_ajax',
            inv_id: inv_id
        },
        done: function (data) {

            //HERE I WANT TO FIND THE CONTENTS OF THE 
            //OPEN IFRAME AND CHANGE THEM, LIKE SUCH:
            // $('.fancybox-iframe').contents().find("#test #bankgiro").text('test');
            // This above works in console, if I load jquery first, it does not work here.


        }
    });
});

The jquery selector for the iframe is correct, since i can edit the page via the chrome console. So I think the problem is that it tries to change the page before it has loaded? Is there any solution for this?

All answers I've read assums you have an empty fancybox iframe page and simply append data to it. But in my case I already have an template site which contents i want to change. Links I have read:

How to show ajax response in fancybox iframe Loading dynamic AJAX content into Fancybox

Answer 1

It is not clear from your description - you want to open iframed page inside fancybox and you want to make ajax request that changes contents of that page - at the same time? Would it not be more sensible to just load final page?

I think you just have to pass invoice id using url, like /invoice_details/?invoiceId=YOUR_ID and avoid messing with two requests.

Answer 2

If you've already tried document.ready and window.onload etc which I assume you have seems as you're using jQuery:

The way I tend to get around things like this is I but a setInterval() that fires every 0.5 seconds or whatever, checks if the needed info is there and if it is, does what it needs to and then turns itself off. Could work for you for needing to wait for page load?