Django Rest Framework custom api.html throws warnings on OPTIONS request ajax form #9039
Unanswered
salicius
asked this question in
Question & Answer
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm building my custom
api.htmltemplate for Django Rest Framework api project (based on the officialbase.htmltemplate to customize mine), but I'm facing some issues implementing the OPTIONS button. Here it is my code:{% load static %} {% load i18n %} {% load rest_framework %} <!DOCTYPE html> <html lang="en" id="myHtml"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My project title</title> <link rel="shortcut icon" href="{% static 'assets/compass-fill.ico' %}" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link id="theme-link" rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" /> <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script> </head> <body> <div class="container"> ... {% if options_form %} <form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS" > <button type="submit" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="Make an OPTIONS request on the {{ name }} resource" data-bs-custom-class="tooltip-success" > OPTIONS </button> </form> {% endif %} ... </div> ... <script type="application/json" id="drf_csrf"> { "csrfHeaderName": "{{ csrf_header_name|default:'X-CSRFToken' }}", "csrfToken": "{% if request %}{{ csrf_token }}{% endif %}" } </script> <script src="{% static 'rest_framework/js/ajax-form.js' %}"></script> <script src="{% static 'rest_framework/js/load-ajax-form.js' %}"></script> <script src="{% static 'rest_framework/js/csrf.js' %}"></script> <script> const themeLink = document.getElementById("theme-link"); ...my other scripts... </script> </body> </html>I created the OPTIONS button like in the original template base.html and in the end of the body I loaded js functions without them the button function not works properly.
In fact, if clicked it shows the drf option content but unfortunately it will throw warnings and errors, like if it replace entire html page but keeping old elements and after click shows inside the console:
Seems like the ajax call is causing all this troubles, but I just created functions, copied from the official repo branch files (load-ajax-form.js, ajax-form.js, csrf.js) and put them inside my
static/rest_framework/jsfolder.Where I'm wrong on customize the template ?
Beta Was this translation helpful? Give feedback.
All reactions