https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b
    You got it! Check out #941388608290574336 and #864934037381971988
  • a
    what do you mean with strictly valid? Shouldn't that be the case for any HTML?
  • a
    or do you mean following the table/tbody/tr/td hierarchy without adding anything in between parent/child?
  • c
    This is like Anti-HTMX: https://api-first-world.com/
  • m
    all good, I wish them well
  • j
    i think they will have all sorts of first-world problems
  • j
    they should let us know when Postman can consume HTML documents with microformat markup
  • p
    So, I'm trying to build a mini tech-stack using HTMX + Alpine but I need something for styling to replace Tailwind. I'd like to get something that doesn't have a compile stage. Any suggestions?
  • e
    If you want to avoid javascript, I was experimenting with https://www.pollen.style/ as a base, and using css variables to add more styling on top. If I knew css well, I'd probably go for that over tailwind. No build step, unless you want to minify.
  • e
    Apologies if this is in the docs, but I didn't see it. I have a form where I have htmx send a post on submit and on change. However, if connection is slow, and user edits a few elements, then the new form result comes in, replaces old form, and new edits are lost. Is there a way to get htmx to reject the results of the ajax request it sent if the form has been modified since it sent that?
  • p
    I'm trying to avoid compiling, literally any CSS, and javascript. I like the feel of styling-in-html of tailwind but want to stick with the theme of HTMX and Alpine not needing to be compiled or anything fancy, just import and directly use in HTML.
  • p
    In-line CSS, that is what I'm looking for is called.
  • e
    I recently looked through a bunch of styling options. You could use a full pre-compiled tailwind css file, but I think it's quite large. Other css frameworks like bulma and bootstrap I think have pre-compiled minified css files, but they don't do styling the way that tailwind does.
  • m
    the loading states extension might be what you want: https://htmx.org/extensions/loading-states/
  • m
    I've used blockUI-type libraries for stuff like that in the past
  • e
    @mysterious-toddler-20573 That doesn't quite look like what I need. Ideally, I can get it to ignore earlier request results if a new request has been sent since, just so that I don't replace form content that's been written since.
  • e
    Ooh, this might do it: https://htmx.org/attributes/hx-sync/ with hx-sync="this:replace"! Seems to work in my testing
  • m
    ah yes
  • e
    @mysterious-toddler-20573 I'm trying to use: The "content" target is a div that contains the form itself. I've also tried hx-trigger="change, submit, input". Either way, if my focus is inside an input inside this form, the focus in that input is lost. Am I right in thinking that focus is intended to stay, based on https://github.com/bigskysoftware/htmx/issues/343 ? Using htmx 1.8.0.
  • m
    do you have ids on your inputs?
  • e
    @mysterious-toddler-20573 I did not, that seems to have done the trick, thanks!
  • e
    Yep, that works perfect I think, once I add ID's to things like buttons as well, for when tabbing between elements and the content gets replaced underneath
  • t
    Yeah. A 
    <td>
    outside a ` isn't really valid html. Neither is a 
    <tr>
    outside a ``/``/`` and so on and so forth. You have to return a full table structure and then 
    hx-select
    out the td. Or 
    useTemplateFragments
    I think.
  • l
    All working - thanks so much! Minor mod below as UIKit was showing an exception in the console - needs a function passed for cancel too - just added an empty one. Also found how to change the button captions. Can't find out how to change the default to 'cancel' but that's easily sorted by flipping the captions!
    Copy code
    <button id="but1" hx-trigger='confirm'
                        hx-post="/engfees/editrow/@Model.ModelItem.ID?cmd=delete"
                        onclick="UIkit.modal.confirm('Are you sure you want to delete this row?', {
        labels: {
            cancel: 'No',
            ok: 'Delete Row'
        }
    }).then(function () { htmx.trigger('#but1', 'confirm') }, function () { });">
                    Click Me
                </button>
  • f
    if using a "load more" button to load next row of items in a website. How doe Google SEO see this next row, and the next one ... pagination? How do you solve this?
  • f
  • g
    implement it as progressive enhancement of normal pagination:
    Copy code
    html
<a href="?page=2" hx-boost="true" hx-target="this" hx-swap="outerHTML">Load More</a>
  • f
    @gorgeous-airport-54386 but google SEO does not work like that
  • g
    google SEO doesn't follow links?
  • f
    yes, but the content is not a page. its only a with some content ... You don't want user landing on that
1...770771772...1146Latest