Django and javascript issue

Question

I want to inject a variable into url like in the code. But It gives an error.

   function initializeDataTable(id){
        var columnSize = $('table th').size();
    $('#table').dataTable({
        "sDom" : 'rtFip>',
        'fnDrawCallback' : function() {
            $('input:checkbox, input:radio').checkbox();
        },
        "bStateSave": true,
        'sPaginationType' : 'full_numbers',
        "bServerSide" : true,
        "sAjaxSource" : "{% url 'get_menu_list' '" + id + "' %}"
   });
  };

I want to get the selected option and in the option change event, I will call the function above. How can I do that?

what error specifically?

Austin
– Austin

2012-07-09 20:09:56 +00:00
Commented Jul 9, 2012 at 20:09 — Austin
– Austin, Commented Jul 9, 2012 at 20:09

Claudiu · Accepted Answer · 2012-07-09 20:12:20Z

2

You can't do this:

"sAjaxSource" : "{% url 'get_menu_list' '" + id + "' %}"

{% %} are server-side directives. The server processes them and then puts them in the response page. The javascript function runs client-side. It can't talk to the server and ask it for data in the way you have expected it to do here. You will have to do something that doesn't depend on the server, such as:

"sAjaxSource": "/get_menu_list/" + id

answered Jul 9, 2012 at 20:12

Claudiu

231k174 gold badges507 silver badges701 bronze badges

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

Comments

icn · Accepted Answer · 2012-07-09 20:13:10Z

0

I think you mixed up server side thing with client side. This piece

 "{% url 'get_menu_list' '" + id + "' %}"

should be interpreted in server side. By then server side doesn't know what is 'id' yet.

answered Jul 9, 2012 at 20:13

icn

18k40 gold badges110 silver badges143 bronze badges

3 Comments

Burak Over a year ago

No it doesn't work.Mr Claudiu's solution works. I think we cannot use url reverse functions like that.

icn Over a year ago

@Burak I was not saying it was working. I was explaining why the piece of code was wrong

Burak Over a year ago

Ah ok, I got what you mean. Thanks.

noirbizarre · Accepted Answer · 2012-11-02 19:11:12Z

Then you could pass url as a variable to your function:

<script>
function initializeDataTable(data_url) {
    var columnSize = $('table th').size();

    $('#table').dataTable({
        "sDom" : 'rtFip>',
        'fnDrawCallback' : function() {
            $('input:checkbox, input:radio').checkbox();
        },
        "bStateSave": true,
        'sPaginationType' : 'full_numbers',
        "bServerSide" : true,
        "sAjaxSource" : data_url
   });
}

$(function(){
    initializeDataTable("{% url 'get_menu_list' item.id %}");
});
</script>

You could use tokens in your url:

<script>
var url_pattern = "{% url 'get_menu_list' '{id}' %}";
function initializeDataTable(id) {
    var columnSize = $('table th').size();

    $('#table').dataTable({
        "sDom" : 'rtFip>',
        'fnDrawCallback' : function() {
            $('input:checkbox, input:radio').checkbox();
        },
        "bStateSave": true,
        'sPaginationType' : 'full_numbers',
        "bServerSide" : true,
        "sAjaxSource" : url_pattern.replace('{id}', id)
   });
}

$(function(){
    initializeDataTable(42);
});
</script>

Notice that your token should match the regex type to resolve successfully (you can't use {id} as token if it's defined with \d+, instead use 0000).

I was a little bit unsatisfied with this solution and I ended by writing my own application to handle javascript with django: django.js.

With this application, you can do:

{% load js %}
{% django_js %}
<script>
function initializeDataTable(id) {
    var columnSize = $('table th').size();

    $('#table').dataTable({
        "sDom" : 'rtFip>',
        'fnDrawCallback' : function() {
            $('input:checkbox, input:radio').checkbox();
        },
        "bStateSave": true,
        'sPaginationType' : 'full_numbers',
        "bServerSide" : true,
        "sAjaxSource" : Django.url('get_menu_list', id)
   });
}

$(function(){
    initializeDataTable(42);
});
</script>

To ensure that urls are loaded by Django.js, listen to the ready event:

// Wait for document ready
$(function(){
    initializeDataTable(42);
});

// Wait for Django ready
Django.onReady(function(){
    initializeDataTable(42);
});

Collectives™ on Stack Overflow

Django and javascript issue

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related