I'm trying to make a gallery page using django/js/jquery. Is it possible to pass django template variables to the javascript? I need to implement for loop like:

{% for post in object_list %}
    {% post.title %}
    {% post.url %}
{% endfor %}

In my base template I just add my script: (base.html)

<script src="{{STATIC_URL}}assets/js/script.js"></script>

(function($){
    var photos = [
        'media/photos/1.jpg',
        'media/photos/2.jpg', // I need to get them through a for loop
        'media/photos/3.jpg',
        'media/photos/4.jpg',
    ];
    $(document).ready(function(){
        var page = 0,
            loaded = 0,
            perpage = 5,
            main = $('#main'),
            expected = perpage,
            loadMore = $('#loadMore');
        main.on('image-loaded', function(){
            loaded++;
            NProgress.set(loaded/expected);

            if(page*perpage >= photos.length){
                loadMore.remove();
            }
        });
        loadMore.click(function(e){
            e.preventDefault();
            loaded = 0;
            expected = 0;
            var deferred = $.Deferred().resolve();
            $.each(photos.slice(page*perpage, page*perpage + perpage), function(){
                deferred = main.showImage(this, deferred);
                expected++;
            });
            NProgress.start();
            page++;
        });
        loadMore.click();
    });
    $.fn.showImage = function(src, deferred){
        var elem = $(this);
        console.log(elem);
        var result = $.Deferred();
        var holder = $('<div class="photo" />').appendTo(elem);
        var datetime = $('<p>test</p>').appendTo(elem); // and add {{ post.date }} here
        var img = $('<img>');
        img.load(function(){
            deferred.always(function(){
                elem.trigger('image-loaded');
                img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){

                    result.resolve()
                });
            });
        });

        img.attr('src', src);
        return result;
    }
})(jQuery);

I'm trying to make a gallery page using django/js/jquery. Is it possible to pass django template variables to the javascript? I need to implement for loop like:

{% for post in object_list %}
    {% post.title %}
    {% post.url %}
{% endfor %}

In my base template I just add my script: (base.html)

<script src="{{STATIC_URL}}assets/js/script.js"></script>

(function($){
    var photos = [
        'media/photos/1.jpg',
        'media/photos/2.jpg', // I need to get them through a for loop
        'media/photos/3.jpg',
        'media/photos/4.jpg',
    ];
    $(document).ready(function(){
        var page = 0,
            loaded = 0,
            perpage = 5,
            main = $('#main'),
            expected = perpage,
            loadMore = $('#loadMore');
        main.on('image-loaded', function(){
            loaded++;
            NProgress.set(loaded/expected);

            if(page*perpage >= photos.length){
                loadMore.remove();
            }
        });
        loadMore.click(function(e){
            e.preventDefault();
            loaded = 0;
            expected = 0;
            var deferred = $.Deferred().resolve();
            $.each(photos.slice(page*perpage, page*perpage + perpage), function(){
                deferred = main.showImage(this, deferred);
                expected++;
            });
            NProgress.start();
            page++;
        });
        loadMore.click();
    });
    $.fn.showImage = function(src, deferred){
        var elem = $(this);
        console.log(elem);
        var result = $.Deferred();
        var holder = $('<div class="photo" />').appendTo(elem);
        var datetime = $('<p>test</p>').appendTo(elem); // and add {{ post.date }} here
        var img = $('<img>');
        img.load(function(){
            deferred.always(function(){
                elem.trigger('image-loaded');
                img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){

                    result.resolve()
                });
            });
        });

        img.attr('src', src);
        return result;
    }
})(jQuery);

• javascript
• jquery
• django

• You cannot do that directly. However, create a javascript function, and call it from the html file with photos as the argument. – karthikr Commented Nov 26, 2013 at 18:42
• is the js file is external? – Aamir Rind Commented Nov 26, 2013 at 18:49
• This is a local js file. Can you give an example of code? – stk-13 Commented Nov 26, 2013 at 18:54
• Possible duplicate of Django Template Variables and Javascript – Ciro Santilli OurBigBook. Commented May 15, 2016 at 16:05

1 Answer 1

If you are including js file as:

<script type="text/javascript" src="{% static 'js/some_file.js' %}"></script>

Then you cannot access request context in some_file.js. What you can do is that either move the js code in the template or move it to child template (for reusability) to access request context and include it as:

{% include "some_template_including_js_code.html" %}

Then in the js code you can iterate over context variable containing images url:

<script type="text/javascript">
    var photos = [];
    {% for image in images %}
        photos.push('{{ image }}');
    {% endfor %}
</script>