Alert or Console.log not working from dynamically loaded JavaScript

Question

I use the following function to dynamically load JavaScript:

function loadJS(file, c)
{
    var jsEl = document.createElement("script");
    jsEl.type = "application/javascript";
    jsEl.src = file;
    jsEl.async = false;
    document.body.appendChild(jsEl);
    if (c) { jsEl.addEventListener('load', function (e) { c(null, e); }, false); }
    document.getElementsByTagName("head")[0].appendChild(jsEl);
}

Below is one of the functions contained within a dynamically added file:

function formelements_SELECT_add(x)
{
    console.log("add");
    alert("add");
    var id = x[1];
    var value = x[2];
    var index = x[3];
    var select = document.getElementById(id);
    var option;
    option = document.createElement("option");
    option.text = value;
    select.add(option, index);
}

I know the JavaScript file gets added correctly and the function gets executed because an option is added to the select element. Why does the alert and console.log not execute? If I click inspect, then there are no error messages.

EDIT

This is the code I use to call the function:

var typeAndElement = x[0][0] + "_" + x[0][1];
start = i + 1;
if (!window[typeAndElement])
{
    loadJS("https://websemantica.org/scripts/" + x[0][0] + "/" + x[0][1] + ".js", continueManipulatingElements(typeAndElement, actions, x, start, total));
    return;
}
else
{
    fn = window[typeAndElement + "_" + x[0][2]];
    if (typeof fn === 'function')
        fn(x);
}

I didn't want to include it initially, because I already knew it was working and it will be unclear how it works considering it is using dynamic data.

Also, I have edited the loadJS function:

function loadJS(file, c)
{
    var jsEl = document.createElement("script");
    jsEl.type = "text/javascript";
    jsEl.src = file;
    jsEl.async = false;
    if (c) { jsEl.addEventListener('load', function (e) { c(null, e); }, false); }
    document.getElementsByTagName("head")[0].appendChild(jsEl);
}

The problem appears to be solved now.

The function name is dynamically generated. I've not included that code because it's not really relevant considering, I've already confirmed the function gets called. — Dan Bray
– Dan Bray, Commented Apr 14, 2017 at 13:58
If that function were being called, you would definitely be seeing that console.log and alert. If you aren't, that function isn't being called. If you're seeing an option, it's not being added by that function. — T.J. Crowder
– T.J. Crowder, Commented Apr 14, 2017 at 13:59
agree with TJ... not conceivable that those 2 lines would be ignored and the remainder would execute — charlietfl
– charlietfl, Commented Apr 14, 2017 at 14:02
I've commented out everything, other than the first two lines. An option is still added to the select. Therefore, it must be a caching problem. — Dan Bray
– Dan Bray, Commented Apr 14, 2017 at 14:06

Community · Accepted Answer · 2017-05-23 12:09:47Z

3

Three things jump out:

You're appending the script to the page twice, once to document.body, and the other to document.getElementsByTagName("head")[0]. The second one will move the script from the first place to the second. You really only need to do one of those.
You're looking the load event after appending the element. If the script is in cache, you can miss the event. Hook it before appending the script to the DOM.
You're not doing anything in the quoted code to call the function that's defined by the script you're adding.

Other side notes:

No need to set type, the default is JavaScript.
No need to set async, all dynamically-inserted script elements are async (now, it wasn't always true).
As Jarosław Wlazło points out document.alert isn't a function; just alert is all you need. :-)

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 14, 2017 at 13:56

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dan Bray Over a year ago

I've commented out document.body.appendChild(jsEl); and now, the alert and console.log execute as expected. What do you mean by hook it before appending the script to the dom?

T.J. Crowder Over a year ago

@DanBray: Making sure that the addEventListener("load", ... is run before you append jsEl anywhere.

sshow Over a year ago

Additionally, the type property of the src attribute is typically voided. If it's not present it falls back to text/javascript and not application/javascript.

Dan Bray Over a year ago

@T.J.Crowder I am already doing that. I will edit my answer to show the code that calls the function.

T.J. Crowder Over a year ago

@DanBray: No need. But yes, once you removed the document.body.appendChild(jsEl), you didn't have that problem anymore, because you're calling addEventListener before appending it to head. :-)

|

Jarosław Wlazło · Accepted Answer · 2017-04-14 14:05:20Z

2

In addition: document has no alert method. It belongs to window, so you can call it like this alert('add');

answered Apr 14, 2017 at 14:05

Jarosław Wlazło

3701 gold badge4 silver badges14 bronze badges

1 Comment

Dan Bray Over a year ago

I did. I just later tried other things when it wasn't working.

Collectives™ on Stack Overflow

Alert or Console.log not working from dynamically loaded JavaScript

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related