Undefined for Scripts Added to Custom JS

[sgjs2015]

So I’ve tried pretty much everything, but I’m not able to access objects added through script files in Custom JS. For example, if I try to add the toastr.js CDN files to load before any Custom JS, it keeps saying that toastr is not defined.

In Chrome, even after the page finishes loading, I can see the script file has been added, but the toastr object cannot be found. This happens to matter what other libraries I try to add (not really specific to toastr).

I’ve attached an image with my sample code. Any thoughts? Have others run into the same issue?

Attachments:

1. 

   Custom_JS_screen_with_issue.png
   

[Alexander Bautz]

The toastr library is rigged for “require.js” compatibility and therefor you will not get a globel varable. As described in the top of the Custom JS textarea you must wrap AMD enabled modules like this:

// AMD module code wrapper - change module_name with the name of the module you are loading
require(["toastr"], function(toastr){
    toastr.info("Toast example - shows in upper right corner.");
});

Alexander

[sgjs2015]

It’s working perfectly with require. Thanks, Alexander!

Additionally, I was also able to get it to work with:

$.getScript("LOCAL_LOCATION_TO_TOASTR_JS", function(){
    toastr["info"]("My notification title", "My notification text");
});

However, the require technique seems more robust, so I’ll stick to that.

• This reply was modified 5 years, 1 month ago by sgjs2015.

[Alexander Bautz]

I’m glad it worked. I’m personally no big fan of require.js (maybe in larger projects, but not in a simple form modification), but had to add support for it because Microsoft added it in SharePoint online.

What happens when you try to use getScript is that (if require.js is loaded) require.js detects it and hijacks the function if it is AMD enabled.

Alexander

[Author]

Posts