Use javascript in hx:vals

[engnaruto]

Hi, is there a way to use javascript in hx:vals?

I need to do something like this:

 hx:vals="${ {stageIndex: stageIndex, stepCount: document.querySelectorAll('.taskStep').length} }"

so my use case is to create a json using thymeleaf variables and using javascript at the same time

when I try this, I get this exception:

[nio-8080-exec-8] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/partials/....html]")] with root cause


org.springframework.expression.spel.SpelEvaluationException: EL1011E: Method call: Attempted to call method querySelectorAll(java.lang.String) on null context object

[checketts]

Can you include what you would expect the rendered HTML to look like? I'm having trouble understanding the request.

I typically would solve something like this as a hidden field and avoid the Javascript approach:

<input type="hidden" name="stepCount" th:value="${steps.size}">

[engnaruto]

Thanks @checketts. I wanted to send these information to the Spring controller so based on it I can determine the properties of new fragment that I wanted to render.

After doing some search, I found that I can use the javascript event to get what I need:

hx-vals='js:{stageIndex: event.target.closest(".taskStage").getAttribute("stageIndex"), stepCount: event.target.closest(".taskStage").querySelectorAll(".taskStep").length}'

maybe there is a better solution for this in thymeleaf that I am not aware of it as this is the first project to use thymeleaf and htmx

what I am working on is a form that adds new empty input fields (stages and steps of the stages) when I click add stage or add step in a stage, so I don't want to make the button to submit the whole form when I click it, so I use htmx to send a request to the spring boot controller with the values needed so the controller returns a fragment with the correct input attributes