Generating a django HTML URL from a javascript function

Question

I am using Django 1.10.6 and trying to generate a url from a javascript function in datatables

under url.py I have an page called profile setup like:

app_name = 'myapp'

urlpatterns = [
    url(r'^profile/(?P<pk>[0-9]+)/$', views.ProfileView.as_view(), name='profile'),
]

In javascript I have a django query send data to a variable and the data is displayed on a table with name and id fields:

var django_dat =[
    {
        "id": 1,
        "name":       "Jack Spicer",
    },
    {
        "id":2,
        "name":       "Ted Cracker",
    }
    {
        "id":3,
        "name":       "Justin Rollin",
    }
    {
        "id":4,
        "name":       "Boaty Boat",
    }
];

$(document).ready(function() {
    var table = $('#dattable').DataTable({
        data: django_dat,
        columns: [{
          'data': null,
          'render': function(data, type, row, meta)  {
            //Django URL
            return '<a href={% url 'myapp:profile' 2 %}>' + data.name + '</a>';}},
             {
          data: 'id'
        }]
    });
});

I am trying to change the URL so it link the name to a url like {% url 'myapp:profile' data.id %}. The above code is hardcoded to id=2 and works.

Tried changing it to:

return '<a href={% url 'myapp:profile' '+ data.id+ ' %}>' + data.name + '</a>' 

But that gave an No Reverse match error Reverse for 'profile' with arguments '('+ data.id+ ',)' and keyword arguments '{}' not found. 1 pattern(s) tried: ['profile/(?P<pk>[0-9]+)/$']

Also tried using the replace function:

return '<a href={% url 'myapp:profile' uid %}>'.replace('uid', data.id) +  data.name + '</a>'

but got the same error

Answer 1

This is not a technical problem but a problem with understanding how urls work in Django and JavaScript. Remember, the template html file is parsed and rendered by Django first. Django doesn't care about JavaScript syntax - it just views it as more text. Once the page is rendered, it's sent to the browser where it's interpreted and the JavaScript run. And when that process is underway, Django is totally out of the picture. The browser never gets to see Django template tags. So there are two distinct phases to the process - Django template rendering, followed by JavaScript running in the browser.

When you use the Django {% url %} tag, you are asking Django to parse and render a URL which it will look up using its inbuilt URL resolvers. Your profile url requires an id variable, and the error message you are getting is telling you that Django is trying and failing to resolve the url with the variable you have given it - which looks to be a JavaScript string concatenation. Again, Django doesn't understand JS, so you're effectively giving it a bunch of junk characters.

So, the only way to get your {% url %} tag to work is to give it a real user id, which is what Django needs to look up a relevant URL. But in your case, Django won't know what that user id is until you select the user in JavaScript.

Some possible ways to get a valid url in JavaScript are:

1. To build it dynamically (using string concatenation of a hard-coded url pattern). You lose maintainability with this method but it will be the fastest to implement. If you change your url structure in future you'll have to remember to come back and change it here.
2. To initially deliver from Django a list of valid urls and then select from that list when you select a user. This will be a good solution if your list of users is small and will avoid the problem of hard coding the url.
3. To have a get_profile_url_for_user (or whatever) API endpoint, where upon selecting a user in JS, an ajax request is sent with that user id to a generic url which will do the url resolution in Django and return the specific url for that user's profile. This would be my preferred method if you have potentially hundreds of users on the page.

Edit - Coming back to this after 3 years - I guess I have learned something in the meantime! There is a fourth option which seems a lot better: 4. Assuming your list of user data originates from your Django application in the first place - you could include in that object the profile url for each user by reversing the url wherever in your Django app the users are being serialised to JSON.

{
    "id":4,
    "name": "Boaty Boat",
    "profile_url": "http://django-host/profile/4"
}