calling python method has no affect on client side with jinja2

Question

I have a template page which gets displayed when the user visits the url (http://mysite/new_device)

    config.add_route('new_device', '/new_device')

views.py method:

@view_config(route_name="new_device", renderer='templates/main.html')
def new_device(request):
    do stuff......
    return dict(title=title, partial=partial, deviceTypes=deviceTypes, sections=sections)

When I go to that link, the page is displayed correctly with jinja2 printing all arrays and dictionaries that are passed in the return statement of my python method.

On my page I have a select tag which has a bunch of option which the user can select(Transformer, switchboard etc), and it will load the fields according to the selected option(ajax call to get data). What I am trying to do is use jquery and ajax to load the appropriate fields by checking for change on the select that I have, obtaining the id, then doing an ajax call to the python method new_device.

$("#deviceTypes").change(function () {
    var deviceTypeID = $(this).val();

    var data = {
        "deviceTypeID": deviceTypeID
    }

    $.ajax({
        url: "http://127.0.0.1:6543/new_device",
        type: "POST",
        data: JSON.stringify(data),
        contentType: 'application/json; charset=utf-8',
        success: function (response, textStatus, jqXHR) {
        },
        error: function (jqXHR, textStatus, errorThrown) {
            //change this back to error throwing after wards
            alert("error");
        }
    });
});

The problem I have is the data is being returned from the method, but the client isn't being updated with the new information.

This is a snippet of my html page

    <select id="deviceTypes" class="inputBoxes">
        {% for key, value in deviceTypes.iteritems() %}
        <option value="{{key}}">{{value}}</option>
        {% endfor %}
    </select>

    <br />
    {% for sec in sections %}
        <label class="inputBoxLabels">{{sec}}</label><br />
    {% endfor %}

In other words, jinja2 here isn't printing the newly returned information. Can it only access the data once on the initial load or how does this work?

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

I am not python or jinja2 developer, but from your explanation looks like you want to populate deviceTypes dropdown with data from AJAX call. To do so you need to add logic for DOM manipulation in Success handler.

$.ajax({
        url: "http://127.0.0.1:6543/new_device",
        type: "POST",
        data: JSON.stringify(data),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {

               var options = $("#deviceTypes");
               $.each(data, function() {
                       options.append(new Option(this.key, this.value));
               });
        },

You can refer following link to create JSON data in python.

How to populate a dropdownlist with json data in jquery?

edited May 23 '17 at 10:26

Community

1
1

answered Jun 05 '14 at 19:41

punitdam

66
3

I believe I may have not defined what I am looking for correctly. When I initially load the page, I already have drop down list with options. What I want, is that when the user selects a new option, the page should refresh and load the new fields and values onto the page. But what is confusing me is how python works in the sense that I am calling the same method `new_device` and returning the new information, but on the client side where I have my jinja2 displaying this data, it doesn't display the newly returned data – john Jun 05 '14 at 19:48
1

Because jinja2 also runs on server side, hence when you call python using ajax jinja2 doesn't run and resulting data is not loaded. Please refer my link to understand loading data using Ajax. – punitdam Jun 05 '14 at 20:22

john · Accepted Answer · 2014-06-10T12:23:09.730

0

After thinking it through for a bit I have come up with a solution. in my url I simply added a deviceTypeID paramter

config.add_route('new_device', '/new_device/{deviceTypeID}')

Then whenever the user selects an option from the list, I simply redirect the page to that id which then loads he newly returned data from my python method

    $("#deviceTypes").change(function () {
    var deviceTypeID = $(this).val();

    var data = {
        "deviceTypeID": deviceTypeID
    }

    window.location = "http://127.0.0.1:6543/new_device/" + deviceTypeID + "/0"
});

edited Jun 10 '14 at 12:23

answered Jun 05 '14 at 20:02

john

3,949
7
34
56

2

You don't really need to do an ajax call in this case... A simple old form submit would suffice. – Sergey Jun 05 '14 at 21:29

calling python method has no affect on client side with jinja2

2 Answers2