Why after moving a .js script from html to .js file, it does not load the values?

Question

I have a dropdown box which whenever I change its values, a js script forwards its responses to another dropdown. This script works when is inside the .html file, but once I move it to a seprate .js file it does not work. this is the code:

$("#id_subtag-tags").change(function () {
  var tagId = $(this).val();  // get the selected tag ID from the HTML input
  console.log(tagId);

  $("#displaytags").html('');

  $.ajax({                       // initialize an AJAX request
    url: '{% url "ajax_load_subtags" %}',                    // set the url of the request (= localhost:8000/app/ajax/load_subtags/)
    data: {
      'tags': tagId       // add the tag id to the GET parameters
    },
    success: function (data) {   // `data` is the return of the `load_subtags` view function
      $("#id_subtag-subtags").html(data);  // replace the contents of the subtags input with the data that came from the server
    }
  });
});

There is another function in the same file which is properly is being loaded to that html file, so I think problem is not in loading. I don't know what is causing this bug.

The error I receive is:

GET failed, ajax_load_subtags 404 (Not Found),

url.py:

path('myapp/post/ajax/ajax_load_subtags', load_subtags, name='ajax_load_subtags'),

My guess is that the problem is in loading the url, as in html I had {% load static %} but I don't know what is the equivalent in .js files!!

Duplicate of https://stackoverflow.com/questions/298772/django-template-variables-and-javascript — Jonas, Nov 16 '20 at 15:30
@Jonas They look related, but this is targeted towards a URL rather than a dictionary which requires additional checks. — Dean Elliott, Nov 16 '20 at 16:29

score 2 · Accepted Answer · answered Nov 16 '20 at 15:33

In the AJAX url, you are trying to use Django template syntax inside JS with {% url "ajax_load_subtags" %}. This means you will be doing a request to an empty url and therefore receive a 404.

I would recommend adding the url to a data attribute like below:

HTML
<div id="someElement" data-subtags-url="{% url 'ajax_load_subtags' %}">

JS
$.ajax({
    url: $('#someElement').data('subtags-url'),
    ...,
});

score 0 · Answer 2 · answered Nov 16 '20 at 15:29

For those working with django and have the same issue. I just used directly the url rather than the name of url and it works:

$("#id_subtag-tags").change(function () {
  var tagId = $(this).val();  // get the selected tag ID from the HTML input
  console.log(tagId);

  $("#displaytags").html('');

  $.ajax({                       // initialize an AJAX request
    url: "/myapp/post/ajax/ajax_load_subtags",                     // set the url of the request (= localhost:8000/app/ajax/load_subtags/)
    data: {
      'tags': tagId       // add the tag id to the GET parameters
    },
    success: function (data) {   // `data` is the return of the `load_subtags` view function
      $("#id_subtag-subtags").html(data);  // replace the contents of the subtags input with the data that came from the server
    }
  });
});

This will work, but its best to avoid hard coding the URLs. – Dean Elliott Nov 16 '20 at 15:33 — Dean Elliott, Nov 16 '20 at 15:33

score 0 · Answer 3 · answered Nov 16 '20 at 15:39

The best way is putting a static folder on the main directory. Then on your .html file on the top you could just add {% load static %}. Then go to your settings.py and on the bottom paste this

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

Now on your .html file since the <script> work properly at the bottom then just do this

{% static 'filename.js' %}

This should work

Why after moving a .js script from html to .js file, it does not load the values?

3 Answers3