Data update without page reload jinja2

Question

The data has to be refreshed without page reload. Originally data is appeared on html with jinja2.

@app.route('/personal_account', methods=['POST'])
def welcome():
    login =  request.form['login']
    data = get_default_user_data(login)
    # ... processing
    return render_sidebar_template("personal_account.html", data=data)

According to these data graph is building with chartist.js.

personal_account.html

<div id="data">
    <ul id="consumed_values">
        {% set count = 0 %}
        {% for i in data.consumed_values %}
            <li>{{  data.consumed_values[count] }}</li>
        {% set count = count + 1 %}
        {% endfor %}
    </ul>

</div>
<canvas width="800" height="600" id="canvas"></canvas>
<button id="button">Update</button>

I need to update data. I am using ajax. The function "request" make a post request to the server to the function get_selected_values in Python. This function gives new data. But new data doesn't display in jinja2 on page. The data is still old.

personal_account.js

window.onload = draw(); 
function draw() {
    var consumed_values = document.querySelectorAll('ul#consumed_values li');
    var values = new Array();
    for (var i = 0; i < consumed_values.length; i++) {
        console.log(consumed_values[i].innerHTML);  
        values[i] = consumed_values[i].innerHTML;
    }


    var numbers = new Array();
    for(var i=0; i<consumed_values.length; i++)
    {
        numbers[i]=i+1;  
        console.log(numbers[i]);
    }

    var ctx = document.getElementById('canvas').getContext('2d');
            var grapf = {
                labels : numbers,
                datasets : [
                    {
                        strokeColor : "#6181B4",
                        data : values
                    }
                ]
            }
        new Chart(ctx).Line(grapf);

}

document.getElementById('button').onclick=function () {
        request();
}

function reques() { 
    var first = selected[0];
    var second = selected[1];
    first.month = first.month+1;
    second.month = second.month+1;
    $.ajax({
        type: 'POST',
        url: '/get_selected_values',
        success: function(response) {
            alert('Ok');
            draw();
        },
        error: function() {
            alert('Error');
        }
    });
}

Function get_selected_values()

@app.route('/get_selected_values', methods=['POST'])
def get_selected_values():
    # ... 
    data = fetch_selected_date(start_date=start_date, end_date=end_date, login=current_user.get_id())
    if data:
        # return jsonify({'result': True, 'data': data}) # does not work this way
    # return  jsonify({'result': False, 'data': []})
    return render_sidebar_template("personal_account.html", data=data, result=1)

How to succeed in data's update and graph's rebuild?

EDIT 1

I am using the first version of get_selected_values function.

The request function look like this:

...
 success: function(response) {
            alert('Успешно получен ответ:!'+ response.data);
            document.getElementById('consumed_values').innerHTML = response.data;
            draw();
        },
...

Data is updating successfully, but graph looks the same. How to fix?

Answer 1

OK here's my outlook on this. You're on the right track and there is a way to update the element without the need to re-draw the page in this instance. What's happening is that you are returning data from your get_selected_values() method but not doing anything with it once it's returned to your AJAX request.

So firstly, I'm going to draw your attention to your AJAX request:

$.ajax({
  type: 'POST',
  url: '/get_selected_values',
  success: function(response) {
    alert('Ok');
    draw();
  },
  error: function() {
    alert('Error');
  }
});

When you're getting a successful response from this, you're seeing your "OK" alert in the UI, right? However nothing updates in the UI despite you calling on the draw() method?

You won't want to return a render_template from your Flask function in this case. You were already on the right track with returning JSON from your function:

if data:
  # return jsonify({'result': True, 'data': data}) # does not work this way

When you return your JSON data, it will be stored in the response variable in your success function. If you're unsure of exactly what's going into that response variable then output its contents with something like alert(JSON.stringify(response)) in the success function of your AJAX request. From here you will see your data returned to your method.

Now you need to decide how you want to use that data to update your <div id="data"> element in your UI. You can do this just using JavaScript with a series of document.getElementById('element_id').innerHTML statements or such-like so that your element is populated with all of the updated data from your response.

This will auto-update the data you wish to have displayed without the need to refresh the page.

Now that you've done that, invoke your draw() function again and it should now use the updated data.

I hope this helps set you down the right path with this one!

AFTER EDIT 1

When you're originally populating <div id="data"> you are using a loop to populate a series of <li> tags in the element with your data.

When you are updating this element with your new data, you are just using .innerHTML to re-populate the parent <ul> element.

Your draw() method is looking to the data stored in the <li> elements.

Are you absolutely certain that, after you perform your update, your <div id="data"> element is in exactly the same (ie. expected) format to work with your draw() method? In that it's still in the structure:

<div id="data">
  <ul id="consumed_values">
    <li>Your updated data here...</li>
    <li>More updated data...</li>
  </ul>
</div>

This is the element structure that your draw() method is expecting to find. It's pulling its data in from each individual <li> element in the list. So these are the elements which need to store your updated values.