[英]Run script after additional page content is loaded via Ajax
I have a script that replaces text node content. 我有一个替换文本节点内容的脚本。 It works great on initial page load, but when I navigate to another tab that opens up more content that needs to be replaced, it does not work. 它在初始页面加载时效果很好,但是当我导航到另一个选项卡时,该选项卡打开了更多需要替换的内容,因此它不起作用。 I need to figure out a way to re-run the script function to replace text after clicking on the new tab and loading that extra content. 在单击新选项卡并加载额外的内容后,我需要找出一种重新运行脚本功能以替换文本的方法。 Preferably, I would also need to wait for the new content to load before running the function or else it will not replace node content everywhere needed. 最好,在运行该功能之前,我还需要等待新内容加载,否则它将无法在需要的任何地方替换节点内容。
Here is the replace script finalized here: Replace non-code text on webpage 这是在此处完成的替换脚本: 替换网页上的非代码文本
var getTextNodesIn = function(el) {
return $(el)
.find(":not(iframe, script, style)")
.andSelf()
.contents()
.filter(function() {
return this.nodeType == 3;
});
};
function changeText() {
var re = new RegExp(/^\$(\d+)/);
getTextNodesIn($('div')).each(function() {
if (re.test($(this).text().trim()) === true) {
var txt = $(this).text().trim();
txt = txt.replace(re,"%$1");
$(this).replaceWith(txt);
}
});
}
$(document).ready(function() {
changeText();
});
The button HTML that is clicked to load new tab content looks like this: 单击以加载新标签内容的按钮HTML如下所示:
<a href="#" id="m_id0:Form_id45" name="m_id0:Form_id45" onclick="getTabSwitchId('78396'); if(!verifyRChange()) return false; saveTextBeforeReset();if(window != window.top){var f = document.getElementById('m_id0:Form');f.action += (f.action.indexOf('?') == -1 ? '?' : '&');};A4J.AJAX.Submit('m_id0:Form',event,{'similarityGroupingId':'m_id0:Form_id45','oncomplete':function(request,event,data){checkRequired('','Tab 1');},'parameters':{'tabId':'78396','appID':'54362','id':'534','m_id0:Form_id45':'m_id0:Form_id45'} ,'status':'m_id0:Form:m_id21:5:tabSwitch'} );return false;">Second Tab</a>
Is there something that can be used in that code to listen to and run changeText() function when the new content is loaded? 加载新内容时,该代码中是否可以使用某些东西来监听和运行changeText()函数? Note that I probably would not want to use any Ids from the button because this has to apply to multiple buttons that may have different Ids. 请注意,我可能不想使用按钮中的任何ID,因为这必须应用于可能具有不同ID的多个按钮。
Also, it does not even have to be a change specific to the button, just anything that would trigger the function if the HTML changes. 此外,它甚至不必更改按钮,只需更改HTML即可触发功能的任何内容。 For example, I tried the following option but it caused "Maximum call stack size exceeded" error and well as other issues because it does not wait for all the changes to complete. 例如,我尝试了以下选项,但是它导致“超出最大调用堆栈大小”错误和其他问题,因为它不等待所有更改完成。
$(document).bind("DOMSubtreeModified",function(){
changeText();
});
I think I solved the problem with this piece of magic: https://stackoverflow.com/a/27363569 我想我用这块魔术解决了问题: https : //stackoverflow.com/a/27363569
(function() {
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
console.log('request started!');
this.addEventListener('load', function() {
console.log('request completed!');
console.log(this.readyState); //will always be 4 (ajax is completed successfully)
console.log(this.responseText); //whatever the response was
});
origOpen.apply(this, arguments);
};
})();
Note that I couldn't simply use the following because my page is not using $.ajax() or any jQuery ajax method for actually loading content. 请注意,我不能简单地使用以下内容,因为我的页面没有使用$ .ajax()或任何jQuery ajax方法来实际加载内容。 But it's a nice quick solution for anyone that is. 但这对任何人来说都是一个不错的快速解决方案。
$(document).ajaxComplete(function() {
alert("ALL current AJAX calls have completed");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.