This sub is correct:
[CODE lang="b4x" highlight="61"]Private Sub CreateProductsRow (data As Map) As Tag
Dim id As Int = data.Get("id")
Dim code As String = data.Get("code")
Dim name As String = data.Get("name")
Dim price As Double = data.Get("price")
Dim category As String = data.Get("category")
If App.ctx.ContainsKey("/table/row") = False Then
'Dim tr1 As Tag = Tr.init
Dim tr1 As Tag
tr1.Initialize("tr")
tr1 = Tr.init
tr1.add(Td.cls("align-middle").sty("text-align: right"))'.text(id)
tr1.add(Td.cls("align-middle"))'.text(code)
tr1.add(Td.cls("align-middle"))'.text(name)
tr1.add(Td.cls("align-middle"))'.text(category)
tr1.add(Td.cls("align-middle").sty("text-align: right"))'.text(NumberFormat2(price, 1, 2, 2, True))
Dim td6 As Tag = Td.cls("align-middle text-center px-1 py-1").up(tr1)
Dim anchor1 As Tag = Anchor.cls("edit text-primary mx-2").up(td6)
anchor1.hxGet("") '($"/api/products/edit/${id}"$)
anchor1.hxTarget("#modal-content")
anchor1.hxTrigger("click")
anchor1.data("bs-toggle", "modal")
anchor1.data("bs-target", "#modal-container")
anchor1.add(Icon.cls("bi bi-pencil"))
anchor1.attr("title", "Edit")
Dim anchor2 As Tag = Anchor.cls("delete text-danger mx-2").up(td6)
anchor2.hxGet("") '($"/api/products/delete/${id}"$)
anchor2.hxTarget("#modal-content")
anchor2.hxTrigger("click")
anchor2.data("bs-toggle", "modal")
anchor2.data("bs-target", "#modal-container")
anchor2.add(Icon.cls("bi bi-trash3"))
anchor2.attr("title", "Delete")
' Store for reuse
App.ctx.Put("/table/row", tr1)
End If
Dim ctx As CopyOnWriteMap
ctx.Initialize(App.ctx)
'Dim row1 As Tag = ctx.GetMap.Get("/table/row")
Dim row1 As Tag
row1.Initialize("tr")
row1 = ctx.GetMap.Get("/table/row")
' Update tag with new data
row1.Child(0).text2(id)
row1.Child(1).text2(code)
row1.Child(2).text2(name)
row1.Child(3).text2(category)
row1.Child(4).text2(NumberFormat2(price, 1, 2, 2, True))
Dim td6 As Tag = row1.Child(5)
Dim anchor1 As Tag = td6.Child(0)
anchor1.hxGet($"/api/products/edit/${id}"$)
Dim anchor2 As Tag = td6.Child(1)
anchor2.hxGet($"/api/products/delete/${id}"$)
row1.PrintMe
Return row1
End Sub[/CODE]
Logs:
B4X:
<tr>
<td class="align-middle" style="text-align: right">1</td>
<td class="align-middle">T001</td>
<td class="align-middle">Teddy Bear</td>
<td class="align-middle">Toys</td>
<td class="align-middle" style="text-align: right">99.90</td>
<td class="align-middle text-center px-1 py-1">
<a class="edit text-primary mx-2" hx-get="/api/products/edit/1" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Edit">
<i class="bi bi-pencil"></i></a>
<a class="delete text-danger mx-2" hx-get="/api/products/delete/1" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Delete">
<i class="bi bi-trash3"></i></a></td>
</tr>
<tr>
<td class="align-middle" style="text-align: right">2</td>
<td class="align-middle">H001</td>
<td class="align-middle">Hammer</td>
<td class="align-middle">Hardwares</td>
<td class="align-middle" style="text-align: right">15.75</td>
<td class="align-middle text-center px-1 py-1">
<a class="edit text-primary mx-2" hx-get="/api/products/edit/2" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Edit">
<i class="bi bi-pencil"></i></a>
<a class="delete text-danger mx-2" hx-get="/api/products/delete/2" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Delete">
<i class="bi bi-trash3"></i></a></td>
</tr>
<tr>
<td class="align-middle" style="text-align: right">3</td>
<td class="align-middle">T002</td>
<td class="align-middle">Optimus Prime</td>
<td class="align-middle">Toys</td>
<td class="align-middle" style="text-align: right">1,000.00</td>
<td class="align-middle text-center px-1 py-1">
<a class="edit text-primary mx-2" hx-get="/api/products/edit/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Edit">
<i class="bi bi-pencil"></i></a>
<a class="delete text-danger mx-2" hx-get="/api/products/delete/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Delete">
<i class="bi bi-trash3"></i></a></td>
</tr>
But when I log the generated table using this code:
[CODE lang="b4x" highlight="33"]Private Sub CreateProductsTable As Tag
If App.ctx.ContainsKey("/table") = False Then
Dim table1 As Tag = HtmlTable.cls("table table-bordered table-hover rounded small")
Dim thead1 As Tag = table1.add(Thead.cls("table-light"))
thead1.add(Th.sty("text-align: right; width: 50px").text("#"))
thead1.add(Th.text("Code"))
thead1.add(Th.text("Name"))
thead1.add(Th.text("Category"))
thead1.add(Th.sty("text-align: right").text("Price"))
thead1.add(Th.sty("text-align: center; width: 120px").text("Actions"))
'Dim tbody1 As Tag = table1.add(Tbody.init)
App.ctx.Put("/table", table1)
End If
Dim Template As CopyOnWriteMap
Template.Initialize(App.ctx)
Dim table1 As Tag = Template.GetMap.Get("/table")
Dim tbody1 As Tag = table1.add(Tbody.init)
DB.SQL = Main.DBOpen
DB.Table = "tbl_products p"
DB.Columns = Array("p.id id", "p.category_id catid", "c.category_name category", "p.product_code code", "p.product_name name", "p.product_price price")
DB.Join = DB.CreateJoin("tbl_categories c", "p.category_id = c.id", "")
DB.OrderBy = CreateMap("p.id": "")
DB.Query
For Each row As Map In DB.Results
'Dim tr1 As Tag = CreateProductsRow(row)
Dim tr1 As Tag
tr1.Initialize("tr")
tr1 = CreateProductsRow(row)
tr1.up(tbody1)
Next
DB.Close
table1.PrintMe
Return table1
End Sub[/CODE]
I get the logs:
B4X:
GET: /
GET: /api/products/table
<table class="table table-bordered table-hover rounded small">
<thead class="table-light">
<th style="text-align: right; width: 50px">#</th>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th style="text-align: right">Price</th>
<th style="text-align: center; width: 120px">Actions</th>
</thead>
<tbody>
<tr>
<td class="align-middle" style="text-align: right">3</td>
<td class="align-middle">T002</td>
<td class="align-middle">Optimus Prime</td>
<td class="align-middle">Toys</td>
<td class="align-middle" style="text-align: right">1,000.00</td>
<td class="align-middle text-center px-1 py-1">
<a class="edit text-primary mx-2" hx-get="/api/products/edit/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Edit">
<i class="bi bi-pencil"></i></a>
<a class="delete text-danger mx-2" hx-get="/api/products/delete/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Delete">
<i class="bi bi-trash3"></i></a></td>
</tr>
<tr>
<td class="align-middle" style="text-align: right">3</td>
<td class="align-middle">T002</td>
<td class="align-middle">Optimus Prime</td>
<td class="align-middle">Toys</td>
<td class="align-middle" style="text-align: right">1,000.00</td>
<td class="align-middle text-center px-1 py-1">
<a class="edit text-primary mx-2" hx-get="/api/products/edit/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Edit">
<i class="bi bi-pencil"></i></a>
<a class="delete text-danger mx-2" hx-get="/api/products/delete/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Delete">
<i class="bi bi-trash3"></i></a></td>
</tr>
<tr>
<td class="align-middle" style="text-align: right">3</td>
<td class="align-middle">T002</td>
<td class="align-middle">Optimus Prime</td>
<td class="align-middle">Toys</td>
<td class="align-middle" style="text-align: right">1,000.00</td>
<td class="align-middle text-center px-1 py-1">
<a class="edit text-primary mx-2" hx-get="/api/products/edit/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Edit">
<i class="bi bi-pencil"></i></a>
<a class="delete text-danger mx-2" hx-get="/api/products/delete/3" hx-target="#modal-content" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modal-container" title="Delete">
<i class="bi bi-trash3"></i></a></td>
</tr>
</tbody>
</table>