select2, Ajax post с Flask - колесо мыши не работает в Chrome - PullRequest
Новая
       23

select2, Ajax post с Flask - колесо мыши не работает в Chrome

0 голосов
/ 12 декабря 2018

Я максимально сократил свой код.Это Ajax-публикация в бэкэнд Flask, которая рендерит новую страницу (render_template) с дотом select2 (https://select2.org/).

При этой комбинации прокрутка с помощью колесика мыши не работает в Chrome (только в Chrome).работает через страницу вверх / вниз, однако.

Если вы вызываете index.html напрямую, он работает отлично. Поэтому я ожидаю, что мой пост Ajax будет неправильным. Любые предложения?

приложение.py 

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/", methods=['GET'])
def main():
    return render_template('main.html')

@app.route("/index", methods=['POST', 'GET'])
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run('localhost', 8080, debug=True)

main.html 

<!DOCTYPE html>
<html>
    <body>
        <a href="{{ url_for('index') }}">direct get -> mouse wheel works</a>
        <br>
        <button onclick="myFunction()">Ajax post -> mouse wheel does not work</button>
    </body>
    <script>
        function myFunction() {
            var formData = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "{{ url_for('index') }}", true);
            xhr.onreadystatechange = function() {
                if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                    document.write(xhr.responseText);
                    document.close();
                }
            }
            xhr.send(formData);
        };
    </script>
</html>

index.html 

<html>
<head>
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <!-- pillbox -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>        
    <script>
            $(document).ready(function() { 
                    $("#attendees").select2();
            });
    </script>
</head>
<body>
    <select class="select-responsive" name="attendees" id="attendees" style="width: 100%" multiple="multiple" >
            <option value="test">test</option>
    </select>

    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
    <h1>very long page</h1>
</body>

...