Script not loading when added dynamically with jQuery

Question

I'm trying to dynamically add a script to my project using jQuery. The script is successfully added to the head tag but the content is not rendered in the body tag.

This is my code:

  <script type="text/javascript">
    window.onload = function() {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://form.jotform.com/jsform/81003857231348";
        $("head").append(s);
    }
  </script>

However the script loads successfully if I add it directly:
<script type="text/javascript" src="https://form.jotform.com/jsform/81003857231348"></script>

https://jsfiddle.net/xpvt214o/98587/

Am I missing something?

@GerardoBLANCO I removed that and still not loading. I first add jquery and then try to append this script — Valip
– Valip, Commented Apr 11, 2018 at 12:41
If your js file form.jotform.com/jsform/xxxxxxxx is not valid js file it will not load. it will give 404 i guess. — Baba Khedkar
– Baba Khedkar, Commented Apr 11, 2018 at 12:42

Alpesh Jikadra · Accepted Answer · 2018-04-12 05:19:22Z

2

I found solution,

First of all you can not write anything to document from external loaded script,

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened

There are two ways to solve this.

1).

You are creating Iframe as html content and writing into document as

document.write(htmlCode)

Above line creating issue for dynamic loading your content.

Instead of your code try something like below.

var htmlCode = document.createElement("iframe");
 htmlCode.setAttribute("title", title.replace(/[\\"']/g,'\\$&').replace(/&amp;/g,'&'));
 htmlCode.setAttribute("src","");
 htmlCode.setAttribute("allowtransparency","true");
 htmlCode.setAttribute("allow","geolocation; microphone; camera");
 htmlCode.setAttribute("allowfullscreen","true");
 htmlCode.setAttribute("name",this.formId);
 htmlCode.setAttribute("id",this.iframeDomId);

 document.body.appendChild(htmlCode);

And add following Js code in your html

<script type="text/javascript">
   var s = document.createElement("script");
   s.type = "text/javascript";
    s.src = "https://form.jotform.com/jsform/81003857231348";
   document.getElementsByTagName("head")[0].appendChild(s);
</script>

2).

instead of

document.write(htmlCode)

Try

document.body.innerHTML=htmlCode

Let me know if you still face any issue.

edited Apr 12, 2018 at 5:19

answered Apr 11, 2018 at 13:56

Alpesh Jikadra

1,7224 gold badges18 silver badges41 bronze badges

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

9 Comments

Valip Over a year ago

I'm getting Uncaught ReferenceError: title is not defined

Alpesh Jikadra Over a year ago

@Valip Instead of html content you have to replace this code to generate iframe, then it will work

Valip Over a year ago

Can you please provide a jsfiddle with an example of how this should work? I'm not sure if I understand...

Alpesh Jikadra Over a year ago

@Valip, look at this file github.com/alpesh-jikadra/Resources/blob/master/js/…, see line number 7 to 20

Valip Over a year ago

That works! But how did you generate this link rawgit.com/alpesh-jikadra/Resources/master/js/81003857231348.js?

|

oma · Accepted Answer · 2018-04-11 12:41:28Z

0

Try to use

window.onload = function() {
   //your script declaration here
}

instead of jquery ready()

answered Apr 11, 2018 at 12:41

oma

1,89414 silver badges14 bronze badges

1 Comment

oma Over a year ago

and use document.head.appendChild(s); try to exclude all the jQuery stuffs, and check in inspector if your script tag is in the DOM.

wayneOS · Accepted Answer · 2018-04-11 12:54:47Z

0

You can load and execute a script with jQuerys getScript(). It does not need to be in the DOM to get access on your elements.

$.getScript ("test.js", function (){

    alert ("Running test.js");

});

answered Apr 11, 2018 at 12:54

wayneOS

1,4251 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Script not loading when added dynamically with jQuery

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related