How to prevent ajax send multiple request when change input data

Question

Im using ajax to send a parameter from input field in Modal to Controller, But when i change the value and close the modal, ajax remember it and when i call it, Ajax request multiple times, with old values and the new of the input.

    <!--Add post to seri -->
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Add post to serie</h4>
                <button type="button" class="close cleardt" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-9">
                        <input type="number" required id="IDPost" placeholder="Nhập id bài viết" class="form-control" />
                    </div>
                    <div class="col-3">
                        <button class="btn btn-info" id="btnCheck">Check</button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="message-text" class="col-form-label">Bài viết gốc:</label>
                    <p id="postName" class="text-primary bold">ID không hợp lệ</p>
                </div>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" id="addPostBtn" disabled class="btn btn-success">Thêm</button>
                <button type="button" class="btn btn-secondary cleardt" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

My ajax syntax:

 var serieid = '@Model.SerieID';
$('#addBtn').click(function () {
    var amodal = $('#addModal');
    $('#IDPost').val(null);
    amodal.modal('show');
    $('#addPostBtn').click(function () {
        var idpost = $('#IDPost').val();
        amodal.modal('hide');
        $.ajax({
            type: "POST",
            url: '/Admin/AddToSerie',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ id: idpost, seriid: serieid }),
            dataType: "json",
            success: function (recData) {
                var notify = $.notify('<strong>Successfully
</strong><br/>' + recData.Message + '<br />', {
                    type: 'pastel-info',
                    allow_dismiss: false,
                    timer: 1000,
                });
                if (recData.reload != false) {
                    setTimeout(function () {
                        window.location.reload();
                    }, 1500);
                }

            },
            error: function () {
                var notify = $.notify('<strong>Error</strong><br/>Không thêm được<br />', {
                    type: 'pastel-warning',
                    allow_dismiss: false,
                });
            }
        });


    });

});

Im finding a way to clear the value queue of input field but it doesnt work

Answer 1

Try appending a unique bit of text to ajax url every time, eg

var ts = (new Date()).getMilliseconds();

$.ajax({
    type: "POST",
    url: '/Admin/AddToSerie?ts=' + ts,
    contentType: "application/json; charset=utf-8",
        ......

Change the getMilliseconds to provide a genuinely unique value, say by concatenating all the other portions of the date.

Answer 2

$('#addPostBtn').click add a EventListener to the element.

It is called every time when #addBtn is clicked, so multiple event listeners are attached to addPostBtn . That's why your ajax was called multiple times.

You can fix it by using on and off of jQuery.

...
amodal.modal('show');
$('#addPostBtn').off('click');
$('#addPostBtn').on('click', function () { ... });

Or it can be fixed by moving $('#addPostBtn').click out of $('#addBtn').click function.

$('#addBtn').click(function () {
    var amodal = $('#addModal');
    $('#IDPost').val(null);
    amodal.modal('show');
});

$('#addPostBtn').click(function () { ... });

Answer 3

v**separate modal click and ajax click event**ar serieid = '@Model.SerieID';$('#addBtn').click(function () {
var amodal = $('#addModal');
$('#IDPost').val(null);
amodal.modal('show');});$('#addPostBtn').click(function () {
var idpost = $('#IDPost').val();
amodal.modal('hide');
$.ajax({        type: "POST",
    url: '/Admin/AddToSerie',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ id: idpost, seriid: serieid }),
    dataType: "json",
    success: function (recData) {
        var notify = $.notify('<strong>Successfully</strong><br/>' + recData.Message + '<br />', {
            type: 'pastel-info',
            allow_dismiss: false,
            timer: 1000,
        });
        if (recData.reload != false) {
            setTimeout(function () {
                window.location.reload();
            }, 1500);
        }

}
});});