using django template logic in loaded JS files (integrate django JS)

Question

I have a JS snippet that works and used in several files:

<script>
{% if not articles %}
    var url = {% url 'index:new-article' %};

    $('body').on('click',function(e){
        window.location = url
    });
    ;
{% endif %}

</script>

But if I put that code in a separate file 'main.js' and load it into the template, it will no longer work. It is now in 'main.js' as such:

var url = {% url 'index:new-article' %};

$('body').on('click',function(e){
    window.location = url
});
;

but when loaded like:

{% if not articles %}
    <script src="media/js/main.js"></script>
{% endif %}

in 'mytemplate.html', the code is now broken. Others advise simply including JS files you want to use into your django templates (best practice including javascript in django template). How can I use some template logic like my "if not this, include js file" and make it work? Thank you

@cody4321 what exactly do you mean by "the code is now broken"? Does it return an error? — SilentDev
– SilentDev, Commented Aug 12, 2015 at 5:48
clicking on the body element no longer opened a window. I went into the Chrome JS console and didn't see any errors. What are the tools you use to see errors? I never know why the JS is breaking — codyc4321
– codyc4321, Commented Aug 12, 2015 at 12:54

frank · Accepted Answer · 2015-08-12 06:52:37Z

1

{% url 'index:new-article' %} will return the raw string, you have to quote its output for it to be valid Javascript.

<script>
{% if not articles %}
    var url = '{% url 'index:new-article' %}';

    $('body').on('click',function(e){
        window.location = url
    });
    ;
{% endif %}

</script>

answered Aug 12, 2015 at 6:52

frank

1,3421 gold badge10 silver badges29 bronze badges

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

1 Comment

codyc4321 Over a year ago

thanks Frank I'll check if that was the only issue soon

Collectives™ on Stack Overflow

using django template logic in loaded JS files (integrate django JS)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related