use javascript variable in django template

Question

I have a custom template tag that retrieves a list of countries over a web call to SOAP service and populates html select tag. Now I have another template tag that displays a list of choices for the given country and,obviously enough, it takes country name as an argument. So I can pass the country name to the second custom tag only after onchange event is triggered on html select tag and I have country name as a javascript variable chosen by user. How would I pass this value to the custom template tag? Here are my custom tags

from mezzanine import template
from suds.client import Client
register = template.Library()

@register.as_tag
def get_countries(*args):
    url = 'http://www.sendfromchina.com/shipfee/web_service?wsdl'
    client = Client(url)
    countries = client.service.getCountries()
    countries = map(lambda x: x._enName, countries)
    return countries

@register.as_tag
def get_available_carriers(weight,country,length,width,height):
    url = 'http://www.sendfromchina.com/shipfee/web_service?wsdl'
    client = Client(url)
    rates = client.service.getRates(weight,country,length,width,height)
    rates=map(lambda x: (x._shiptypecode, x._totalfee), rates)
    return rates

Here is my html select tag

<select id='countrylist' onchange="getOption(this)">
    {% get_countries as countries %}
    {% for country in countries %}
        <option>{{ country }}</option>
    {% endfor %}
<select>

And finally, here is my javascript

<script type="text/javascript">
function getOption(sel){
    var country = sel.value;
    {% get_available_carriers 1 country 10 10 10 as carriers %}
    console.log('{{ carriers }}')
}
</script>

I can't seem to pass country js variable to get_available_carriers tag

Any help is highly appreciated! Thanks

Does this answer your question? How to pass javascript variable to django custom filter — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Nov 8, 2022 at 4:33

Community · Accepted Answer · 2017-05-23 12:24:48Z

Django templates are build on the server side, at the generation of the page while JavaScript is executed on the client side, when it is needed. Thus, Django and Javascript can't share objects/data.

In your page, with the current Javascript, you will have something like:

<script type="text/javascript">
function getOption(sel){
    var country = sel.value;
                                // Empty line due to the templatetag
    console.log('')
}
</script>

What you need is either generate the list in your view and return a carrier object already constructed. With some luck, you might be able to use it in Javascript.

The best way here is still to make an AJAX request to get this list:

def get_available_carriers(request, weight, country, length, width, height):
    url = 'http://www.sendfromchina.com/shipfee/web_service?wsdl'
    client = Client(url)
    rates = client.service.getRates(weight,country,length,width,height)
    rates=map(lambda x: (x._shiptypecode, x._totalfee), rates)

    return json.dumps(rates)

and the get it with jQuery (if you are using it):

    $.get('{% url "get_available_carriers" 1 country 10 10 10 %}', function(data){
        console.log(data);
    });

Don't forget to define the URL pattern, with the get_available_carriers in my example.

Community · Accepted Answer · 2017-05-23 11:53:38Z

4

You didn't pass the value from javascript function to django template tag. But in this case you can use ajax calls.

http://www.tangowithdjango.com/book/chapters/ajax.html

https://bradmontgomery.net/blog/2008/11/24/a-simple-django-example-with-ajax/

Update:

See this you can understand what's going on.

How to pass javascript variable to django custom filter

Hope this is helpful idea.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered May 27, 2014 at 3:04

dhana

6,5255 gold badges43 silver badges66 bronze badges

4 Comments

david Kartashyan Over a year ago

Thanks a lot @dhana for your answer, I am reading your linked resources now. Will get back if I have more questions. Meanwhile, thanks again for your invaluable help, sorry I am unable to upvote your answer

Maxime Lorant Over a year ago

This is almost a link-only answer... Be careful next time and try to expand your post with relevant and useful resources.

dhana Over a year ago

Hi @MaximeLorant his asking any idea.I gave my idea and reference reference links for learning. Is any issue with stackoverflow ?.

Maxime Lorant Over a year ago

If the two first links disappears some day, your answer won't be useful anymore. The policy is to quote relevant part of the page in the answer itself or, better, adapt the example of the page for the current case. You did answer the question "Why it fails?" but the question "How?" has been answered only via links. See stackoverflow.com/help/how-to-answer

Collectives™ on Stack Overflow

use javascript variable in django template

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related