Django calender tools missing (not shown) when loaded via ajax call

I need to have a model change_form that will call a 'child form' when a change is detected in it's select field.

This is from admin.py


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

admin.site.register(Surat, SuratAdmin)

and this is template 'surat_form_htmx.html'

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

  <!--- add htmx -->
  {% load static %}

  <script src="https://unpkg.com/htmx.org@1.6.0"></script>
  <script src="{% url 'js-catlog' %}"></script>
  <!--script src="{% static '/admin/js/core.js' %}"></script-->
  <!--link rel="stylesheet" href="{% static 'admin/css/base.css' %}"-->
  <link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">
  <script src="{% static '/admin/js/calendar.js' %}"></script>
  <script src="{% static '/admin/js/admin/DateTimeShortcuts.js' %}"></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>

  <!-- dummy hidden input needed for js -->
  <input id="loaded_object" type="hidden" size="20" readonly {% if not add %} value="{{ original.pk }}" {% endif %}>
  <p>
  <!-- eof ndummy hidden input needed for js -->
  <div id="htmx_get_result">

  </div>
  <!-- evt listener id_template change-->
  <script>
    const selectElement = document.querySelector("#id_template");
    const url_base = "/mst/htmx/child_form";

    selectElement.addEventListener('change', (event) => {
      var template_id = document.getElementById("id_template").value ;
      var surat_id = document.getElementById("loaded_object").value ;
      htmx.ajax('GET', url_base, {target:'#htmx_get_result', swap:'outerHTML'})

    });

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

{% endblock %}

here is what it looks when first loaded.

enter image description here

I want when the 'Template' field changed, it will call a view that will load 'child form'.

Here is the child form in views.py

from .forms import ChildForm

def child_form_view(request):
  myForm = ChildForm()
  return render(request, 'child_form_template.html', {'form': myForm})

Here is from form.py


class ChildForm(forms.Form):
    f_date = forms.DateField(initial=datetime.datetime.now(),
    widget = AdminDateWidget(),
    label= 'Due Date',)

and here is child_form_template.html

<!--
 ref: https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/10
-->
<!--{% load static %}-->
<script src="{% url 'js-catlog' %}"></script>
<script src="{% static '/admin/js/core.js' %}"></script>
<!--link rel="stylesheet" href="{% static 'admin/css/base.css' %}"-->
<link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">
<script src="{% static '/admin/js/calendar.js' %}"></script>
<!--script src="{% static '/admin/js/admin/DateTimeShortcuts.js' %}"></script-->

{{ form.media }}
<fieldset class="module aligned ">
{{ form.as_div }}
</fieldset>

And here is how it looks when it's directly loaded alone. not via the 'surat_form_htmx.html' of modelAdmin

enter image description here

But, here is how it look when loaded by changing 'Template' field of the modelAdmin.

enter image description here

Notice that the 'calender tool' is not there.

My question is why the 'Calender' is missing from child_form when it's loaded from my modelAdmin template?
and how to fix it?

Back to Top