CODEWITHSUNDEEP
htmx
shnewto
shnewto

Reputation: 386

HX-Push-Url in my response isn't effecting the client URL or browser history

I'm trying to level up with htmx and can't figure out how to use the HX-Push-Url correctly. Just having it in the reponse header isn't having the effect I'm expecting, i.e. the url I specify showing up in the browser.

Here's a boiled down version of what I've got going at the moment

Sever Code:

import express from "express";
import cors from "cors";
var app = express()

app.use(cors())

const port = 3030;

app.get('/', (req, res) => {
    res.set('Hx-Push-Url', '/new-page');
    res.send(`
    <div>
        <text>hello, world</text>
    </div>
  `);
});

app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
})

Client Code:

<!DOCTYPE html>
<html>

<head>
    <title>htmx-sandbox</title>
    <script src="https://unpkg.com/[email protected]"></script>
</head>

<body>
    <div id="page" hx-trigger="load" hx-get="http://127.0.0.1:3030" hx-swap="innerHtml" hx-target=this>
    </div>
</body>

</html>

In the browser network console, I do see the header in my response

enter image description here

fwiw I also tried adding res.set('Hx-Replace-Url', true) to the response but it didn't have any effect I noticed.

enter image description here

Another note, using hx-push-url=/new-page in the client html does work! But I'd really like to sort out using these response headers.

Thanks for any suggestions or help!

Upvotes: 1

Views: 736

Answers (1)

shnewto
shnewto

Reputation: 386

I noticed that my Hx-Push-Url header wasn't showing up in the xhr object's response headers and researching response headers missing in the xhr object issue lead me to a solution that resolved my issue.

// extra header required to expose the Hx-Push-Url in the response
res.set('Access-Control-Expose-Headers', 'Hx-Push-Url');

Upvotes: 1

Related Questions