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