Use a Button to Launch JavaScript

RW: 8.6.2
Stacks: Current release
URL: https://dev.chetcomm.com/js

Hey there,

I’m trying to add a JS script to a project, but I never do this. I’ve tried adding it in the Head tab and separately in the JavaScript tab (w/o tags), but I can’t seem to get it to work.

Here’s the script I was given:

<script>
                        (function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) return;
                            js = d.createElement(s); js.id = id;
                            js.src = "//shalomworld.org/media-gallery/parish-mission.min.js#appID=1595521429&elementID=pm_mg-trigger";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, "script", "pmission-media_gallery"));
                    </script>

And it should create a small yellow button in the lower right corner like this:

Where did I go wrong?

Thanks!

You have this error in the browser console:

Media Gallery - Your App ID is invalid or you have not registered.

It reads like you still need to get something setup or validated with the provider of this media gallery plugin.

Thanks! I’ll reach back out to the developer.

Does it matter if it goes in the JavaScript tab in RW or the Head?

Tricky one to answer…

  • Some themes move anything entered in the Javascript tab down to the end of the page.

  • Others keep it in the head section at the top.

Code entered into the Head tab should stay at the top of the page. But sometimes certain Javascript doesn’t like being entered up here. Especially older Javascript; that might be looking for elements on the page.

So it would be best to consult with the documentation for this Javascript and see what it says.

In the case of code like Google Analytics, I know they always tell people to put it at the top of the page, but in theory it works fine anywhere! So try it and see what happens. The browser developer console will usually report problems.

“Undefined” errors would be most synonymous with code that’s not running in a desired order.

An important point - Javascript entered into the Head box needs to be wrapped inside <script> and </script> tags, whereas the same code entered in the Javascript box does not need them. One of those little “gotcha” things that even caught me off guard this morning!

1 Like

Okay,

I got in touch with the dev and we got the JS up and running. The only problem now is that the button that it generates clashes with my design.

Is there a way to use a Button stack to trigger the JS window that the full <script> is generating? Basically it pulls up a full size window within the browser and populates video content.

In the simplest format, you would wrap your Javascript code inside function tags:

function myFunction() {
    // Code goes here
}

Then assign your button an onclick attribute with its value equal to the function name:

onclick="myFunction()"
1 Like

I’m using the Foundation 6 button.

I’ve wrapped the <script> inside of the function tags.

In the button, what do I put for the URL? I added the onclick custom attribute.

Normally I’d set the link URL to #

To prevent the link causing the page to jump when it is clicked, you could change your onclick value to

myFunction(); return false;

The double-quotes are surplus. RapidWeaver already adds these for you.

I don’t use Foundation, so you’ll have to wait for someone with experience of that framework to advise you further about this. I don’t know if custom attributes are supported on Foundation buttons or not.

There were some instances in the past whereby some button stacks only took the URL you provided and ignored custom attributes.