Enhanced Navigation doesn't reprocess JS on Same Page

garrettlondon1 commented 6 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

Enhanced load will not reprocess HTMX if its loading the same page

HTMX will reprocess if any other page is loaded, with enhanced navigation on using script below

<script>
    window.Blazor.addEventListener("enhancedload", function () {
        window.htmx.process(document.body);
    });
</script>

Disabling enhanced navigation does fix this, with data-enhance-nav=false

Expected Behavior

Reloading the same page you are currently on from the navlink, properly re-executes htmx scripts on the same page through enhancedload callback.

This is the last hiccup between completing the bridge between InteractiveServer islands and Minimal API HTMX partials on the same StreamRendered page. The ultimate combination

Steps To Reproduce

https://github.com/garrettlondon1/BlazorHtmx

Clone this repo
Navigate to counter
Click on counter again in the navbar, htmx will not be executed.

Exceptions (if any)

No response

.NET Version

No response

Anything else?

No response

javiercn commented 6 months ago

@garrettlondon1 thanks for contacting us.

Is the issue that the event is not being raised?

garrettlondon1 commented 6 months ago

Hi @javiercn, the event does get raised actually

garrettlondon1 commented 6 months ago

https://github.com/khalidabuhakmeh/BlazorHtmx/pull/1#issuecomment-2065519260

garrettlondon1 commented 6 months ago

Additionally,

<script>
  Blazor.start({
    ssr: { disableDomPreservation: true }
  });
</script>

This opens up a new socket connection every time you switch pages, so the developer can't really turn off enhanced nav if using InteractiveServer

khalidabuhakmeh commented 6 months ago

As a note, you can disable enhanced load on specific pages using the data-enhance-nav attribute.

<a href="redirect" data-enhance-nav="false">
    GET without enhanced navigation
</a>

This ensures that the page you're navigating to will always load completely. Cheers.

garrettlondon1 commented 6 months ago

As a note, you can disable enhanced load on specific pages using the data-enhance-nav attribute.
<a href="redirect" data-enhance-nav="false">
    GET without enhanced navigation
</a>
This ensures that the page you're navigating to will always load completely. Cheers.

Problem with this is a new websocket is opened every time

MackinnonBuck commented 3 months ago

Before we address this in https://github.com/dotnet/aspnetcore/issues/52273, a possible workaround is to register a custom element on the initial page load and define some custom logic in its lifecycle callbacks. Then you can render that custom element on any page that requires its functionality. You could even use HTML attributes to augment the custom element's behavior.

For example, the PageScript sample component is a general-purpose application of this technique, and it lets you specify an arbitrary JS module with callbacks for handling navigation events (including enhanced navigation). Some people have had success with that. It would probably help with this specific issue as well.

In the meantime, I'm going to close this out as a dupe of https://github.com/dotnet/aspnetcore/issues/52273, since the concerns expressed in this issue appear to be accurately reflected there.

dotnet / aspnetcore