How to configure a django url correctly in javascript

Question

I have seen lots of questions and answers on this topic (e.g.this one), but the solution seems to evade me. In my template I have a series of radio buttons and wish to pass the selected item back to the view

common/urls.py

path('use-selected/<str:app_base>/<str:board_number>/', views.UseSelectedItem.as_view(), name='use-selected'),

If I enter the the following code in my template, it works correctly

<a id="use-selected" href="{% url 'use-selected' app_base='solo' board_number='4' %}"><button type="submit">Use selected</button></a>

if, on the other hand, I assign the href in javascript

html

<a id="use-selected" href=""><button type="submit">Use selected</button></a>

javascript

$(document).ready(function () {
    selectedBoard = document.getElementsByName('selected_board_id');
    use_selected_href = document.getElementById('use-selected-href');
    selectedBoard.forEach((radioButton) => {
        radioButton.addEventListener('click', () => {
            processBoardSelection(radioButton.value)
        });
    })
});

function processBoardSelection(board_number) {
    var use_selected_text = "{% url 'use-selected' app_base='app_base_value' board_number='board_number_value' %}"

    temp_text = use_selected_text.replace('board_number_value', board_number.toString());
    use_selected_href.href = href_text;
    // use_selected_href.href="{% url 'use-selected' app_base='solo' board_number='4' %}"
}

the link fails. The request url is

http://127.0.0.1:8000/common/history/solo/%7B%25%20url%20'use-selected'%20app_base%3D'solo'%20board_number%3D'4'%20%25%7D

I do not understand where the common/history/solo elements arise. common and solo are apps within my project; common/history was the url to get to this page

[EDIT 20210808 08:51 UCT] I have built a simple test app based on this problem and it works correctly. It uses the javascript and the a tag in the template as presented here (the java script being in s separate file). The url is interpreted correctly and the parameters are passed to the view.

I repeat :

I do not understand where the common/history/solo elements arise.

in the url that fails

Is this inside a separate Javascript file? The Django template language only applies to HTML template files that you've told Django to render. It looks like you've got that literal template-language string as your URL, so the browser is URL-encoding it and using it as a relative URL (as it will with any random strings it is told to use as a URL). — Robin Zigmond, Aug 07 '21 at 14:57
Going off of what @RobinZigmond said, the best you can do in Javascript is the use template literals (backtick key) to format your URL with variables. See this article for more info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals — A random coder, Aug 07 '21 at 15:18
It is a separate js file .So how can I pass variables as parameters in the url? I have enhanced my question — Psionman, Aug 07 '21 at 15:20

score 1 · Answer 1 · answered Aug 07 '21 at 15:39

In your template you can try something like this:

<input type="hidden" id="use-selected" value="{% url 'use-selected' app_base='solo' board_number='4' %}">

In js code refactor your functions like this:

$(document).ready(function () {
    // ...
    selectedBoard.forEach((radioButton) => {
        radioButton.addEventListener('click', () => {
            href = $("#use-selected").prop("value")
            processBoardSelection(radioButton.value, href)
        });
    })
});


function processBoardSelection(board_number, href) {
    // ...
}

There is many methods to get the url.

Sorry. I'm missing something. I don't understand. This seems to do nothing. What does the hidden element do? — Psionman, Aug 07 '21 at 15:57

Psionman · Accepted Answer · 2021-08-23T17:14:15.180

The problem is, as @Robin Zigmond suggested in a comment, that the url creation code works if it is in the template, but not in a separate file. I do not know why because I have used the method of separate files in other applications.

So the template now includes:

<a id="use-selected" href=""><button type="submit">Use selected</button></a>
...
<script>
    function processBoardSelection(board_number) {
        var use_selected_text = "{% url 'use-selected' app_base='app_base_value' board_number='board_number_value' %}"
        var use_selected_href = document.getElementById('use-selected');

        temp_text = use_selected_text.replace('board_number_value', board_number.toString());
        href_text = temp_text.replace('app_base_value', app_base.toString());
        use_selected_href.href = href_text;
    }
</script>

The rest of the code remains in a separate js file

How to configure a django url correctly in javascript

2 Answers2

Linked