https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b
    I've tried hx-swap=none and hx-swap on the inputs' parent node, and both options behave by resetting the radio after loading the htmx response here's the fragment:
    Copy code
    html
<fieldset class="filter" hx-swap="this">
    <legend>"Filter"</legend>
    <input type="radio" id="filter-all" name="filter" value="All" checked={ selected_filter == All } hx-post="/todos;filter=All" />
    <label for="filter-all">"All"</label>
    <input type="radio" id="filter-active" name="filter" value="Active" checked={ selected_filter == Active } hx-post="/todos;filter=Active" />
    <label for="filter-active">"Active"</label>
    <input type="radio" id="filter-completed" name="filter" value="Completed" checked={ selected_filter == Completed } hx-post="/todos;filter=Completed" />
    <label for="filter-completed">"Completed"</label>
</fieldset>
  • m
    the radio is reset?
  • m
    is the HTML being sent down on the wire what you expect?
  • m
    What should happen is that you post to 
    /todos
    and then the entire fieldset is re-rendered. As long as the HTML that comes down has the correct option selected, it should work.
  • m
    oh, ah, I think the checked attribute needs to be absent on the unselected options. It can't be "false" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#attr-checked
  • m
    Copy code
    checked

    A Boolean attribute which, if present, indicates that this radio button is the default selected one in the group.
  • f
    Yep, this is the classic trap, you shold completely unset the checked attribute
  • v
    How can we get HTMLX server side rendering
  • b
    In htmx everything is server side rendered.
  • m
    Like the HTML it extends, htmx is just hypermedia. Any HTTP library in any language can speak it.
  • v
    But if you disable javascript on the browser side JS will not render
  • m
    Yes. Unfortunately the only way to extend HTML on the client side is with JavaScript. I suppose a user plugin would work too, but that's beyond the scope of the project. If you know someone who works on chrome you can ask them to integrate htmx-like functionality into HTML itself, which is where it should be, but until that happy day comes to pass we are, unfortunately, reliant on javascript to fix HTML.
  • v
    couldn’t agree more
  • o
    Correct my if I am wrong but in your headers you can check if it is htmx request or not and handle accordingly. For instance, you can build out your application using HTML, handle all the form submissions accordingly and then sprinkle on enhancements. That is my strategy with htmx-boost where if there is the htmx header I send back just the body, if not then my app just works*.
  • b
    oh thank you! that must have been it
  • a
    Can you use 
    hx-preserve
    while doing a 
    hx-swap-oob="true"
    ? Because I can't seem to get it to preserve an element on the page (same component ID)
  • b
    could you change hx-target to swap the children of the element you want to preserve instead of the element itself?
  • a
    Unfortunately, if I do a target swap, the changes become very difficult to manage - it's a very complicated and fluid UI
  • m
    maybe one of the morphing plugins would simplify things? https://htmx.org/docs/#morphing
  • b
    Hi
  • b
    Can HTMX handle HTTP return codes which are not 2xx ?
  • m
    300-level redirects are handled by the browser before htmx gets access to the request. A 
    204 - No Content
    is treated as "nothing to swap". You can modify how other response codes are handled as outlined here: https://htmx.org/docs/#modifying_swapping_behavior_with_events
  • b
    Thanks
  • h
    Hi all.. i use fullcalendar and i wanna in eventClick function use htmx open the modal.. this something possible ?
  • b
    What do you suggest to do to implement the following case: A HTML page contains a table which includes different items. An item contains an 
    edit
    button. When we click on it we do a GET (= server logic will check if an entity exists). If there is an entity within the DB then we should forward the request to a new screen to edit the entity ?
  • m
    this seems like something for client side scripting rather than htmx. htmx should be used to sync with the server, but if something is purely client side, a client side scripting solution will likely be better.
  • m
    i would stick w/ a normal CRUD-like interface, where clicking on the button replaces the entire table with an editing UI, and then on save you return to the table (perhaps with the edited element highlighted)
  • m
    you could also do an inline editing mechanism, depending on how much there is to show
  • m
  • b
    Thanks. I will check tomorrow
1...918919920...1146Latest