Using django url scheme with Javascript fetch API

Question

I want to use django url scheme when working with fetch API, but it's not understood and i end up with an escaped URL.

I followed this tutorial (in french sorry) in which the author achieve it very easily. Demonstrated here

Example code :

document.querySelectorAll('.list-group-item-action').forEach(
    elem => {
        elem.addEventListener("click", event => {
            event.preventDefault();
            let url = "{% url 'myapp:search_user' %}"
            const request = new Request(url, {method: 'POST', body: formData});
            fetch(request)
               .then(response => response.json())
               .then(result => {
                  console.log(result)
               })
        })
    })

Which ends up with a console error :

POST http://127.0.0.1:8000/myapp/actions/%7B%%20url%20'myapp:search_user'%20%%7D 404 (Not found)

Of course my URL is declared in url.py and works well when used in templates.

If I replace "url" with relative path it's work well, but that's not django friendly.

What I am missing ?

Edit:

Here's the HTML code

{% extends 'myapp/base/base.html' %}

{% load static %}

{%  block headers %}
{% endblock %}


{%  block heading %}
    <h1 class="h3 mb-0 text-gray-800">MyApp - Actions</h1>

{%  endblock %}


{%  block content %}
  <div class="container">
<div class="row">
  <div class="col-lg-4">
    <div class="card">
      <h5 class="card-header">
        {{ title }}
      </h5>


    <form method="POST">
{% csrf_token %}
    </form>
      <div class="list-group list-group-flush">
        {% for action in action_list %}
        <a href="{{ action.dest }}" class="list-group-item list-group-item-action">{{ action.display }}</a>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="col-lg-5">
    <div class="form-floating">
      <textarea class="form-control" placeholder="Enter list here.." id="user-data" style="height: 150px"></textarea>
      <label for="floatingTextarea2">List</label>
    </div>
  </div>

</div>

  <div class="bg-white col-lg-12" id="target_div">
  </div>


  </div>
{% endblock %}


{% block scripts %}
  <script src={% static "js/actions.js" %}></script>


{% endblock %}

Do you want access the django like variable in a external JavaScript file ? — Rvector
– Rvector, Commented Sep 17, 2021 at 22:41
You're doing it wrong by using Django code inside your javascript file. For what you want to work you need run to the javascript code within your HTML like <script>#Your javascript here</script> — Confidence Yobo
– Confidence Yobo, Commented Sep 17, 2021 at 22:44

Rvector · Accepted Answer · 2021-09-17 22:47:13Z

3

If you want to access to a Django variable on a external Js file

Declare the variable in a js script tag <script> let url = "{% url 'app_label:my_url' %}";</srcipt>

Insert your external js file in which you have now access to the defined url variable

external_js.js

let django_url = url;

answered Sep 17, 2021 at 22:47

Rvector

2,4621 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John-franklin Anusiem · Accepted Answer · 2021-09-17 22:50:14Z

0

I had this same issue when working with ajax and I just used the direct url as it appears on the search bar. Instead of {% url 'myapp:search_user' %} try "mymapp/search_bar" or however it looks in your urls.py file.

answered Sep 17, 2021 at 22:50

John-franklin Anusiem

11 bronze badge

1 Comment

Rvector Over a year ago

You should use the first answer ... Don't write hard code url in your code.

Collectives™ on Stack Overflow

Using django url scheme with Javascript fetch API

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related