使用 ajax 数据更改 fancybox iframe 的内容



我有一个模板站点,我想用来自ajax调用的数据更改内容。

我有一个按钮可以打开一个花哨的盒子 3 iframe。此页面的内容是我想更改的内容。

打开花式盒子的按钮:

'<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>'

单击事件以触发 AJAX 调用:

$('#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.

        }
    });
});

iframe 的 jquery 选择器是正确的,因为我可以通过 chrome 控制台编辑页面。所以我认为问题是它试图在加载之前更改页面?有什么解决方案吗?

我读过的所有答案都假设你有一个空的花哨框iframe页面,并简单地将数据附加到其中。但就我而言,我已经有一个模板网站,我想更改其内容。我读过的链接:

如何在花式框 iframe 中显示 ajax 响应将动态 AJAX 内容加载到 Fancybox 中

从您的描述中不清楚 - 您想在 fancybox 中打开 iframed 页面,并且您想同时发出更改该页面内容的 ajax 请求?只加载最终页面不是更明智吗?

我认为您只需要使用 url 传递发票 ID,例如/invoice_details/?invoiceId=YOUR_ID并避免弄乱两个请求。

如果你已经尝试过document.ready和window.onload等,我假设你似乎正在使用jQuery:

倾向于解决这样的事情的方式是我只是一个 setInterval(( 每 0.5 秒或其他什么触发一次,检查所需的信息是否存在,如果有,它会做它需要做的事情,然后自行关闭。 可以为您工作,需要等待页面加载吗?

最新更新