Bootstrap模态和Django中的XMLHttpRequest同步错误

时间:2018-11-26 11:46:21

标签: javascript ajax django django-forms xmlhttprequest

程序打开Bootstrap Modal并加载Django Form以创建新权限,这是可行的。但是,当我想要在表单中添加新的Ajax调用以动态加载Django ChoiceField中的元素时,就会出现错误,并且浏览器永远也不会结束调用。

我打开浏览器检查控制台并出现XMLHttpRequest错误

url.py:

y

永远无法从ajax调用此函数

views.py:

path('permisos/', general_views.permission_list,name='permission_list'),
path('permisos/crear', general_views.permission_create, name='permission_create'),
path('permisos/<int:id>/editar', general_views.permission_update, name='permission_update'),
path('permisos/<int:id>/detalle', general_views.permission_detail, name='permission_detail'),
path('permisos/<int:id>/borrar', general_views.permission_delete, name='permission_delete'),

path('permisos/crear/cargar_elementos/', general_views.permission_load, name='ajax_load_permissions'),

forms.py:

def permission_load(request):
  type = request.GET.get('type')

  if type == 2: # object
    list = ['general', 'billing', 'accounting']
    elements = ContentType.objects.filter(app_label__in=list)

  elif type == 3: # instance
    list = ['general', 'billing', 'accounting']
    content_type = ContentType.objects.filter(app_label__in=list)
    elements = general_models.content_type.model.objects.all()

  elif type == 4: # attribute
    list = ['general', 'billing', 'accounting']
    content_type = ContentType.objects.filter(app_label__in=list)
    elements = general_models.content_type.model.objects.all()
    # get instance atributtes

  else: # module
    elements = general_models.Modules.objects.all()

  # other aspect is that i dont know how to load view result in the html choicefield

  response = { 'element': elements }
  json = simplejson.dumps(response)
  return HttpResponse(json, mimetype="text/json")

permissions.html:

class CustomPermisisonForm(forms.Form):
  name = forms.CharField()

  ACTION_TYPE = ((1, ('Ver')),(2, ('Añadir')),(3, ('Modificar')),(4, ('Borrar')))
  action = forms.MultipleChoiceField(choices=ACTION_TYPE, label='Acciones', initial=1, widget=forms.SelectMultiple())

  PERMISSION_TYPE = ((1, ('Módulo')),(2, ('Objecto')),(3, ('Instancia')),(4, ('Atributo')))
  type = forms.ChoiceField(choices=PERMISSION_TYPE, label='Tipo', initial=1, widget=forms.Select(attrs={"data-objects-url":"{% url 'ajax_load_permissions' %}"}))

  element = forms.ModelChoiceField(queryset=general_models.Module.objects.all())

permission_create.html:

{% block javascript %}
  <script src="{% static 'js/permissions.js' %}"></script>
{% endblock %}

# this is the line to open modal
<button type="button" onclick="return openModalPermission('{% url 'general:permission_create' %}')" class="btn btn-outline-primary float-right btn-sm">
  <span class="fas fa-plus"></span>
</button>

permission_form.html:

{% load static %}

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <form method="POST" action="{% url 'general:permission_create' %}">
      {% csrf_token %}
      <div class="modal-header">
        <h4 class="modal-title">Nuevo Permiso</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% include 'permission_form.html' %}
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Crear</button>
      </div>
    </form>
  </div>
</div>

# when comment this line the error disappear but don't work js call
<script src="{% static 'js/permissions.js' %}"></script>

permissions.js:

{% load widget_tweaks %}
{% load static %}

{% for field in form %}
  <div class="form-group{% if field.errors %} has-error{% endif %}">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {% render_field field class="form-control" %}
    {% for error in field.errors %}
      <p class="help-block">{{ error }}</p>
    {% endfor %}
  </div>
{% endfor %}

有人知道如何解决这个问题吗? 预先感谢。

1 个答案:

答案 0 :(得分:0)

已解决

permissions.html:

<!-- pass this block to the end of the file -->
{% block javascript %}
  <script src="{% static 'js/permissions.js' %}"></script>
{% endblock %}