Pass from Javascript to Django a template URL with PK

Question

I implemented Ajax Search with success and results are loaded in a table which is in a template file. My TH are static and I append each result in < tr > < td >... in a foreach loop.

       if (data.length === 0) {
                tableOutput.innerHTML = '<h3>Aucun résultat.</h3>';

            } else {
                nbResults.style.display = "block"
                nbResults.innerHTML = data.length + " produits trouvés"
                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>
                    `;

My problem is I had (above) to "hardcode" my URL "auto-product-details" because when I try to respect Django template syntax like this :

<td><a href="{% url 'auto-product-details' ${item.id} %}">...

but the URL is transformed in

/facture/%7B%%20url%20'auto-product-details'%2036%20%%7D

I tried to build piece by piece my URL in JS, tried to replace the {item.id } after the creation of a base (var) url without PK ... no success. It seems the special characters are transformed in HTML.

Is there a way to achieve what I want to do ?

Answer 1

You could use an intermediate variable:

my_url = "{% url 'auto-product-details' ${item.id} %}"
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="'+my_url+'"> 
        <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>
    ';