CODEWITHSUNDEEP
javascripthtmljquerydjango
ElisaFo
ElisaFo

Reputation: 140

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

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!!

Upvotes: 0

Views: 119

Answers (3)

bit817
bit817

Reputation: 60

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

Upvotes: 0

Dean Elliott
Dean Elliott

Reputation: 1323

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'),
    ...,
});

Upvotes: 2

ElisaFo
ElisaFo

Reputation: 140

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
    }
  });
});

Upvotes: 0

Related Questions