Python Flask Jinja2网页没有在location.reload（true）HTML Javascript上完全刷新

Question

我已经有一段时间寻找答案，但我没有找到这样的答案。

这是我的网页，是我最后的大学项目。 这是一个Python Flask Jinja2 Html Javascript Web应用程序。 它创建事件，然后您可以在世界各地的Instagram上实时查看照片。 这是索引

但是，当我单击提交按钮时，我创建了一个event.preventDefault()因为我想做自己的动作，最后我想要一个window.location.reload（true）所以我可以看到添加了新的事件，因为你可以看到第一个在图像中的那些。

但是window.location.reload(true)的结果是这样，只有一半的页面被刷新。 这里

这是Javascript代码：

$(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("");
}

和索引页面的模板：

//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>

而索引中的Python：

@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)

这就是为什么我认为location.reload（true）应该再次获取所有数据。 我不知道为什么只是html的烧瓶jinja2部分没有重新加载。

有任何想法或建议或其他方式吗？

非常感谢！

Answer 1

没有足够的评论点，所以这是一个coinflip答案：p你试过：

window.location.href=window.location.href

（见此处： window.location.href = window.location.href和window.location.reload（）之间的区别 ）？

另外，您是否检查过flask控制台和/或devTools控制台（F12）中记录的可能错误？

编辑：我可能找到了你的问题的解决方案：事实上，你不需要使用window.reload或.location，因为你正在点击提交按钮点击页面的ajax get请求（如果我做得好的话） ）重新加载元素。

但是，你没有看到任何更新，因为你没有在你的成功函数中指出将数据响应放在你的html中，禁止jinja2循环它（就我在测试类似代码时得到的那样）所以试试通过以下方式更改您的jquery get请求：

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

无需调用页面重新加载，您通常可以使用jinja循环访问数据。 另外，我建议你为了获得速度并避免模板重复来创建一个专用视图，从哪里获得'刷新'数据，如：

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

让我知道它是否有效;）