Skip to content

feat: wait load js for lms #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johanseto merged 3 commits into from
Jul 14, 2025
Merged

feat: wait load js for lms #1

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b925089
feat: wait load js for lms
johanseto Jul 4, 2025
2d54afd
chore: append script to the element
johanseto Jul 5, 2025
b776991
refactor: move async behaviour for main function
johanseto Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 34 additions & 10 deletions edx_sga/static/js/src/edx_sga.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,7 +409,7 @@ function StaffGradedAssignmentXBlock(runtime, element) {


function sendResizeMessage(height) {
// This blocks checks to see if the xBlock is part
// This blocks checks to see if the xBlock is part
// of Learning MFE
if (window.parent !== window) {
window.parent.postMessage({
Expand Down Expand Up @@ -474,23 +474,47 @@ function StaffGradedAssignmentXBlock(runtime, element) {
return deferred.promise();
}

function loadjs(url) {
$('<script>')
.attr('type', 'text/javascript')
.attr('src', window.baseUrl + url)
Copy link

@OmarIthawi OmarIthawi Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If async resolves the issue, then let's keep the change to its minimum amount.

      .attr('async', true)

Copy link
Collaborator Author

@johanseto johanseto Jul 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That doesn't resolve the problem; we need to wait until those scripts are loaded. So we need to use the onload, I tried with jquery approach, but it doesn't work

.appendTo(element);
function loadjs(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true; // Essential for non-blocking loading

// Resolve the promise when the script is successfully loaded
script.onload = () => {
console.log(`Script loaded: ${src}`);
resolve(script);
};

// Reject the promise if there's an error loading the script
script.onerror = () => {
const errorMsg = `Failed to load script: ${src}`;
console.error(errorMsg);
reject(new Error(errorMsg));
};

// Append the script to the element
element.appendChild(script);
});
}

if (require === undefined) {
/**
* The LMS does not use require.js (although it loads it...) and
* does not already load jquery.fileupload. (It looks like it uses
* jquery.ajaxfileupload instead. But our XBlock uses
* jquery.fileupload.
*/
loadjs('js/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js');
loadjs('js/vendor/jQuery-File-Upload/js/jquery.fileupload.js');
xblock($, _);
baseUrl = window.baseUrl || '';
// Refactored code to wait for both jQuery File Upload dependencies
Promise.all([
loadjs(baseUrl + 'js/vendor/jQuery-File-Upload/js/jquery.iframe-transport.js'),
loadjs(baseUrl + 'js/vendor/jQuery-File-Upload/js/jquery.fileupload.js'),
]).then(() => {
xblock($, _);
}).catch((error) => {
// Handle any errors during loading
console.error("Error loading scripts:", error);
});
} else {
/**
* Studio, on the other hand, uses require.js and already knows about
Expand Down