https://htmx.org logo
Powered by
# htmx-general
  • m
    And are you doing a server side redirect at all?
  • p
    yes, although adding the hx-retarget to the response. I've also found the same result with a client-side redirect.
  • p
    i.e. returning a 200 with 
    hx-redirect="/"
  • m
    the server side redirect may be nuking the response header
  • m
    can you look in the chrome tools
  • p
    the 
    hx-retarget
    header was present in the response headers when I checked in devtools.
  • p
    I think the issue is not in hx-retarget per se but that the redirected URL returns an entire html doc, so there probably needs to be a way to do 
    hx-select
    on the returned html as well (or just do a plain page refresh). i.e. there's no way for htmx to pull out the 
    body
    of the final content.
  • b
    can hx-preserve be added on click by something like
    Copy code
    html
document.getElementById( `cell-${id}` ).setAttribute("hx-preserve", true);
    or is there no way to add it later?
  • b
    (I have a couple of rows with hx-preserve that work well and a cell where I add the attribute on click which is ignored by htmx and re-rendered)
  • p
    i presume it can be added, but I'd have to check/test it
  • b
    I would be eager to hear of your findings ...
  • c
    I tried 
    hx-include
    on my WebComponent but it doesn't include it in my post. However, if I perform a regular POST I can see my value being submitted. Is there a specific property that 
    hx-include
    looks for to add to the form submission? Perhaps I can ensure that I have that property on my WebComponent....
  • m
    You want to point to the web component w/ the thing doing the submitting, by some CSS selector: https://htmx.org/attributes/hx-include/
  • c
    This is what I have...
    Copy code
    html
<form id="frmUpdate" method="POST"
      class="flex flex-1 flex-col xbg-white xshadow-md xrounded px-8 pt-6 pb-8 mb-4 w-full"
      hx-enctype="text/x-www-form-urlencoded"
      hx-post="/{{MODEL_NAME_PLURAL}}/{{object._id}}" 
      hx-target="#viewport"
      hx-swap="innerHTML"
      hx-push-url="true"
      hx-indicator="#content-loader"
      hx-include="[name='meta_data-search_fields']"
      >...</form>
  • c
    However, my Web Component does not store the value in a native HTMLInput element....
  • c
    The API I mentioned before now supports Form elements but I am wondering if all you are doing is looking for Inputs using 
    hx-include
    ?
  • c
    This is why I am asking if I need to alter my Web Component specifically to be supported by HTMX?
  • c
    My Web Component looks like the following...
  • c
    If I execute a standard Form POST, I see this in my network tab:
  • c
    But if I try my 
    hx-post
    , it is completely ignored...
  • m
    How are you storing the data in your web component?
  • m
    Can you retrieve them w/ javascript?
  • m
  • m
    you can use this if you can grab the values via javascript somehow
  • m
    Can I see what your Web Component looks like?
  • c
    Here is a JSFiddle version of what I have in my application: https://jsfiddle.net/mattduffield/pL9vz86y/
  • c
    If you select something in the Search Fields custom element and then Submit, you will see that there are available in the Network tab. It will fail to post since there is no endpoint though.
  • c
    The trick that gets a standard form post to work is in the _addItem and deleteItem functions and the line `this.internals.setFormValue(values);`
  • m
    Ok I will need to do some research on this
  • c
    If this can work, I have a whole slew of custom elements I wrote in Aurelia that I could port over and use with HTMX as first class citizens. I don't mind modifying my code to support any nuance you need but I would hope that we could just meet the standards as required by regular forms.
1...542543544...1146Latest