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

Preload extension fails with Safari on macOS #2504

Open
michrome opened this issue Apr 24, 2024 · 2 comments · May be fixed by bigskysoftware/htmx-extensions#24
Open

Preload extension fails with Safari on macOS #2504

michrome opened this issue Apr 24, 2024 · 2 comments · May be fixed by bigskysoftware/htmx-extensions#24

Comments

@michrome
Copy link

Summary

The preload extension fails to initialise on Safari, with the error TypeError: null is not an object (evaluating 'event.target.querySelectorAll') - preload.js:138.

Line 138 in [preload.js](https://github.com/bigskysoftware/htmx/blob/master/src/ext/preload.js) is:

// Search for all child nodes that have a "preload" attribute
event.target.querySelectorAll("[preload]").forEach(function(node) {

    // Initialize the node with the "preload" attribute
    init(node)

    // Initialize all child elements that are anchors or have `hx-get` (use with care)
    node.querySelectorAll("a,[hx-get],[data-hx-get]").forEach(init)
})

It appears Safari returns null for event.target when other browsers do not.

Versions

  • Safari v17.4 on macOS Sonoma
  • HTMX v1.9.12
  • Preload extension v1.9.12

Example for reproduction

<!doctype html>
<html lang="en-GB">
    <head>
        <script src="https://unpkg.com/htmx.org@1.9.12"></script>
        <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/preload.js"></script>
    </head>
    <body hx-ext="preload">
        <ul id="list">
            <li>Test</li>
        </ul>
        <div hx-get="/some_url" hx-target="#list" hx-select="#list" preload>
            Get Some HTML
        </div>
    </body>
</html>
Screenshot 2024-04-24 at 21 35 04
@michrome
Copy link
Author

Would replacing event.target.querySelectorAll("[preload]").forEach(function(node) { with document.querySelectorAll("[preload]").forEach(function(node) { resolve this issue?

@Telroshan
Copy link
Collaborator

I wonder if the same fix than in #2391 could be applied here ? Seems like the same underlying issue

michrome added a commit to michrome/htmx that referenced this issue Apr 25, 2024
@michrome
Fallback for Safari. Fixes bigskysoftware#2504
5b0c5d4
@michrome michrome mentioned this issue Apr 25, 2024
Open
michrome added a commit to michrome/htmx-extensions that referenced this issue May 17, 2024
@michrome
Fallback for Safari. Fixes bigskysoftware/htmx#2504
51b11d4
@michrome michrome linked a pull request May 17, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fallback for Safari. Fixes issue # 2504 in htmx repo. michrome/htmx-extensions
2 participants
@michrome @Telroshan