Python Flask Jinja2 webpage does not full refresh on location.reload(true) HTML Javascript

Question

I've been a while looking for that answer but I don't find any like this.

This is my webpage, for my final college project. It's a Python Flask Jinja2 Html Javascript Web Application. It creates events and then you can see photos in real time Instagram in locations over the world. This is the index

But when I click the submit button I make a event.preventDefault() because I want to make my own actions and finally I want a window.location.reload(true) so I can see the new event added as you can see the first ones in the image up.

But the result of the window.location.reload(true) is this, just half of the page gets refreshed. here

This is the Javascript code:

$(document).ready(function () {
    $('#formEvent').submit(function (event) {
        event.preventDefault();
        createEvent();
    });
});
function createEvent() {
    var name = $("#inputEventName").val().replaceAll(" ", "%20");
    var lat = parseFloat($("#inputLat").val());
    var lng = parseFloat($("#inputLong").val());
    var rad = parseInt($("#inputRad").val());
    var desc = $("#inputEventDesc").val().replaceAll(" ", "%20");
    var init = $("#dp1").val().replaceAll("/", "-");
    var end = $("#dp2").val().replaceAll("/", "-");
    var url = "http://insideone.ngrok.com/createEvent/" + name + "/" + lat + "/" + lng + "/" + rad + "/" + init + "/" + end + "/" + desc;
    $.get(url,
        function (result) {
            if (result == "OK") cleanFormAndHide();
            else alert("Some error happened");
    });
    return true;
}
function cleanFormAndHide(){ //you can see that I tried differents ways
    window.location.reload(true);
    //$('#formEvent').unbind('submit').submit();
    //window.location.replace("");
}

And the template of the index page:

//we first have the map and more html pure code

<div id="map-canvas" style="height: 450px; width: 100%" class="col-lg-12"></div>

//...
//and then the html jinja2 flask code

<div class="row mt centered">
    {% for item in events %}
    {% if item.isActive %}
        <div class="col-lg-4" style="text-align: center">
            <a class="zoom" target="_blank" href="event/{{item.id}}">
                <img style="vertical-align: middle; display: inline-block" class="img-responsive" src="{{ item.latestpic }}"/>
            </a>
            <p>{{item.name}}</p>
        </div>
    {% endif %}
    {% endfor %}
</div>

And the Python at index:

@app.route('/', methods=['GET'])
def index():
    v_res = c.query('geoEvents', 'events', descending=True)
    content = []
    link = ""
    for res in v_res:
        pic = c.query(res[1][4], res[1][5], descending=True, limit=4)
        for p in pic:
            if isActiveUrl(p[1][0]):
                link = p[1][3]
                break
            else:
                deactivateUrl(p)
    if pic.rows_returned > 0:
        content.append({'name': res[1][0], 'description': res[1][4], 'isActive': res[1][2], 'isFinished': res[1][3],
                        'designDocument': res[1][4], 'viewName': res[1][5], 'latestpic': link, 'id': res[2]})
    return render_template('index.html', events=content)

So that's why I think a location.reload(true) should fetch all data again. I don't know why just the flask jinja2 part of the html is not getting reloaded.

Any idea or suggestion or another way of doing it?

Thanks a lot!

score 3 · Answer 1 · edited May 23 '17 at 11:50

Not enough points to comment, so It's a coinflip answer :p Have you tried :

window.location.href=window.location.href

(Saw here : Difference between window.location.href=window.location.href and window.location.reload()) ?

In addition, have you checked possible errors logged in flask console AND/OR devTools console (F12) ?

EDIT : I maybe found the solution to your problem : in facts, you don't need to use window.reload or .location, as you're making an ajax get request to the page on submit button click (If I got it well) that reloads an element.

Still, you don't see any updates as you don't indicate, in your success function, where to put data response in your html, disabling jinja2 to loop over it (as far as i got it when testing similar code) So try to change your jquery get request by :

$.get('/url_where_to_get_data').done( 
    function(data){ 
        $('.row mt centered').html(data);
)};

No need to call for page reload then, you could normally loop through data with jinja. In addition, I would advice you in order to gain speed and to avoid template repetition to create a dedicated view from where to get 'refreshed' data like :

@app.route('/refresh')
def refresh():
# Db query and data formatting
return json.dumps(data)

Let me know if it worked ;)

Thanks for answering, I tried what you said but there is not difference. One "ENTER" or "Ctrl R" or "F5" just makes the page to full load but any of the code seems to do the same. I know the theory should do it but i don't know if it's for being a jinja2 template or what. There are no errors in the application flask or in the devTools. :( — jcatdev, May 14 '14 at 17:57
Hi ! Have you finally found a solution to your problem ? Does my edit helped you ? — lkostka, Jun 03 '14 at 10:52

Python Flask Jinja2 webpage does not full refresh on location.reload(true) HTML Javascript

1 Answers1