Questions tagged [htmx]

htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

Filter by
Sorted by
Tagged with
0 votes
2 answers
61 views

Trying to send multiple values in a htmx request [Django] [HTMX]

I'm encountering an issue when trying to send two values from the frontend to the backend using htmx. Here's my code: {% include "base.html" %} {% block content %} <div class='flex flex-...
CalledSidd's user avatar
0 votes
1 answer
32 views

UpdateView can't update (Django, HTMX)

I'm working on a Django app similar to some streaming platforms, as I am building a portfolio. In the database management part (where I add, edit or delete films), I'm trying to use UpdateView (as I ...
Voyageur Zen's user avatar
0 votes
0 answers
44 views

Celery progress bar isn`t being updated

i am developing some Django app, which generates reports. I am using celery to enable progress bar after hitting 'submit' button. The problem is that I can't figure out what i am missing and why ...
Danylo Polishchuk's user avatar
1 vote
0 answers
37 views

HTMX - Reveal doesn't work with absolute position and a fixed bottom

I am trying to get hx-trigger="reveal" to work for infinite scrolling but it doesn't seem to trigger with the div is styled with position:absolute; bottom: 20px; Changing either of those ...
Gunslinger's user avatar
  • 1,475
1 vote
0 answers
144 views

How to POST a form to a REST endpoint with HTMX

I have a simple HTML form: <form id="contact" > <div> <label for="name">Name:</label> <input type="text&...
pierostz's user avatar
  • 125
0 votes
1 answer
103 views

django render multiple templates with same context hitting db every time

I am working on showing multiple tables in multiple tabs using htmx for lazy-load. The code is working properly, but I couldn't solve two things. The queryset is hitting db 4 times. I was trying to ...
jisoooh0202's user avatar
0 votes
1 answer
52 views

HTML elements in response using htmx's websockets extension are getting hyphens added, tags commented out

I am using the htmx websockets extension. I have a list of players on my page. I want to send a message from my backend over the WebSocket to add a player to the list. I send the message <li id=&...
Doug Naphas's user avatar
0 votes
1 answer
44 views

How to include a dynamic variable inside a htmx request?

I have an endpoint which accepts an ID as parameter. Ex : mysite.com/product/{id}?limit=5 How to pass the variable 'id' in the hx-get ? (Can use AlpineJS or vanilla JS) <button hx-trigger="...
mtnp's user avatar
  • 334
0 votes
1 answer
35 views

Not able to update Django model with HTMX button click

I am using Django, Tailwind CSS, and HTMX. I am trying to update my Django model (Item) which starts as None to use a dropdown select to change the color then use a button to Save and update the Item....
sepulchre01's user avatar
  • 1,308
1 vote
1 answer
42 views

why I have target Error when i did HTMX inline editing?

I'm doing a Django project and want to use HTMX to achieve inline edit, I can click the title to change the text, but once I click the save button, it shows targetError. I just checked that I used the ...
Steven's user avatar
  • 107
0 votes
0 answers
55 views

Why is HTMX Download not working But CDN works?

https://htmx.org/docs/#installing documentation states :- gives a CDN method <script src="https://unpkg.com/[email protected]"... Works Well No Problems. when I swap (1 above) out for a ...
DaHerb's user avatar
  • 39
0 votes
1 answer
17 views

In Hyperscript how do you properly close an overlay from outside the element "on click" in?

Is there a way in Hyperscript to create the behavior for overlay elements to close/hide on clicks outside their own element? I've tried "on click from elsewhere add .hidden to me"? I saw ...
wapoa's user avatar
  • 1
0 votes
1 answer
42 views

How can i exchange data between HTMX and flask in JSON or any thing other then html

So i am trying to make a app using Flask and HTMX. I know that htmx wants to get data as html to swap with the given target element, but is there a way to update the current page using other data such ...
humam choudhary's user avatar
-1 votes
0 answers
48 views

Getting a fragment of a layout after the page has been generated

I have a layout like this one: <main th:fragment="global-content"> <div>My head</div> <div id="asset-tab" layout:fragment="content"...
Stéphane Traumat's user avatar
1 vote
0 answers
19 views

bash: bin/v2: No such file or directory when deploying Go/Gin app to Koyeb

I recently started learning Go and I decided to build out a portfolio project to get more experience with the language. The app builds and runs with no error locally, but when I try to deploy it... (...
quigly's user avatar
  • 81
0 votes
0 answers
10 views

Possible to have hx-get "echo" client-side to avoid a server-side echo of HX-Target?

I'm kicking the tires of HTMX and specifically the client-side-templates extension. Let's say I have three buttons with an ancestor hx-get that has a mustache-template attribute. That template handles ...
Chris Harrington's user avatar
0 votes
1 answer
49 views

HTMX & Django: Using HMTX across multiple Class Based Views

Desired Outcome: I am attempting to implement a UX flow with htmx and Django, where the user first selects a date, then a timeslot (determined based on the date), then a ticket (availability ...
nlewis99's user avatar
0 votes
1 answer
62 views

Flask does not load Bokeh plot when first time visiting page (HTMX)

I'm using a flask file (run_server.py) to alternate between index.html and home.html (code provided below). There's an HTMX button to take me from index.html to home.html. And there's a similar button ...
btgorman's user avatar
1 vote
1 answer
96 views

HTMX: hx-boost and relative URLs

I have encountered an interesting problem. First, imagine following URL structure: /admin /admin/[id] (this redirects to /admin/[id]/scores) /admin/[id]/scores /admin/[id]/answers I configured all ...
maiksch's user avatar
  • 161
0 votes
1 answer
85 views

HTMX: Passing a function to `hx-on` for reading the event

I must be missing the absolute obvious here: Using htmx I am trying to send a get request and configure it in javascript before sending it. HTMX provides hx-get, hx-on and the configRequest event for ...
J0sh's user avatar
  • 23
0 votes
0 answers
36 views

How to update one HTML element when htmx:oobAfterSwap is triggered on another?

I am working on an htmx powered ai chat app, I have an endpoint /history which returns the chat history. I also have two elements which handle user input and model responses from the chat websocket ...
voidkandy's user avatar
0 votes
1 answer
49 views

HTMX select item in list with arrows

I would like to recreate google search box with HTMX. But I have some issues like how to highlight row in suggestions. Only way I know how to do it with HTMX is call service which will render new html....
sholdNotBeAskingThis's user avatar
0 votes
0 answers
15 views

Correct syntax for the htmx hx-request attribute (credentials, noHeaders)

I have a Django project where I'm making some fairly extensive use of HTMX to insert hints, errors, etc. within the forms to assist the user in filling them out correctly. Here's an example of the ...
JDM's user avatar
  • 1,730
0 votes
0 answers
53 views

flask reactive table/grid with edit forms

With flask,what technologies/components or libraries are used to display reactive tables/grids with edit forms? I've come across datatables and it works fine, except that I can't make the associated ...
JeffP's user avatar
  • 545
0 votes
1 answer
71 views

HTMX Websockets are not replacing content in DOM

I am trying to get an HTMX Websocket to work. It is a Chat system and should replace the chat content via websocket. This is the Code snippet of the chat: <div class="min-h-96"> &...
CHH's user avatar
  • 140
0 votes
2 answers
91 views

hx-vals in combination with multiple triggers does not have the "event" object attached for both?

It is only attatched to the fist one of the multiple triggers. Here is an example codepen: https://codepen.io/viggiesmalls/pen/NWoRryY <!DOCTYPE html> <html lang="en"> <head&...
movileanuv's user avatar
0 votes
0 answers
53 views

Hyperscript unable to find element in DOM

I am trying to run the following code using hyperscript based on HTMX HX-Trigger tags as part of response. <script type="text/hyperscript"> on membershipsChanged ...
Ahmad's user avatar
  • 23
0 votes
0 answers
65 views

How to politely close an SSE event stream using htmx?

I'm trying to set up a short-lived event stream handler using htmx. Imagine, e.g., streaming a chatgpt response or similar. The stream will last for 10-30 seconds and then I expect it to be ...
paxundae's user avatar
0 votes
2 answers
70 views

HTMX search suggestions and search from signle input

I would like to have single input box for user to type the query. While they type it HTMX should call one endpoint for suggestions, but when user hits the enter button it should call another endpoint. ...
sholdNotBeAskingThis's user avatar
0 votes
0 answers
33 views

How to solve jquery datatables repeated search and pagination rows?

I am using HTMX (for Ajax requests) and JQuery Datables in a django project, but I am experiencing a weird issue. Indeed the datatables work fine, but repeat search and pagination rows when I navigate ...
Abdoulaye's user avatar
0 votes
1 answer
19 views

Django Q() for filtering returns the same objects multiple times

I am making a tutoring dashboard in Django. The tools used are htmx,jquery, bootstrap. In the tutors.html page, there is a searchbar. When an user types something, it will send a request to the server ...
Juan Molina's user avatar
0 votes
1 answer
120 views

How do I successfully validate and parse htmx form data with a python/fastapi backend using BaseModel?

I am having a difficult time successfully parsing and validating HTMX form data in a FastAPI backend. When I send a POST request to my backend the associated data is stored in the body of the request ...
Shamus McKeown's user avatar
0 votes
1 answer
131 views

HTMX websocket target response element

Using HTMX with Django and websocket. {% block content %} <main hx-ext="ws" ws-connect="/ws/attempt/{{ id }}/" hx-trigger="load" hx-target="#question_response&...
Anuj TBE's user avatar
  • 9,338
0 votes
1 answer
212 views

Htmx hx-indicator with multiple elements on page

I'm showing a loading spinner on my page when triggering a htmx-request like so: <div class="col-4 px-4dot5 py-3 bg-secondary-light"> <label for="stellenangebotLink" ...
Simon Weber's user avatar
0 votes
1 answer
112 views

Dynamic htmx localStorage hx-header XSS question

I'd like to add an dynamic header to my hx-headers in htmx like so. <form hx-post="api/auth/login-signup" hx-headers='js:{"Authorization": localStorage.accessToken}' I want ...
Conor Lamb's user avatar
0 votes
1 answer
93 views

Django Datatables with HTMX Refresh Causes to Lose Functionality

I'm using Django with bootstrap datatables to display my data. I have it mostly working, but it seems that when I do a call back refresh with HTMX, all of the buttons break. I think what is happening ...
charlopa24's user avatar
0 votes
1 answer
122 views

inserting response as value of input field with htmx in flask

I have an html form with an input field. As the user is typing, the value of the input field gets sent to a flask route (with htmx), processed there, returned to the form and should replace the ...
Quados's user avatar
  • 3
-1 votes
1 answer
73 views

Can I delete an element in one place, and create an element elsewhere in one go?

I have 2 parent elements, let's call them div_parent_1 and div_parent_2. Both of these parent elements have a number of child elements. I want to use htmx to move a child element from div_parent_1 to ...
Sheena's user avatar
  • 15.7k
2 votes
1 answer
69 views

hx-post not using correct action (path)

Using htmx to submit a form and hx-post is using the current path for the action while replacing the hx-post with the action attribute I get the correct path. https://imgur.com/a/Vh3snub This does not ...
Zach Anton's user avatar
0 votes
1 answer
82 views

Can HTMX target a single DOM element attribute rather than the whole element?

I want to replace a single attribute on a single DOM element using HTMX, something easy to do in JS but I can't seem to figure out the best way in HTMX to do it. My specific use-case is an input field ...
mr.b's user avatar
  • 933
0 votes
0 answers
59 views

Htmx POST for Editable Row

I am trying to do an editable row with Django and HTMX. I have trouble editing rows. When I click the edit button, form appears instead of row. I click save after edit fields, nothing happens. Why is ...
Hilal's user avatar
  • 97
0 votes
2 answers
66 views

django.urls.exceptions.NoReverseMatch: 1 pattern(s) tried: ['link/edit/(?P<pk>[0-9]+)/\\Z']

I am trying to use Django with HTMX. My task is to do editable row in the link list with HTMX. When I click the edit button in the row, I am getting NoReverseMatch error. raise NoReverseMatch(msg) ...
Hilal's user avatar
  • 97
2 votes
2 answers
95 views

HTMX Active Search - min of 3 characters

I'm following along with the HTMX Active Search example. I need to change it so it does not trigger the request unless 3 characters have been entered in the search input box. <input class="...
David Moorhouse's user avatar
0 votes
1 answer
35 views

Dropdown using HTMX with call to database and Spring endpoint

I have following simple dropdown defined using htmx: <div> <select name="region" id="regionSelect" hx-get="/regions" hx-trigger="change"> ...
hoosain.madhi's user avatar
0 votes
1 answer
63 views

HTMX: Why isn't the default target working?

According to the HTMX documentation, the default target for an Ajax response is the innerHTML of the element making the call. Yet in my sample code below, where the span makes a request to /books/...
redOctober13's user avatar
  • 3,722
1 vote
1 answer
214 views

how to include the variables inside hx-vals?

I have an input tag that i use for searching. <input id="keyword" type="search" name="keyword" th:value="${keyword}"> Now I have a hx-get in a div. <...
azer-p's user avatar
  • 324
0 votes
1 answer
52 views

how to append variable inside the hx-delete?

I currently have a springboot app with thymeleaf, now I'm trying to use HTMX. Now in my table, each row has a delete button. <tr th:each="training : ${trainings}"> <th scope=&...
azer-p's user avatar
  • 324
0 votes
0 answers
31 views

HTMX and Uncaught RangeError on second ajax call

I have started HTMX today and have the same problem on two different pages of my site. In the first a load content into div using button: <li class="content_first_tabs_li" ...
Mike's user avatar
  • 654
0 votes
0 answers
55 views

HTMX + Flask Active search with pagination

I'm trying to add pagination to HTMX Active Search. this is my base code example: view: @app.route('/search_items', methods=['POST', 'GET']) def search_items(): #some forms here users = User....
Sławek Drożdż's user avatar
0 votes
1 answer
74 views

htmx - focus element (non javascript)

How are elements focused in htmx? I can't seem to find an answer anywhere. The goal is to focus a specific element after a POST request i.e. focus the input with id #field-description. I'd like this ...
Ivan's user avatar
  • 2,071

1
2 3 4 5
9