Use javascript variable with django template

Question

I have a brain model with different resolutions and I want to let the user to change the resolution of the the model by just choosing his desired resolution from a select tag.

I mean I have the complete models loaded and without sending a POST to the server I want to change the view of the brain model.

The problem is that I can't pass the read value from the select to my django tag to choose the suitable moedl to render.

This is my code:

<body>
    <select id="resolution_options" onchange="change_brain_resolution()" name="resolution_options">

        {% for brain in brains %}
           <option value="{{ brain.resolution }}">
               {{ brain.resolution_title }}
           </option>
        {% endfor %}
    </select>


<script>

function change_brain_resolution() {       

        var selcted_resolution = getElementById('resolution_options').value;

        {% for brain in brains %}

            // Here is my problem !!
            {% if brain.resolution == selcted_resolution %}

              // Do drawing

           {% endfor %}       
    }

</script>

</body>

The reson of why I don't want to do a POST is because there are many other things the user have been drawing and doing and he may want to change the resolution of the brain model in order to have a better view or performance but he wants to keep the other objects in the scene

Thank you very much.

What you want is AJAX, check this post: http://stackoverflow.com/questions/20306981/how-do-i-integrate-ajax-with-django-applications — Robert Foxa, Sep 06 '16 at 13:51

score 0 · Answer 1 · answered Sep 06 '16 at 14:27

Try this:

function change_brain_resolution() {       

    var selcted_resolution = getElementById('resolution_options').value;

    {% for brain in brains %}

        if (selcted_resolution == {{ brain.resolution }}) {
          // Do drawing
        }

    {% endfor %}       
}

This ends up putting logic for every brain resolution on your client side. If you want to be more efficient, you have to pass the selected resolution to server with AJAX, and render the response.

Remember that templates are rendered before the page, hence they don't have access to value of javascript variables. If you want to pass javascript variables to server, you should do so after page load with an AJAX request.

Use javascript variable with django template

1 Answers1