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

Support hx-target-XXX ? #58

Open
StefH opened this issue May 21, 2024 · 4 comments
Open

Support hx-target-XXX ? #58

StefH opened this issue May 21, 2024 · 4 comments

Comments

@StefH
Copy link
Contributor

StefH commented May 21, 2024

Hello Egil, do you have any plans to support this https://htmx.org/extensions/response-targets/ ?
@egil
Copy link
Owner

egil commented May 21, 2024

Hey @StefH,

Natively Htmxor will support what Htmx comes with out of the box. To support any extensions, Htmxor will probably need to be expanded with a generic HtmxResponse.Headers property, so developers can create their extension methods on HtmxResponse that set specific headers.

In this particular case, I am not sure Htmxor needs anything besides what it already has for the response-targets extension to work.

You can set the status code through HtmxResponse and just include the attributes you want like normal. Let me know if I am missing something.

@StefH
Copy link
Contributor Author

StefH commented May 23, 2024

Hi @egil,

I got this working in the demo app with:

1️⃣

Adding

builder.AddMarkupContent(2, @"<script defer src=""_content/Htmxor/htmx/response-targets.js""></script>");

to HtmxHeadOutlet.

Note that just adding the script in my main app:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MinimalHtmxorApp.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HtmxHeadOutlet UseEmbeddedHtmx="false" />
    <script src="https://unpkg.com/[email protected]/dist/ext/response-targets.js"></script>
    <HeadOutlet />
</head>

<body hx-boost="true">
    <Routes />
</body>

</html>

Did not work?

response-targets.js:76 Uncaught ReferenceError: htmx is not defined
    at response-targets.js:76:5
    at response-targets.js:130:3

2️⃣ Update html + blazor code:

<div id="counter" hx-ext="response-targets"> ⭐
    <HtmxFragment>
        <p role="status">
            Current count: @CurrentCount
        </p>
        <button class="btn btn-primary"
                hx-put="/counter"
                hx-vals='{ "CurrentCount": @(CurrentCount) }'
                hx-target="#counter"
                hx-target-5*="#serious-errors" ⭐
                @onput="IncrementCount">
	        Click me
        </button>
        <div id="serious-errors"></div> ⭐
    </HtmxFragment>
</div>

@code {
    [SupplyParameterFromForm]
    private int CurrentCount { get; set; } = 0;

    private void IncrementCount(HtmxEventArgs args)
    {
        // Access the HtmxContextEventArgs to control
        // the response headers to the client.
        // E.g.: args.Response.StatusCode(HttpStatusCode.Created);

        CurrentCount++;
        
        if (CurrentCount == 5)
        {
                // ⭐ Return a 500 status code to the client
	        args.Response.StatusCode(HttpStatusCode.InternalServerError);
        }
    }
}

However, I actually want to return the exception message back.

Instead of the normal body:

<p role="status">
            Current count: 5</p>
        <button class="btn btn-primary" hx-put="/counter" hx-vals="{ &quot;CurrentCount&quot;: 5 }" hx-target="#counter" hx-target-5*="#serious-errors" hxor-eventid="0567AF4F">
	        Click me
        </button>
        <div id="serious-errors"></div>

Is this scenario supported in Htmx?

@egil
Copy link
Owner

egil commented May 25, 2024

In this case you should not set <HtmxHeadOutlet UseEmbeddedHtmx="false" />. Only set UseEmbeddedHtmx="false" if you want to include your own version of htmx.js.

If you just want to use an additional htmx extensions, just include it after the HtmxHeadOutlet. Do note that HtmxHeadOutlet include scripts with the defer attribute set.

@egil
Copy link
Owner

egil commented May 25, 2024

Some statuscodes result in no content being sent, i.e. HttpStatusCode.NoContent, but otherwise, you should be able to set any statuscode you want and return any result.

I am still learning htmx though, so I am not entirely sure how it behaves by default with 500 status codes. It does have some default behaviors with 404 status code and others but your extension may override that.

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

No branches or pull requests
2 participants
@egil @StefH