First off, great great module, thank you.
I realize I'm grasping at straws here but my JS knowledge is limited.
Scenario:
Instead of using the /node/add/h5p-content page, I have to output the form inline when a link is clicked. I've done this using ctools and AJAX and all is well until I change the 'Content type' to 'Drag and drop question'.
A JS error occurs -
Uncaught TypeError: Cannot read property 'loadedCss' of undefined on line 1262 of sites/all/modules/h5p/library/js/h5p.js which leads to this function:
/**
* Check if styles path/key is loaded.
*
* @param {String} path
* @returns {Boolean}
*/
H5P.cssLoaded = function (path) {
H5PIntegration.loadedCss = H5PIntegration.loadedCss || [];
return H5P.jQuery.inArray(path, H5PIntegration.loadedCss) !== -1;
};
This led me to sites/all/modules/h5p/modules/h5peditor/h5peditor/scripts/h5peditor.js where H5PIntegration = window.parent.H5PIntegration; is undefined instead of an object.
The AJAX call loads all the same JS files as output in the of /node/add/h5p-content
My question appears to boil down to this: can I make a change to the JS (sites/all/modules/h5p/modules/h5peditor/h5peditor/scripts/h5peditor.js) to populate H5PIntegration when I'm loading the form via AJAX? I'm happy to share more code if required. Again, thank you for this module and any time you put forward to helping me.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | h5p-ajax-loading-2489018-9.patch | 19.35 KB | kenianbei |
| #7 | h5p-ajax-loading-2489018-7.patch | 28.98 KB | darren oh |
Comments
Comment #1
falcon commentedWe'll have to refactor our code to make supporting loading both the editor and the content via ajax much easier.
I'm not very familiar with the parts of the code you're touching upon here. I would guess that you'll need to make the backend able to return the H5PIntegration object via ajax and the front end should try to fetch it if it doesn't exist. It should also be able to fetch parts of that object, but this is just a guess.
Comment #2
darren ohDrupal filters out inline scripts from AJAX responses. I fixed the error by moving the H5PIntegration value from an inline script to the Drupal settings variable. The current patch works only on the first AJAX load. I'm working on fixing that.
Comment #3
darren ohHere is a patch that works on every AJAX load.
Comment #4
johndtaylor commentedI have tested this patch and it works for me.
Comment #5
darren ohPatch broke the editor. Fix attached.
Comment #6
johndtaylor commentedI tested the H5P editor patch. This works for me.
Comment #7
darren ohLast patch didn't work for embedding. Update attached.
Comment #8
niallmurphy-ie commentedThis patch didn't apply cleanly to 1.28. It seemed to be looking for /library/js/disable.js and that doesn't exist.
Comment #9
kenianbei commentedI've refactored the patch a bit to not use Drupal.settings since there are content types outside the scope of the module that depend on the global variable H5PIntegration.
Another problem I found was that if you are rendering an H5P node with ajax, h5p_preprocess_html() is never called, thus the H5PIntegration object never gets created. To get around this I added the same check that happens in h5p_preprocess_html() to hook_ajax_render_alter().
Let me know if this patch works, seems to work for my use case, which is through the form ajax api.
Comment #10
kenianbei commentedComment #11
paalj commentedHi,
I have had a look at this one, and see changes are done to library/js/*.js files, where the usage of Drupal.behaviours is introduced. Since everything in library is generic code used by all H5P enabled platforms (like Moodle and WordPress), unfortunately, we can't do it like this :(
Comment #12
paalj commentedComment #13
kenianbei commentedAhh, I was under the impression only the library in the files directory was cross platform, I didn't realize the code in the Drupal module was also shared between platforms. I won't have time to do another pass at this for a couple months, but can look at it later this year.
Comment #14
Deno commentedI believe that I have bumped into this issue again (05/2019. latest version of Drupal 8, latest version of the h5p module).
This is what happens: when using the ajax call to show a node containing some h5p content, the content is rendered correctly after a page reload, but not when the same ajax call is repeated without page reload.
How to test?
1) generate a "H5P test" page that shows some h5p content
2) generate a second "AJAX reference test" page with "full html" text containing an "a" element with a href to the first page. Add the ajax options to "a", so that the referenced page is loaded in a modal window or off canvas or in a named html element on the same page.
3) open the AJAX reference page
4) click on the link, to open the H5P test page in a modal window (off-canvas, whatever) using ajax.
5) repeat this again
6) reload the AJAX reference page and repeat 4 and 5.
Step 4 works OK, step 5 doesn't.