Javascript loaded by an Ajax call doesn't execute?

Question

I´m trying to implement html code with Ajax-get into my temp-page.

This works as it should, only the javascript isn´t executed as I expected. If I load the code independently in the browser, then the javascript executes as expected. If it's implemented with Ajax in my temp-page it doesn´t. Why?

Here is the html and javascript code I'm loading:

<link rel="stylesheet" type="text/css" href="/x/x/x/x/stylesheet.css">
<div id='content_Box'></div>
<script type="text/javascript" src="/x/x/x/x/javascript.js" charset="utf-8"></script>

And here is the ajax code which loads it:

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

    content_Box.innerHTML = "";

    content_Box.innerHTML = this.responseText;

    }
    };

    xhttp.open("GET", Pfad, true);
    xhttp.send();

Thank you for your time!

**content_Box** belongs to the external file. Hence, you cannot add to it before adding the external file to current document.... — gaetanoM, Oct 07 '18 at 14:04
It´s added via var content_Box = document.getElementById("content_Box "); — Josef Slotosch, Oct 07 '18 at 14:23
it´s defined in the index file and the response is what i get from the ajax call? — Josef Slotosch, Oct 07 '18 at 14:32

score 1 · Answer 1 · answered Oct 07 '18 at 15:00

1

Your problem is not with the ajax call.

The issue is that

content_Box.innerHTML = this.responseText;

doesn't cause any scripts to execute.

See Executing <script> elements inserted with .innerHTML for some code that looks at the text, finds the scripts, and executes them.

answered Oct 07 '18 at 15:00

Chris F Carroll

11,146
3
53
61

This sounds like the solution. Now I have to read about it first. But is this kind of implementation to load external pages via ajax and work with them not the way to go, if I have a navigation bar and want to switch between the pages? – Josef Slotosch Oct 07 '18 at 15:21
Correct. The main JS frameworks – Angular, React, Vue, -- don't load javascript to execute it, they load html. You never need to *load* javascript – you can always just put it in the original page that does the loading. – Chris F Carroll Oct 07 '18 at 15:56

score 0 · Answer 2 · answered Oct 07 '18 at 14:39

0

It may depend on what your js actually does.
Anyway you can call the functions once you have loaded the ajax response (in xhttp.onreadystatechange) to make sure to run them at least once also on the parts you got from the response.

answered Oct 07 '18 at 14:39

dbac

328
1
10

Thank you for your answer. It loads some data from a database via ajax and creates div objects from that. My problem in understanding the whole thing is, after I included the code via html. How do I access the functions of my included file, which are in the javascript file and whicht is in the same folder as the included code. It sounds like I can just refer to them after the ajax call as you mentioned above, but this doesn´t do anything. I thought I just include the code and work with it, because I have already referred to the javascript file in the index of the include. – Josef Slotosch Oct 07 '18 at 14:54
so you want to load more data from ajax after having received a first part, using the functions you wrote in the index.html file, right? – dbac Oct 07 '18 at 15:08
I want to load a external page into my main website via ajax and access the functions of that external page like I do when I open it in the browser. I thought this process would be the default way to do, if I´m using a template website with header and navigation, to switch between the katgeories. – Josef Slotosch Oct 07 '18 at 15:18

Javascript loaded by an Ajax call doesn't execute?

2 Answers2