So I have a problem here i'm in a situation that involves every page having a ajax request. I found a way to allow Java Script to be able to run on each ajax requested page so
recently out of curiosity I started to test my code to see if there were any glitches so I opened up chromes developer tools to see what is happening behind the
scenes and I found some glitches so when I press page 1 button every time it request the page the same amount of times I press the button so that is normal. But if I do that on page 2 it creates
multiple or 100's of ajax requests more than the amount I press the button in a short period of time. Same thing with page 3 so how can I resolve this. I basically want to allow java script on each requested page I just want to be able to
prevent the multiple ajax request I want to be able to show the same amount of times I press the button each time.
Here is a .gif screenshot to show you guys what I mean.
Here is the code files
page_1.php
<script>
document.addEventListener('DOMContentLoaded', function(){
var execute_sendAjax1 = document.getElementById('executeAjax1');
execute_sendAjax1.addEventListener('click', sendAjax1);
function sendAjax1(){
var xhr1= new XMLHttpRequest();
xhr1.onreadystatechange = function(){
if(xhr1.readyState === 4){
document.getElementById('ajax1').innerHTML= xhr1.responseText;
/*<Allow JS on the requested page>*/
var exJs = document.getElementsByTagName('script');
var enableAll = null;
for (var i = 0; i < exJs.length; i++) {
enableAll += exJs[i].innerHTML;
}
eval(enableAll);
/*</Allow JS on the requested page>*/
}
}
xhr1.open('POST','page_2.php');
xhr1.send();
}
});
</script>
<button id='executeAjax1'>Execute 1</button>
<h1>Page 1</h1>
<div id='ajax1'></div>
page_2.php
<script>
var execute_sendAjax2 = document.getElementById('executeAjax2');
execute_sendAjax2.addEventListener('click', sendAjax2);
function sendAjax2(){
var xhr2= new XMLHttpRequest();
xhr2.onreadystatechange = function(){
if(xhr2.readyState === 4){
document.getElementById('ajax2').innerHTML= xhr2.responseText;
/*<Allow JS on the requested page>*/
var exJs = document.getElementsByTagName('script');
var enableAll = null;
for (var i = 0; i < exJs.length; i++) {
enableAll += exJs[i].innerHTML;
}
eval(enableAll);
/*</Allow JS on the requested page>*/
}
}
xhr2.open('POST','page_3.php');
xhr2.send();
}
</script>
<button id='executeAjax2'>Execute 2</button>
<h1>Page 2</h1>
<div id='ajax2'></div>
page_3.php
<script>
var execute_sendAjax3 = document.getElementById('executeAjax3');
execute_sendAjax3.addEventListener('click', sendAjax3);
function sendAjax3(){
var xhr3= new XMLHttpRequest();
xhr3.onreadystatechange = function(){
if(xhr3.readyState === 4){
document.getElementById('ajax3').innerHTML= xhr3.responseText;
/*<Allow JS on the requested page>*/
var exJs = document.getElementsByTagName('script');
var enableAll = null;
for (var i = 0; i < exJs.length; i++) {
enableAll += exJs[i].innerHTML;
}
eval(enableAll);
/*</Allow JS on the requested page>*/
}
}
xhr3.open('POST','page_4.php');
xhr3.send();
}
</script>
<button id='executeAjax3'>Execute 3</button>
<h1>Page 3</h1>
<div id='ajax3'></div>
page_4.php
<h1>Page 4</h1>
I believe the problem lies where JS is enable in the ajax request so i'm just wondering what would be a better method to allow JS but prevent creating 100's of ajax request in a very short period of time after a few button clicks done on any of
these pages page_2.php page_3.php but page_1.php button does not do that so that page button works how I want it to work. Meaning page_1.php don't creates 100's of request in a very short period of time due to a few button presses so why is that ? This kind of problems causes the browser to freeze so I know that is not normal.
