Django dynamic URL dispatcher within javascript

Question

Im trying to have a dynamic url dispatcher such as:

"{% url 'url_name' 'variable' %}" where variable is set dynamically within my javascript.

What I want to do is basically redirect to a different page when a <select> value is changed.

$(document).ready(function() {
  $('#select').change(function() {
      var id = $('#select').val();
      window.location.replace("{% url 'url_name' 'id' %}");
  });
});

I can't do it with a simple string concat as such: "{% url 'url_name' '" + id + "' %}" as it returns this error Reverse for 'url_name' with arguments '('" + id + "',)' not found.

The select itself is being filled with backend data:

<select id="select">
  {% for item in list %}
  <option value="{{item.id}}">{{item.name}}</option>
  {% endfor %}
</select>

I cant figure out what the syntax for this is.

charlietfl · Accepted Answer · 2021-04-14 13:44:16Z

4

The problem is js runs in browser and django on server so you can't resolve that expression using the two languages that run in different environments and at different times

You could use a data- attribute on each <option> to print the url to

<select id="select">
  {% for item in list %}
  <option data-url="{% url 'url_name' item.id %}" value="{{item.id}}">{{item.name}}</option>
  {% endfor %}
</select>

JS

$('#select').change(function() {
  var url = $(this).find('option:selected').data('url');
  window.location.replace(url);
});

edited Apr 14, 2021 at 13:44

answered Apr 14, 2021 at 13:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Django dynamic URL dispatcher within javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related