0

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.

.gif-screenshot

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.

5
  • Thanks Jaronmanda for your response and I am aware that eval is dangerous but I need JS to be allowed on each ajax requested page. How would you structure this? Any code examples will help if you know how.
    – user9767744
    May 13 '18 at 23:15
  • Every time you click the same button, you re-run all scripts on the page. Because every button click adds a new script, it creates exponentially more scripts, evaluates them, and adds more click events which in turn create more events, etc. You need to completely rethink your logic on this page. May 13 '18 at 23:38
  • Thanks for your reply damanptyltd well I did I left that section where it said's <Allow JS on the requested page> on only one page AKA page_1.php but the other pages could not allow JS on their requested page and of course that's why you have to practice to developed logic sometimes i'm learning :). Since you know the solution to this problem can you provide a code example so I can better understand you? If you don't know how then I appreciated that you responded. And also to the reason why I structure it like this just in case if I had to add other script tags on those pages so it is logic
    – user9767744
    May 13 '18 at 23:46
  • If someone doesn't beat me to it, I'll try work something up for you tonight (roughly 12 hours) with a nice explanation. May 14 '18 at 0:00
  • Thanks damanptyltd that will be helpful I really need to find a way. I know this is not an accepted standard but I need to learn how to solve this and well let me know damanptyltd and I will let you know later on my findings.
    – user9767744
    May 14 '18 at 0:09
0

Create a variable that contains the targeted id where the request will occur at on each page for example

var ajaxDivId= document.getElementById('ajaxDivId');

This is what I mean in depth

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>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax1= document.getElementById('ajax1');
    //

    var exJs= ajax1.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</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>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax2= document.getElementById('ajax2');
    //

    var exJs= ajax2.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</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>*/

    //Target the AJAX response div to allow JS to run in that div
    var ajax3= document.getElementById('ajax3');    
    //

    var exJs= ajax3.getElementsByTagName('script');
    var enableAll = exJs.length;
    for(var i=0; i < enableAll; i++){
    eval(exJs[i].text);
}

    /*</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>

This method is based on executing the script tags only based on the targeted div id which happens to be where the ajax request page gets outputted at. I just tested

this right now so now you can execute an ajax request based on the amount of times you press the button on each of those pages which also allows you to run JS based on those requested pages. Be careful eval() is risky.

1
  • 1
    OMG thank you very much it works and thanks every one for trying to help me out OMG fsofb your my new hero lol thanks it works correctly now.
    – user9767744
    May 14 '18 at 4:26
0

The reason is that you are basically appending the calls response contents into your page, creating new script tags and afterwards iterating through them and calling them again, together with the new ones, on every click, growing up exponentially:

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>*/

If you inspect you code content instead of inspecting the network tab, you will understand whats going on after clicking the button for the first time.

I would say that what what you need to do, if I got what you want to achieve, is: Instead of appending the response content into your DOM straight away, only append the non-script html tags and after that call the eval only on the current response's script tag.

You have many options to implement that, one could be using regex to capture the script tag content, store it, strip the script tag append the rest to your DOM, and eval() the stored script.

4
  • Thanks Victor Lia Fook for your reply but i'm not really understanding what your saying I need all the pages to allow their requested ajax page to allow JS and I look at that section you are saying but I don't really understand what your trying to say because on page_4.php I plan to add JS not AJAX on that page the reason why I have it like that in those sections that are label as <Allow Js on the requested page> is because if I add more than one script tags on each page I know each script tag will work. The problem here is this works perfectly on page 1 but 2 and 3 creates many and freezes
    – user9767744
    May 14 '18 at 0:05
  • Victor Lia Fook i am not asking you to do my project for me but can you provide a code example on what you mean because that will help a lot to understand you better.
    – user9767744
    May 14 '18 at 0:06
  • Yeah, sure, @DannyLee lil busy now but I can provide you something later today if you don't get any other better answer until then. May 14 '18 at 0:58
  • Thanks victor Lia Fook let me know when you can thanks.
    – user9767744
    May 14 '18 at 1:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy