Using reverse url in javascript

I need to add event listener to standard django select field.
The listener will (in the future) do htmx.ajax call ( https://htmx.org/api/#ajax )

urls.py

from django.urls import path
from .views import mailtemplate_GetSchema, refresh_schema

from .views import surat_schema_table
urlpatterns = [
    path('htmx/surat_schema_table/<str:template_id>', surat_schema_table, name='surat_schema_table'),

]

currently I have a test template.
This template will not do ajax call, just display final url tobe called

form template ( surat_form_htmx.html )

{% extends "admin/change_form.html" %}
{% block after_field_sets %}

  <!--- add htmx -->
  <script src="https://unpkg.com/htmx.org@1.6.0"></script>

  <style>
    /* DivTable.com */
    .divTable{
      display: table;
      width: 100%;
    }
    .divTableRow {
      display: table-row;
    }
    .divTableCell, .divTableHead {
      border: 1px solid #999999;
      display: table-cell;
      padding: 3px 10px;
    }
    .divTableHeading {
      display: table-header-group;
      font-weight: bold;
    }
    .divTableFoot {
      background-color: #EEE;
      display: table-footer-group;
      font-weight: bold;
    }
    .divTableBody {
      display: table-row-group;
    }
  </style>
  <!-- EOF evt listener id_template -->
  Obj ID: <input id="loaded_object" id="loaded_object" type="text" size="20" readonly {% if not add %} value="{{ obj_id }}" {% endif %}>
  Selected Template: <input id="selected_template" name="selected_template" type="text" size="20" readonly >
  url: <input id="call_url" name="call_url" type="text" size="20" readonly >

  <script>
    const selectElement = document.querySelector("#id_template");

    selectElement.addEventListener('change', (event) => {
      var result = document.getElementById("id_template").value ;
      var url_final={% url surat_schema_table result %} ;
      document.getElementById('selected_template').value = result;
      document.getElementById('call_url').value = url_final;

    });

</script>
  <!-- EOF evt listener id_template -->

  <div id="container_for_surat_schema_table">

  </div>
{% endblock %}

admin.py


from django.contrib import admin
from .models import Surat

class SuratAdmin(admin.ModelAdmin):
  change_form_template = 'surat_form_htmx.html'

admin.site.register(Surat, SuratAdmin)

currently it produce a traceback when loaded:

Exception Value:    

Reverse for '' not found. '' is not a valid view function or pattern name.

looks like that 'var result' is read as just " '' " by template.

My question is:
How to use/call reverse url in javascript with variable from 'var' inside django template.

var url_final={% url surat_schema_table result %}

should be something like var url_final={% url "surat_schema_table" template_id="..." %}

(must fit to the urlspattern definition)

Back to Top