Unable to display JavaScript widget

Question

I'm trying to add a JustGiving widget to my website but it doesn't display at all. I had other scripts in the file which I thought might be interfering so I ended up testing in a new plain html file and it still wouldn't work.

Interestingly enough if I copy/paste it into a W3 schools code editor it works! It's the same exact code and I cannot work out why it doesn't load in an html file.

    <!DOCTYPE html>
    <html>

    <head>
    </head>

    <body>
      <div id="jg-charity-events-board" data-config="id=45107">123</div>
      <script>
        (function(d) {
          var jg = d.createElement('script');
          jg.type = 'text/javascript';
          jg.async = true;
          jg.src = (d.location.protocol == 'https:' ? 'https://widgets.justgiving.com/charity-events-board/host.js' : 'http://widgets.justgiving.com/charity-events-board/host.js');
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(jg, s);
        })(document);
      </script>
    </body>

    </html>

Is it case where your document doesn't have script tag on a page, there for selector can't resolve where to put it? "document.getElementsByTagName('script')[0]" == undefined ? — Raimonds
– Raimonds, Commented Jun 10, 2019 at 12:31
@Raimonds surely the <script> tag which contains the code above would be selected, no? — ADyson
– ADyson, Commented Jun 10, 2019 at 12:54
try disabling you Ad blocking extension? When I tried your code in jsFiddle after disabling Ad block, it worked. fiddle — shrys
– shrys, Commented Jun 10, 2019 at 12:59
@Raimonds "No because that script tag is not yet injected into dom" ...if the script is being executed, then it must have already been injected into the DOM and into the page. I just tested it and I'm right. Create a blank file and paste <!DOCTYPE html> <html> <body> <script> var s = document.getElementsByTagName('script')[0]; console.log(s); </script> </body> </html> into it. Open it in the browser and check the console. You'll see it logs the script tag. JS code can't be executed unless it's in the DOM — ADyson
– ADyson, Commented Jun 10, 2019 at 14:01

fonZ · Accepted Answer · 2019-06-10 14:14:22Z

1

Why do you just not use something like this? Didn't test but I assume it works.

<div id="scripts"></div>
<script>
    var url = document.location.protocol + '//widgets.justgiving.com/charity-events-board/host.js';
    var script = '<script type="text/javascript" src="${url}"></script>';
    document.getElementById("scripts").innerHTML = script;
</script>

And jQuery has html and append functions for this.

edited Jun 10, 2019 at 14:14

answered Jun 10, 2019 at 14:06

fonZ

2,4774 gold badges23 silver badges40 bronze badges

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

2 Comments

Stan Over a year ago

I get a blank documents with: '; document.getElementById("scripts").innerHTML = script;

fonZ Over a year ago

Did you try to print what happens? alert("test"), console.log("test")? Also try to inspect the page and view the page source. Try in different browsers.

Collectives™ on Stack Overflow

Unable to display JavaScript widget

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related