Refresh component B with s-val from component A

Question

Hi Ben, I am trying to build a link which will load an entry into another component. I have a list of entries wich is updated via sprig – just to give you some context. Each list item has a link that should load the given entry into my overlay container.

This is a stripped down version of what I have. When I click the link it loads more entries from my list into the overlay component. But it looks like my link is not passing the entryId to the entryOverlay component. Is it even possible to send a s-val from one component to another? I am sure I am just overlooking something in the docs.

{#-- main --#}
<main>
	{{ sprig('_components/entryList') }}

	{{ sprig('_components/entryOverlay', {}, {
		'id': 'entryOverlay',
	}) }}
</main>

{#-- _components/entryList --#}
{% set entries = craft.entries.section('mySeciton').offset(offset).limit(limit).all() %}

{% for entry in entries %}
	 <a sprig s-target="#entryOverlay" s-val:entry-id="{{entry.id}}">{{ entry.title }}</a>
	 {# limit and offset updated with a revealed trigger #}
{% endfor %}

{#-- _components/entryOverlay --#}
{% set entryId = entryId ?? false %}
{% set entry = craft.entries.id(entryId).one() %}

{% if entry %}
	<p>{{entry.title}}</p>
{% endif %}

So I am basically looking for button that refreshes another component with a new variable.

Additional context

I also tried a different button like this

<button onclick="htmx.trigger('#entryOverlay', 'refresh', {entryId: {{entry.id}}});">{{ entry.title }}</button>

But I it also doesn’t pass the variable.

[pimago]

Cool, that did it. Thanks!

[bencroker]

Thanks. I think this also prevents the link from sending the hidden input entryId value? It doesn’t seem to work.

Ah right, in that case you can include that input field only.

{{ sprig('_components/entryOverlay', {}, {
    'id': 'entryOverlay',
    's-include': 'input[name=entryId]',
}) }}