使用 ajax 数据更改 fancybox iframe 的内容
Change contents of fancybox iframe with ajax data
我有一个模板站点,我想用来自 ajax 调用的数据更改其内容。
我有一个按钮可以打开 fancybox 3 iframe。本页内容是我要改的
打开 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>'
点击事件触发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 控制台编辑页面。所以我认为问题是它试图在加载之前更改页面?有解决办法吗?
我读过的所有答案都假设您有一个空的 fancybox iframe 页面,并简单地向其附加数据。但就我而言,我已经有一个模板站点,我想更改其中的内容。我读过的链接:
How to show ajax response in fancybox iframe
Loading dynamic AJAX content into Fancybox
如果您已经尝试过 document.ready 和 window.onload 等,我认为您已经尝试过 jQuery:
我倾向于绕过这样的事情的方法是我但是每 0.5 秒或其他任何时间触发一次 setInterval(),检查是否存在所需的信息,如果存在,则执行所需的操作然后转向本身关闭。可以为您工作需要等待页面加载吗?
从您的描述中不清楚 - 您想要在 fancybox 中打开 iframed 页面,并且您想要 ajax 请求更改该页面的内容 - 同时?只加载最后一页不是更明智吗?
我认为您只需使用 url 传递发票 ID,例如 /invoice_details/?invoiceId=YOUR_ID
,避免混淆两个请求。
我有一个模板站点,我想用来自 ajax 调用的数据更改其内容。
我有一个按钮可以打开 fancybox 3 iframe。本页内容是我要改的
打开 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>'
点击事件触发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 控制台编辑页面。所以我认为问题是它试图在加载之前更改页面?有解决办法吗?
我读过的所有答案都假设您有一个空的 fancybox iframe 页面,并简单地向其附加数据。但就我而言,我已经有一个模板站点,我想更改其中的内容。我读过的链接:
How to show ajax response in fancybox iframe Loading dynamic AJAX content into Fancybox
如果您已经尝试过 document.ready 和 window.onload 等,我认为您已经尝试过 jQuery:
我倾向于绕过这样的事情的方法是我但是每 0.5 秒或其他任何时间触发一次 setInterval(),检查是否存在所需的信息,如果存在,则执行所需的操作然后转向本身关闭。可以为您工作需要等待页面加载吗?
从您的描述中不清楚 - 您想要在 fancybox 中打开 iframed 页面,并且您想要 ajax 请求更改该页面的内容 - 同时?只加载最后一页不是更明智吗?
我认为您只需使用 url 传递发票 ID,例如 /invoice_details/?invoiceId=YOUR_ID
,避免混淆两个请求。