How to configure a django url correctly in javascript

Question

I have seen lots of questions and answers on this topic (eg 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

Answer 1

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.

Answer 2

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