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

Julian W. · Accepted Answer · 2019-06-04 03:24:06Z

1

$('#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 () { ... });

answered Jun 4, 2019 at 3:24

Julian W.

1,5819 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kien D Over a year ago

Thank you, it works, but i have to declare amodal out of function.

Programnik · Accepted Answer · 2019-06-04 03:16:15Z

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.

answered Jun 4, 2019 at 3:16

Programnik

1,5591 gold badge10 silver badges15 bronze badges

Comments

Rameshwar Patnaik · Accepted Answer · 2019-06-04 03:53:52Z

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);
        }

}
});});

Collectives™ on Stack Overflow

How to prevent ajax send multiple request when change input data

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related