Using Django rendered lists in Javascript on the rendered html page

Question

I am working on a django app where I made a custom view that passes a queryset of elements to the rendered html page.

In the html page I want to have an option to select a word from a select list and If the selected word matches any element from the list I got from view, I should need to display it.

I tried using Java script to read these elements into array and then use that array on chnage in select box. but it didnt work as I required.

Here is what I have done so far.

View:

from .models import words as m
def test(request):
  words = m.objects.all()
context = Context({
    'words': words, 
})
return render(request, 'newpage.html',context)

newpage.html:

<select id="sel" onChange="func();">
<option  value="" selected="selected">--none--</option>
<option value="word1">word1</option>
....
<option value="wordn">wordn</option>

</select>
<script>
function func()
{
 var e = document.getElementById("sel");
 var str = e.options[e.selectedIndex].value;
 '{% for each in words %}'
 var a="{{ each.word }}";
 if(str===a)
    {
    console.log('{{each.word }}')//or passing it to a div in html
     }
{% endfor %}
 }
</script>

what I require is If the selected element is "word1" and if the queryset "words" has "word1" in it, it should display the word in the page in any div can any one help me understand the right way to use this queryset object in the html/js.

ettanany · Accepted Answer · 2016-10-26 22:04:37Z

1

Fix your script like the following, this should work for you:

<script>
function func() {
    var e = document.getElementById("sel");
    var str = e.options[e.selectedIndex].value;
    "{% for each in words %}"
        var a = "{{ each.word }}";
        if(str === a) {
            console.log("{{ each.word }}")
        }
    "{% endfor %}"
}
</script>

answered Oct 26, 2016 at 22:04

ettanany

20k9 gold badges49 silver badges64 bronze badges

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

1 Comment

user168983 Over a year ago

my bad on syntax..yup this fixed

Brett Jeffreson · Accepted Answer · 2016-10-27 05:48:35Z

0

Try something like this:

<script>
    var words = [
    {% for word in words %}
        "{{ word }}",
    {% endfor %}
    ];

    function func() {
        var e = document.getElementById("sel");
        var str = e.options[e.selectedIndex].value;
        for (var word = 0; word < words.length; word++) {
            if (words[word] === str) {
                console.log(words[word]);
            }
        }
    }
</script>

answered Oct 27, 2016 at 5:48

Brett Jeffreson

5636 silver badges19 bronze badges

Collectives™ on Stack Overflow

Using Django rendered lists in Javascript on the rendered html page

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related