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
415
questions
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-...
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 ...
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 ...
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 ...
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&...
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 ...
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=&...
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="...
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....
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 ...
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 ...
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 ...
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 ...
-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"...
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... (...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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....
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 ...
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 ...
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">
&...
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&...
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
...
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 ...
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. ...
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 ...
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 ...
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 ...
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&...
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" ...
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 ...
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 ...
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 ...
-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 ...
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 ...
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 ...
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 ...
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)
...
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="...
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">
...
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/...
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.
<...
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=&...
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"
...
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....
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 ...