Search code examples
javascripthtmx

htmx hx-vals js not executed

I struggle to get js to work in vals for a hx-get request.

My HTML is the following

<script>
    console.log("to start with")
    function getWidth() {
        console.log("here we are")
        return 1
    }
</script>
<div hx-get="/game_visuals" 
    hx-swap="innerHtml" 
    hx-trigger="load"
    hx-vals='js:{width: getWidth()}'>
</div>

I expect to see log entries

  • to start with
  • here we are

however I only see to start with and my get request is sent without parameters. If I replace js:{width: getWidth()} with {"width": 2} the parameter width with value 2 is sent with the request.

The documentation uses hx-vals as example for dynamically evaluated values here https://htmx.org/attributes/hx-vals/. It might be that I confuse what is executed when or something else I don't understand.

I also tried to define getWidth in a js file that I include and I also tried to simply us js inline and nothing worked.

Solution

  • The problem was the htmx version. I was using htmx 1.1.0. Updating to 1.9.5 did the trick.