Django Createview - Method Not Allowed when trying to register by loading form with Bootstrap Modal

Question

When trying to submit a form to enter in the database I am receiving, in the browser console, the error message Failed to load Resource: the server responded with a status of 405 () when I load my template into a Modal Bootstrap in my Listview.

When I open the same template "normally", that is, without being in a Modal, the insertion happens without any problem.

Follow, below, the codes involved in the problem.

**view.py**
class UsoVeiculoCreate(CreateView):
    model = UsoVeiculo
    form_class = UsoViaturaForm
    template_name = 'frotaapp/uso-veiculo.html'

    def get(self, request, *args, **kwargs):
        form = self.form_class(initial = self.initial)
        return render(request, self.template_name, {'form':form})

    def post(self, request, *args, **kwargs):
        form = self.form_class(request.POST)

        if form.is_valid():
            model = form.save(commit=False)
            model.condutor_uso = Condutor.objects.get(servidor_condutor=request.user)
            model.save()
            return HttpResponseRedirect(reverse('viatura:uso-veiculo-listar'))            
        else:
            return render(request, self.template_name, {'form':form})

class UsoVeiculoListar(ListView):
    model = UsoVeiculo
    template_name = 'frotaapp/listar-uso-veiculo.html'

    def get_queryset(self):
        return UsoVeiculo.objects.all().order_by("-data_saida_uso")

Code below is the template for insertion of the Template

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block rel-adicionais %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
{% endblock %}

{% block content %}
  <div class='container'>
      <h3><b><p>Cadastrar Uso de Veículo</b></p></h3>
      {% crispy form %}
  </div>
{% endblock %}

{% block extra-script %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#id_data_saida_uso').datetimepicker({
                format: 'DD/MM/YYYY HH:mm',
            }).attr("autocomplete", "on");
        });
    </script>

{% endblock %}

Now the template of my Listview, where is the Modal that should load the template above

{% extends 'base.html' %}

{% load crispy_forms_tags %}

{% block title %}
    <title>Uso dos Veículos</title>
{% endblock %}

{% block rel-adicionais %}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.25/datatables.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
{% endblock %}

{% block content %}
    <h3><b><p class='container'>Usos dos Veículos</b></p></h3>

    <div class='container'>
        <hr/>
        <p class="text-right">

            <a class='open-novo'
                href="{% url 'viatura:uso-veiculo-novo' %}"
                data-popup-url="{% url 'viatura:uso-veiculo-novo' %}"
                title='Registrar Novo Uso'
                >Novo
            </a>

        </p>
        <table id='notificacoes_controle_urbano' class='table table-bordered table-hover'>
            <thead>
                <tr>
                    <th>Data Saída</th>
                    <th>Data Retorno</th>
                    <th>Viatura</th>
                    <th>Condutor</th>
                    <th>KM Início</th>
                    <th>KM Final</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                {% for model in object_list %}
                <tr>
                    <td>{{ model.data_saida_uso }}</td>
                    <td>{{ model.data_retorno_uso }}</td>
                    <td>{{ model.veiculo_uso }}</td>
                    <td>{{ model.condutor_uso }}</td>
                    <td>{{ model.km_inicio_uso }}</td>
                    <td>{{ model.km_fim_uso }}</td>
                    <td>
                        <a href="{% url 'viatura:encerrar-uso' model.pk %}">
                            <button class="btn btn-danger btn-sm" title='Encerrar Uso'>E</button>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>


    <!-- The Modal -->
    <div id="popup" class="modal fade" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-info" data-dismiss="modal">Close
            </button>
          </div>
        </div>
      </div>
    </div>
{% endblock %}


{% block extra-script %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.25/datatables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#notificacoes_controle_urbano').DataTable({
                responsive: true,
                "aaSorting": [],
                "pageLength": 50,                
            });
        });

        $(document).on('click', '.open-novo', function(e) {
           e.preventDefault();
           var $popup = $("#popup");
           var popup_url = $(this).data('popup-url');
           $(".modal-body", $popup).load(popup_url, function() {
               $popup.modal("show");
           });
        });
    </script>
{% endblock %}

Thanks for your attention.