Question

0

80

Views

Jquery too many ajax requests fired

Why does this code send exactly two requests for each slider change?

I have server application on flask python, and i am using ajax from JQuery to send request to my endpoint, which returns new html plot code. Flask server always getting two request per slider change. How i can to fix it, that it would send one request?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../static/style.css" rel="stylesheet" type="text/css">
    <title>plot</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script type='text/javascript'>
        $(function () {
            var form = $('form');
            $('#myRange').on('change mouseup', function () {
                $.ajax({
                    type: "POST",
                    url: "/update_view",
                    data: form.serialize(),
                }).done(function (res) {
                    $("#plot").html(res)
                });
            });
        });
    </script>


</head>
<body>
<div id="body_page">
    <form>
        <p>Default range slider:</p>
        <input type="range" min="1" max="100" value="50" id="myRange" name="slider">
    </form>

    <div id="plot">
        {{ html_plot|safe }}
    </div>
</div>
</body>
</html>

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T03:15:10.558Z

because you are subscribed to two events change mouseup.

$(function () {
    var form = $('form');
    $('#myRange').on('change mouseup', function (e) {
    console.log(e.type); // return TWO events
        /* $.ajax({
            type: "POST",
            url: "/update_view",
            data: form.serialize(),
        }).done(function (res) {
            $("#plot").html(res)
        }); */
    });
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form>
  <p>Default range slider:</p>
  <input type="range" min="1" max="100" value="50" id="myRange" name="slider">
</form>

In this case, you can only leave change