Load Javascript after the preloadedJs

Forums: 

Hello,

Iḿ trying to develope a h5p content, but I need to add javascript after the dom has loaded because the js is a complete react app and needs the div container created from the "preloadedJs".

I tried to load the js with jquery getscript in the "C.prototype.attach" method with a relativ path. A "test.js" file in the same folder that contains the file with the "C.prototype.attach" function is cannot be found.

Does anybody know here, how I can load custom javascript after the dom load has finished?

This is my questionnaire.js file:

varH5P=H5P|| {};

H5P.Questionnaire= (function ($) {
/**
 * Constructor function.
 */
functionC(options, id) {
// Extend defaults with provided options
this.options=$.extend(true, {}, {
language:'en'
 }, options);
// Keep provided id.
this.id=id;
 };

/**
 * Attach function called by H5P framework to insert H5P content into
 * page
 *
 * @param{jQuery}$container
 */
C.prototype.attach=function ($container) {
 
// Set class on container to identify it as a greeting card
// container. Allows for styling later.
$container.addClass("h5p-questionnaire");
// Add image if provided.
// if (this.options.image && this.options.image.path) {
// $container.append('<img class="greeting-image" src="' + H5P.getPath(this.options.image.path, this.id) + '">');
// }
// Add greeting text.
$container.append('<div class="questionnaire" id="learningstyle"></div>');
$(document).ready(function () {
$.getScript("test.js")
 .done(function (script, textStatus) {
console.log(textStatus);
 })
 .fail(function (jqxhr, settings, exception) {
console.log('getscript failed');
console.log('jqxhr');
console.log(jqxhr);
console.log('settings');
console.log(settings);
console.log('exception');
console.log(exception);
 });
 });
 };

returnC;
})(H5P.jQuery);

Thanx very much.

frischi

 

icc's picture

If you are modifying the content type you should add the extra file to preloadedJs in the library.json file of the library.

If you are extending it you should use the scripts_alter hook/action in a custom plugin or theme, like this example.

Ok, but I don`t want to create a new Plugin for worpress. I only want to have a h5p content. It should run in moodle, too.

But if I load the js in the preloadedJs, it loads before the dom is ready and the react app cant find its container.

Isn`t it possible to load the javascript in the h5p content after the preloaded js?

icc's picture

If you modify the content type or plugin files directly the changes will be gone when the next update is applied.

With preloadedJs, it will load after the content type code giving you the opportunity to override the functions of the content type. If you only modify the DOM Elements directly from your script you could experience unexpected results.
To run after the content type you could use one of these events:

H5P.externalDispatcher.on('domChanged', function (e) { ... });
H5P.jQuery(document).ready(function () { ... });

I tried it with H5P.jQuery(document).ready(function () and getScritp to load a js file. But it`s not possible to load it with a relative path, because the url in wordpress is not the real path and the getScript function uses the url in the Browser. So I got  a status 404.

Do you have an idea, how it is possible, to load a javascript file using a relative path AFTER the document is ready. Because the react app needs his document root, which I created in the preloadedJs declared file.

icc's picture

It doesn't sound like you're going about this the correct way.

That said, if it's the H5P Libraries path you're looking for you can use:

H5P.getLibraryPath('')

Ok, thanx.

I found another solution for me:

Generating a custom event on body element an triggering this after the root element for the react app is genrated.

$('body').trigger( "learningstyle_created");

So the react js can preload, if I wrap it in:

var H5P = H5P || {};

(function ($) {
    $('body').on( "learningstyle_created", function() {
  



        //react start
        
        //react end
    });

})(H5P.jQuery);