how to get an array element with javascript variable in django template?

Question

i`m creating a slider so i want to get an element of template array in Django. my HTML file is:

<div id="sideBar_mostVisited_control">
    <a href="">
        <p>
            {{ mostVisited_names.0 }}
        </p>
    </a>
    <div>
        <p>
            1
        </p>
    </div>
    <button type="button" id="mostVisited_arrowRight">
        <img src="{% static 'icons/base/arrowRight.png' %}" id="mostVisited_arrowRight">
    </button>
    <button type="button" id="mostVisited_arrowLeft">
        <img src="{% static 'icons/base/arrowLeft.png' %}" id="mostVisited_arrowLeft">
    </button>
</div>
<div id="sideBar_mostVisited_images">
    <div>
        {% for image in mostVisited_images %}
            <img src="{{ image }}">
        {% endfor %}
    </div>
</div>

i want to change name when its image changed. my jQuery file is:

var index=$('#sideBar_mostVisited_control div p').html();
$('#sideBar_mostVisited_control div p').html(index+1);
$('#sideBar_mostVisited_control a p').html("{{ mostVisited_names.index }}");

but index is not recognized in {{ mostVisited_names.index }}. what can i do?

Possible duplicate of How can I pass my context variables to a javascript file in Django? — rnevius
– rnevius, Commented Mar 23, 2016 at 13:23
i can get a single variable in inline js but i can not get an element of passed array. — hamid
– hamid, Commented Mar 23, 2016 at 19:11

1ronmat · Accepted Answer · 2016-03-24 12:01:12Z

0

The problem :

Since the JS file is static, you can't put Django variables into it.

A solution :

A way to resolve this situation is to "store" Django variables needed for your js in your html. Afterward you can grab it and use it in your js script !

Some code :

<script type="text/javascript">
  // "store" variables from Django in the body
  $('body').data('name_index', {{mostVisited_names.index}});
</script>

Then in your JS, get the value from the datamap:

var index=$('#sideBar_mostVisited_control div p').html();
$('#sideBar_mostVisited_control div p').html(index+1);
$('#sideBar_mostVisited_control a p').html($('body').data('name_index'));

answered Mar 24, 2016 at 12:01

1ronmat

1,1879 silver badges16 bronze badges

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

1 Comment

hamid Over a year ago

in this case index is not a js variable, i want to use js variables in {{ , }} but i cant. i have tried filters in django but in this case i must pass variables in {{ , }} too, so i cant use js variables in it.

Collectives™ on Stack Overflow

how to get an array element with javascript variable in django template?

1 Answer 1

The problem :

A solution :

Some code :

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The problem :

A solution :

Some code :

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related