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/htmx.org@1.9.12/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?

Uh oh!

Support hx-target-XXX ? #58

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions