Reference other static file in django javascript file

Question

I need to load a file into a function to use with a telephone autoformatter library (Intl tel input) When I tried this in a standalone html page, it worked fine, but when I'm trying to do it in a django project, the file just isn't loading and I think it's because it's not finding where it is in the path.

main.js and utils.js are both in the static directory of my project so I'm not sure why it can't find the utils.js file.

main.js:

$(document).ready(function() {
    $("#phoneNumber").intlTelInput({
        utilsScript: "utils.js"
    });
});

Also you can try this option. Except {% static 'your_js_here.js' %} — Deja Vu
– Deja Vu, Commented Jun 3, 2015 at 2:00
@DejaVu In the first example, how does it know what upload_path and uploadify_path are? — rasen58
– rasen58, Commented Jun 3, 2015 at 2:33
you render your variables in the view, for example context = {'upload_path': upload_path, 'uploadify_path': uploadify_path} and return render(request, 'template_name.html', context). If you made html out of your js file, you can extend an html you wanted to inject your js into - see {% extends %} — Deja Vu
– Deja Vu, Commented Jun 3, 2015 at 16:27
Unfortunately I don't have an opportunity to test this at the moment and not sure if its a proper fix, but it should work. If it doesn't consider addressing to django channel on IRC. — Deja Vu
– Deja Vu, Commented Jun 3, 2015 at 16:33

Brandon Taylor · Accepted Answer · 2015-06-03 02:33:51Z

1

What I do in cases where I need to reference server-side paths in JavaScript is set up an "app" object in my uppermost template, which I can reference in JavaScript files that are loaded after, typically with require.js.

Example:

# base.html (upper-most template)
<!DOCTYPE html>{% load static from staticfiles %}
    <html>
        <head>. . .</head>
        <body>
            . . .
            <script>
                var myApp = {
                    staticUrl: '{{ STATIC_URL }}'
                }
            </script>
            <script src="{% static 'js/some-file.js' %}"></script>
        </body>
    </html>

# some-file.js

'use strict';

$(document).ready(function(){
    console.log(myApp.staticUrl);
});

answered Jun 3, 2015 at 2:33

Brandon Taylor

34.7k16 gold badges109 silver badges155 bronze badges

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

Comments

metahamza · Accepted Answer · 2015-06-03 03:09:35Z

0

Look at your URL dispatcher (urls.py) to see what the actual path where static files may be requested is.

For example in one of my projects, JavaScript files live at /static/js/.

So for instance if that were true of your configuration as well, you would do -

$(document).ready(function() {
    $("#phoneNumber").intlTelInput({
        utilsScript: "/static/js/utils.js"
    });
});

That's if you want to hard-code the URL. You can do that in templates, or in .js files which are not processed by the template engine.

However if you are in a template, I'd recommend using the staticfiles app, specifically the static template tag which acts as a helper to build paths to your files.

edited Jun 3, 2015 at 3:09

answered Jun 3, 2015 at 3:02

metahamza

1,4751 gold badge10 silver badges28 bronze badges

Collectives™ on Stack Overflow

Reference other static file in django javascript file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related