Returning TableRows AND some toast (OOB)

[CRSylar]

Hi guys!

i've some problem while trying to swap in some <tr>, including in the same response a <div> that swap itself oob.

kida like what is described here, but the other way.

first things first, what i want to achieve:

• the reponse contains the new element to swap ( a <tr> with its content) and also a toast notification message (that swaps oob)

now, if i return just the <tr> it works fine, but when coupled with the <div> containing the toast notification the resulting html is missing the entire <tr> and the first <td> from the response ( but the other tds are present).

here the table row component

<tr id={props.ID} class="*:py-2 *:font-medium [&_td:not(:first-child):not(:last-child)]:border-t">
   	<td>
   		<span class="status-content flex h-5 px-3.5 rounded-tr-xl rounded-br-xl fhd:rounded-full"></span>
   	</td>
   	<td class="pr-3 pl-4 max-w-0 w-full text-sm">
   	......
</td>
   	<td class="hidden px-3 sm:table-cell text-sm text-center">....</td>
   	<td class="">....</td>
   	<td class="hidden px-3 text-sm sm:table-cell text-center">....</td>
   	<td class="hidden sm:table-cell text-right pr-4 pl-3 text-sm">
   		<button
   			hx-get={.... }
   			hx-target="body"
   			hx-swap="beforeend"
   			class="bg-primary-600 p-2 rounded-xl text-gray-50 hover:bg-primary-900"
   		>Edit</button>
   	</td>
   </tr> 

i've tryied to wrap it into a <template> and also into a <tbody> but the results were the same, if i add the toast to the response it breaks.

i've add here also the toast component just in case

<div
		hx-select-oob="#toast-container:innerHTML"
		id="toast"
		
	>
		@getStatusIcon(props.Type)
		<span class="text-wrap max-w-sm">{ props.Message }</span>
	</div>

[Telroshan]

This may not solve your issue, but is it not hx-swap-oob that you want here, instead of hx-select-oob?

[CRSylar]

with hx-swap-oob the tost notification will not work, since there's not a matching id element to swap it with

unless i was misleaded by Docs, but my understanding is that hx-swap-oob can "just" be true ( can't have a css selector)
and must be coupled with the id.

instead the hx-select-oob accept a css selector ( that's my case, so i can push the new toast inside it's toast-container even if its empty )

[Telroshan]

@CRSylar See hx-swap-oob documentation

The value of the hx-swap-oob can be:
true
any valid hx-swap value
any valid hx-swap value, followed by a colon, followed by a CSS selector

If a swap value is given, that swap strategy will be used.
If a selector is given, all elements matched by that selector will be swapped. If not, the element with an ID matching the new content will be swapped.

You should be able to use the exact same value you put in there for hx-select-oob, and just change the attribute name

[CRSylar]

SOLVED.

if someone else got this issue -

the response must wrap the <tr> inside a <table><tbody> ( as per HTML specs), then in the element that triggered the request use the hx-select to select the <tr> from the response and swap it where needed ( using the hx-target + hx-swap tags )

and it will work like a charm.

example.

templ Wrapper() {
	<table>
		<tbody id="#expensesTable">
			<tr>
			.........
			</tr>
		</tbody>
	</table>
}