How to call HTMX in a single html page

Question

I'm new to HTMX and I have made this sample:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script src="https://unpkg.com/htmx.org@1.8.4" integrity="sha384-wg5Y/JwF7VxGk4zLsJEcAojRtlVp1FKKdGy1qN+OMtdq72WRvX/EdRdqg/LOhYeV" crossorigin="anonymous"></script>

        <form>
            <button hx-get="https://google.com/">Click Me!</button>
        </form>
    </body>
</html>

So I tried loading the htmx script firstly and then used hx-get to make a GET request for button.

But now the problem is, it does not work out at all!

It's like adding a button with no action and nothing also appears in the Console bar as js error!

So if you know how to call this htmx properly, please let me know..

Thanks.

UPDATE

I removed the <form> tags and it looks like the htmx is now calling but retrieves these errors:

How to call htmx properly

Maybe need `hx-trigger` and `hx-target` as mentioned at the top of the [docs](https://htmx.org/docs/). — Ouroborus, Dec 05 '22 at 11:33

score 1 · Accepted Answer · answered Dec 05 '22 at 11:29

1

When you click the submit button, the JS runs but you also trigger submission of the form.

Since Ajax is asynchronous, the form submits before the Ajax is complete. The browser then navigates to a new copy of the same page (killing the existing script, as a side effect, before the Ajax request completes).

Remove the form element from the document. You aren't using it for anything.

Your next problem is that Google does not give you permission to access it cross-origin.

answered Dec 05 '22 at 11:29

Quentin

914,110
126
1,211
1,335

Thanks buddy, I removed the `
` tags but now I get some Console errors, would you take a look at the question plz
– ruwroveajaic Dec 05 '22 at 11:34
@ruwroveajaic — That's a different problem, but one I already addressed in the last paragraph of this answer. – Quentin Dec 05 '22 at 11:35

score 0 · Answer 2 · answered Dec 05 '22 at 11:37

Please refer this answer

You are making a Request to a different domain than your page is on. So, the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

Make a request from same domain!!

How to call HTMX in a single html page

2 Answers2