Skip to content
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

Jump to bottom

jQuery .load function errors if loading html with auto-removing script tag #5377

Closed
Zecr opened this issue Dec 17, 2023 · 2 comments · Fixed by #5378
Closed

jQuery .load function errors if loading html with auto-removing script tag #5377

Zecr opened this issue Dec 17, 2023 · 2 comments · Fixed by #5378
Labels
Manipulation

Comments

@Zecr
Copy link

Zecr commented Dec 17, 2023

Description

jQuery .load function errors if loading html with auto-removing script tag. Callback function is not executed.

While this is kind of a non-issue as jQuery removes scripts with the .load function anyways and can be fixed just by removing the document.currentScript.remove(); from the loaded file, it sort of breaks stuff when I need that file to be loaded elsewhere via different methods and do require the script removal.

Link to test case

Not sure how to demonstrate the .load function with the links provided as I need more than 1 file to show the error. So, here's the two html files needed to reproduce the issue.

File: test.html

<!DOCTYPE html>

<html>
    <body>
        <span id="light_dark_msg">
            <script>
                if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
                    $("#light_dark_msg").html(
                        "<b>P.S.</b> Have you tried viewing this site with your browser in dark mode?"
                    );
                } else {
                    $("#light_dark_msg").html(
                        "<b>P.S.</b> Have you tried viewing this site with your browser in light mode?"
                    );
                }
                document.currentScript.remove(); // This causes jQuery to error if attempting to load this page as the script is already gone by the time the jQuery script remover gets to it.
            </script>
        </span>
    </body>
</html>

File: test2.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
        <script>
            $(document).ready(() => {
                $("#main").load("test.html", function () {
                    // Function errors out. Callback function not executed.
                    this.dispatchEvent(new Event("loading_complete"));
                });
            });
        </script>
    </head>
    <body>
        <div id="main"></div>
    </body>
</html>

Error message:

Uncaught TypeError: Cannot read properties of null (reading 'removeChild')
    at DOMEval (jquery-3.7.1.js:130:44)
    at domManip (jquery-3.7.1.js:5951:8)
    at jQuery.fn.init.append (jquery-3.7.1.js:6088:10)
    at jQuery.fn.init.<anonymous> (jquery-3.7.1.js:6182:18)
    at access (jquery-3.7.1.js:3905:8)
    at jQuery.fn.init.html (jquery-3.7.1.js:6149:10)
    at Object.<anonymous> (jquery-3.7.1.js:10229:9)
    at fire (jquery-3.7.1.js:3223:31)
    at Object.fireWith [as resolveWith] (jquery-3.7.1.js:3353:7)
    at done (jquery-3.7.1.js:9627:14)
@mgol mgol added the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Dec 17, 2023
@ShadBalti
Copy link

🛠️ Addressing .load Function Error: Auto-Removing Script Tag

Thank you for bringing attention to this issue! The problem with the .load function encountering errors when loading HTML with auto-removing script tags is crucial. This occurs due to the script tags being automatically stripped during the loading process, causing unexpected behavior.

Issue Summary

The current behavior leads to errors and may not handle the situation gracefully. Here's a suggested workaround to mitigate the problem:

Workaround

$("#targetElement").load("your.html", function(response, status, xhr) {
    if (status == "error") {
        // Handle error here, maybe log or alert
        console.error("Error loading HTML:", xhr.statusText);
    } else {
        // Success logic
        console.log("HTML loaded successfully!");

        // Your additional logic here, if needed
    }
});

Explanation

The provided snippet includes an error-handling mechanism to manage cases where loading encounters issues. The status parameter in the callback function can be utilized to check for errors. If an error occurs, it logs the details using console.error. On successful loading, the success logic is executed.

Proposed Resolution

It would be beneficial for the .load function to handle scenarios with auto-removing script tags more gracefully. This could involve providing an option to suppress automatic removal or offering a more informative error handling approach.
Looking forward to the community's thoughts on this and a potential resolution to enhance the reliability of the .load function in such scenarios. 👍

gibson042 added a commit to gibson042/jquery that referenced this issue Dec 27, 2023
@gibson042
Manipulation: Add a failing test for $el.html(selfRemovingScript)
8c4a30f 
Ref jquerygh-5377
gibson042 added a commit to gibson042/jquery that referenced this issue Dec 27, 2023
@gibson042
Manipulation: Support $el.html(selfRemovingScript)
f98aaf7 
Fixes jquerygh-5377
@gibson042 gibson042 mentioned this issue Dec 27, 2023
Merged
2 tasks
@mgol mgol closed this as completed in #5378 Jan 8, 2024
mgol pushed a commit that referenced this issue Jan 8, 2024
@gibson042
Manipulation: Support $el.html(selfRemovingScript) (#5378)
937923d 
Don't try to remove a script element that has already removed itself.

Also, compress `DOMEval.js`.

Fixes gh-5377
Closes gh-5378
mgol pushed a commit to mgol/jquery that referenced this issue Jan 8, 2024
@gibson042 @mgol
Manipulation: Support $el.html(selfRemovingScript)
cbc15c9 
Don't try to remove a script element that has already removed itself.

Fixes jquerygh-5377
Closes jquerygh-5378

(cherry-picked from commit 937923d)
@Zecr
Copy link
Author

Zecr commented Jan 16, 2024

Thank you :)

@mgol mgol removed the Discuss in Meeting Reserved for Issues and PRs that anyone would like to discuss in the weekly meeting. label Apr 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Manipulation
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Manipulation: Support $el.html(selfRemovingScript) gibson042/jquery
3 participants
@mgol @Zecr @ShadBalti