Please no jQuery advice and I am sorry to ask this question but nobody from other websites that are similar like stack overflow has not been able to solve this yet and it's very important I find an answer to this soon I been very persistent on
finding an answer that gives a desirable result. Here's the situation. I need to be able to append an ajax response at the same time allow execution of JavaScript in each ajax response without any complications or unnecessary additional retriggering of JS in them. This is what I tried and what I notice
- innerHTML +=
causes interruptions of contents inside the ajax response for example iframes restarts and JS restarts but still appends the ajax response.
- outerHTML +=
causes no interruptions or refreshing of contents outside the ajax response location like iframes etc.. but Javascript does not execute properly or don't work at all depending on what method is used to give an ajax response page the ability to execute JavaScript in them.
- insertAdjacentHTML
causes no interruptions of contents inside the ajax response for example iframes don't restart and JS don't restart but still appends the ajax response but causes unnecessary additional script execution to occur more than once inside a ajax response per ajax response overtime for example first time I call an ajax response it works perfectly second time the JS executes two times at that moment the third time the JS of that ajax response executes three times etc. which should execute one time per call of each ajax response.
Any time I get close, something undesirable like those traits occur from those methods so i'm wondering is it the methods or the way I structure them or maybe I need another method to do this on how I want it to act.
I simply just need to append an ajax response with no iframes or JS etc.. from being interrupted or restarting over each time a new ajax response comes along and appends and I need to be able to only be able to execute JavaScript inside those ajax response page once by each ajax response call not more than once regardless if there is multiple script tags in that ajax response page it will execute all the scripts tags on that page once per ajax call.
I wonder what other methods are there.
This is my code without any of those failed methods.
a.php
<style>
#main {
max-height: 800px;
width: 400px;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: column-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: column-reverse;
overflow: auto;
}
button{
display: block;
}
#random{
margin-top: 20px;
margin-bottom: 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('#executeAjax').addEventListener('click', sendAjax);
function sendAjax(){
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
document.querySelector('#ajax').//Method to give a desirable appending effect described in the description???
//Allow JS in the #ajax div* regardless if there is more than one script tag???
}
}
xhr.open('POST','b.php');
xhr.send();
}
});
</script>
<button id='executeAjax'>Execute</button>
<button id='random'>random</button>
<div id='main'>
<div id='ajax'></div>
</div>
b.php
<style>
iframe{
display: block;
width: 100px;
height: 100px;
}
</style>
<script>
alert('Hello');
</script>
<script>
alert('Hello again');
</script>
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
<script>
document.querySelector('#random').addEventListener('click',random);
function random(){
alert('random');
}
</script>