Set hx-put attribute value use hyperscript dynamically not work as expected.

[zw963]

Following is a example:

I have a modal diag div like this:

<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a
      href="#!"
      class="modal-close waves-effect btn-flat"
      hx-put=""
      hx-swap="none"
    >Agree</a>
  </div>
</div>

As you can see, i leave the hx-put attribute blank, because several links like following use this same modal diag,
i can only set the correct hx-put url before i open the dialog, like this:

<a
  href="#modal1"
  class="waves-effect waves-light btn modal-trigger"
  script: "on mouseenter set @hx-put of <#modal1 a[hx-put]/> to '/users/1/update'"
>
Click me
</a>

after i click on the above link, i can see the hx-put attribute set to "/users/1/update" correctly for <#modal1 a[hx-put]/> in the browser inspecter, but, after click the link use Agree button in the modal dialog, the put request sent to server with hx-put is blank
instead of expected path.

Yes, that means, set hx-put to /users/1/update use hyperscript is not see by htmx.

I don't know if this a bug, or may i do something wrong?

Thanks

[Telroshan]

Hey, htmx indeed parses the attributes on load, so it parses the blank hx-put. For any situation where you want to update some htmx logic "from the outside" (for instance updating an attribute value after it has been parsed, inserting a node outside htmx's own swapping system), you will want to use htmx.process, after setting your new hx-put value.
This should make htmx process the new hx-put value correctly here.
Let me know!

[zw963]

Really awesome to heard that!

Following code is work:

                script: "
on mouseenter put '修改 #{user.email} 的密码' into the <#modal1 h5/>
then set @hx-put of <#modal1 a[hx-put]/> to '#{User::Htmx::Password.with(user_id).path}'
then js htmx.process(document.body) end
"

[zw963]

BTW: another solution to workaround this issue is, use a fixed url instead, then add user_id use a input tag instead, sure, this solution only useful if you can control the server backend.