I successfully implemented Ajax Search and the results are loaded into a table within a template file. The table header rows are static, and I iterate through each result to append them in < tr > < td >... using a foreach loop.
if (data.length === 0) {
tableOutput.innerHTML = '<h3>No results found.</h3>';
} else {
nbResults.style.display = "block"
nbResults.innerHTML = data.length + " products found"
data.forEach((item) => {
my_url = "{% url 'auto-product-details' ${item.id} %}"
if (item.etat__etat == "Echange Standard") {
var etat = "ES";
} else {
var etat = item.etat__etat;
}
if (item.cau == "0.00") {
var cau = "nc";
} else {
var cau = item.cau;
}
tableBody.innerHTML += `
<tr>
<td>${item.sku}</th>
<td>${item.etat}</td>
<td ${item.nom}</td>
<td>${item.sst1}</td>
<td>${item.sst2}</td>
<td>${item.sst3}</td>
<td>${item.pua}</td>
<td>${item.cau}</td>
<td><a href="/facture/auto-product-details/${item.id}">
<button type="button" class="btn btn-sm btn-labeled btn-
info">
<span style="color: #fff;" class="btn-label"><i class="fas
fa-sign-in-alt"></i></span></a></td>
</tr>
`;
The issue arises when trying to include Django template syntax for the URL using:
<td><a href="{% url 'auto-product-details' ${item.id} %}">...
This transformation occurs resulting in:
/facture/%7B%%20url%20'auto-product-details'%2036%20%%7D
Attempts were made to construct the URL piece by piece in JS and replace {item.id } after creating a base URL without PK, but no success was achieved. It appears that special characters are being converted to HTML. Is there a way to accomplish this task as intended?