Where’s our hyperlink? Tim Berners-Lee would be rolling in his grave 😱

Isn't there something weird about linking to the yellow site?

He might, if he were dead! 🤐

Hello, I'm developing a Springboot application with HTMX. I have a question about HX-POST. How can i apply a callback function (to validate form data) with HX-POST attribute ? Thanks

@high-pencil-36972 hi

Hey folks! First, thanks for HTMX! We we're building in an environment that doesn't allow any kind of JS to be dynamically loaded (i.e. no

eval

, no new imports) and deployment of new client side code is super painful, so HTMX was really heaven sent for us

Of course, I only came here as something didn't work quite as expected 😅 : I'm trying to use

hx-swap="morphdom"

and either it doesn't work or not as great as I thought. I have two simple lists that get updated ever ~5s and every time that happens, I'm losing my scroll position. I have

hx-ext="morphdom-swap"

on my body, the

hx-swap

on a root element and have the required packages installed. Any hints what I might be doing wrong? PS: I also tried Idiomorph, but https://github.com/bigskysoftware/idiomorph/issues/8

This is interesting! A tool for downloading multi file npm packages https://simonwillison.net/2023/May/2/download-esm/

But how do you parse and extract the data from the HTML API??

What do mean exactly with a callback function?

I'm a newbie with HTMX and i have a popup modal (e.g User's form) which i wanna validate all input when i try to post (bindingResult) the form data. (e.g) Message like: "Sorry, the password is incorrect.","The password fields don't match","The username validator returns an error because a digit character is missing" and more. Thanks a lot.

java

@GetMapping(value="/create", headers = "HX-Request")
public HtmxResponse getUserCreatePartial(Model model){
    getRolesAndPermissions(model);
    model.addAttribute("form", new UserRequest());
    return new HtmxResponse().addTemplate(String.format("%s/index :: user-create-form", path));
}


@PostMapping(value="/create", headers = "HX-Request")
public HtmxResponse postUserCreate(@ModelAttribute("form") @Valid UserRequest userRequest, Model model, BindingResult bindingResult){
    if(bindingResult.hasErrors()){
        model.addAttribute("form", new UserRequest());
        return new HtmxResponse().addTemplate(String.format("%s/index :: user-create-form", path));
    }
    return new HtmxResponse().addTemplate(String.format("%s/index :: user-list", path));
}

html

<form class="ui form" id="user-create-form" th:object="${form}" novalidate="novalidate">
  <div id="replace-form">
      ...
      <input type="hidden" data-th-name="${_csrf.parameterName}" th:value="${_csrf.token}" />
  </div>
  <button class="ui primary button" hx-post="/hx/users/create">CREATE</button>
</form>

That should work, but you need to have BindingResult parameter immediately following your UserRequest parameter in your PostMapping method. See https://www.wimdeblauwe.com/blog/2021/05/23/form-handling-with-thymeleaf/ for more info.

Also note that you don’t need to use HtmxResponse as a return type. Just using a String to indicate the Thymeleaf template that should be rendered will also work. HtmxResponse is only needed for out of band responses.

This solution it works successfully but i wanna stay on my modal; i do not wanna leave my modal (reactive form). That's why, i think hx-post with callback to validate my form is the best situation.

thanks

Is HTMX fundamentally event handling from any element without JavaScript? 🤔

Yes, htmx handles events declaratively without JS. Though I'd probably focus on declarative, RESTful swapping of DOM nodes, and it's really nice that you can trigger this core feature with any client-side event.

fundamentally event handling? 🤔 I don't think so. fundamentally it's something like hypermedia enhancement. It almost replaces the Event Handling way of responding to user interaction entirely.. so in some sense it's fundamentally un-event-handling. Instead of handling events as they come (in your code), you create a hypermedia control and present it to the user.

Hi, I'm working on a Django htmx web site. I'm having an issue with a button on a #dialog window. The user clicks a link on a web page and a dialog (modal) window opens up. The window contains some information and two buttons. The buttons are Close and Edit. Both buttons close the dialog and the edit button does not go to the href I've defined it to go to. Does anyone have any ideas on this or a web link that tells me how to do this properly? I'm still pretty new to htmx and ajax. My goal is pretty simple though. Just open a new web page (defined in my urls/views/forms). I know the new web page works because we call it from else where as well.

Loads popup dialog:

function markerOnClick(e) {
        // console.dir(e)
        // console.log(e.target.options)
        var planterId = e.target.options.planterId
        // raise an htmx request to load_planter/planterId
        htmx.ajax('GET', '/load_planter/' + planterId, { target: '#dialog' })
    }

This is the button I have to EDIT:

<div class="card-footer">
                    <div class="modal-footer">
                        <div class="col text-center pt-3">
                            <a href="{% url 'intakeHome' %}" class="btn btn-primary w-100" target="_blank">New Planter</a>
                          </div>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" href="{% url 'plantersdetail' data.id %}" id="editPlanterBtn">Edit Planter</button>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>

buttons don't have hrefs. tags do

Anyone knows what year the last hypermedia control was added/changed in a significant way in HTML? @mysterious-toddler-20573

afaik it was HTML 3 w/ forms

does

<portal>

count? idk if it's a thing anymore but

The first code sample is the logic that causes the popup dialog window to display. So it's an href (actually a point on a global map that you click in the interface). The 2nd code sample is the two buttons.

Short question on the hx-indicator: I want to replace the icon here with an indicator for 2s:

<p hx-target="this" 
   hx-indicator="#spinner"
   hx-swap="outerHTML"
   hx-get="{% url 'command' "start" %}">
    <img src="{% static 'images/foo.svg' %}">click
    <img id="spinner" class="htmx-indicator" src="{% static 'images/loading.gif' %}"/>
</p>

I want to replace the foo.svg with the loading.gif on click, or the whole innerHTML of

<p>

if possible. Is

hx-indicator

the correct tool for the job? My other idea was to return the gif with an hx-redirect, but that seems overpowered?

I’d be wary of prodding date pickers