Appended ajax requests interrupts other already appended ajax requests (plain js)

Question

I have this script that I made I am unsure how I can do this. I basically want to append an ajax request response on the page without refreshing in other words x.php has an iframe youtube video and I want to be able to watch one of the iframe videos

while i'm pressing the button to append more ajax request from x.php. This script appends but interrupts the other already appended ajax request divs.

My code

test.php

<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').innerHTML += xhr.responseText;

}
}
xhr.open('POST','x.php');
xhr.send();
}

});

</script>

<button id='executeAjax'>Execute</button>
<div id='ajax'></div>

x.php

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

it interupts all because page is refreshed. default button type is submit. — bigless, Sep 05 '18 at 22:52
you should add event.preventDefault(); to your code to abort the default action of the button — BlackNetworkBit, Sep 05 '18 at 22:53
@BlackNetworkBit Thanks for your response but how would that structure look like? — , Sep 05 '18 at 22:56

BlackNetworkBit · Accepted Answer · 2018-09-06T21:02:05.700

0

That should do the trick

<script>
document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#executeAjax').addEventListener('click', function(event){
        event.preventDefault();
        var xhr= new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                document.querySelector('#ajax').insertAdjacentHTML( 'beforeend', xhr.responseText);
            }
        }
        xhr.open('POST','x.php');
        xhr.send();
    });
});
</script>

edited Sep 06 '18 at 21:02

answered Sep 05 '18 at 23:00

BlackNetworkBit

768
11
21

Still the same result – Sep 06 '18 at 08:13
what exactly do you mean by interrupting ? does the video get paused or what happens ? – BlackNetworkBit Sep 06 '18 at 09:56
The same result as before the YouTube iframe video gets refresh when I append a new ajax request on the page. : ( – Sep 06 '18 at 19:43
Could you then handle Out a Demo Site where we can Check the result ? – BlackNetworkBit Sep 06 '18 at 19:49
Sadly it is down :( so I have to go underground and build the website offline as of right now I have a google drive link where you can download the files to test it out if you want https://drive.google.com/drive/folders/1QVm_iC6lZOBUaTNIqbWN42-jYFNr4rlV – Sep 06 '18 at 19:59
found the problem, the reason was that we added content directly to the innerHTML. That will cause an reload of the script to get the changes right. I have foudn a workarounf by using the javascript function insertAdjactentHTML which adds parts and only reloads the added part – BlackNetworkBit Sep 06 '18 at 21:03
Thanks for the response BlackNetworkBit it works !! :) – Sep 06 '18 at 21:11
BlackNetworkBit I hope this isn't to much to ask help on now but how can I allow JavaScript to be executed in the xhr.responseText in other words allowing js to be run in the ajax response page I'm not sure if I should make this into another post related to that or should I ask for help on this post what do yo think? I found all these articles and posts but they don't seem to work in the past or not correctly I just tried those methods with insertAdjacentHTML same result meaning js on that ajax response page don't work either any ideas? – Sep 06 '18 at 21:18
Pleas open a new Question – BlackNetworkBit Sep 06 '18 at 21:20
BlackNetworkBit here is the new post on that topic https://stackoverflow.com/questions/52212651/working-method-to-allow-js-to-run-in-ajax-responsetext-with-insertadjacenthtml – Sep 06 '18 at 22:00

Appended ajax requests interrupts other already appended ajax requests (plain js)

1 Answers1