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

Answer 1

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.