AJAX POST накапливает неудачные запросы - PullRequest
0 голосов
/ 10 апреля 2020

Итак, я сделал этот скрипт:

<!-- PROMOTE BUTTON JS-->
var currentRequest = null;

$(document).on('click', '[id="promote"],[id="demote"]' , function(e) {
    $('#smallmodal-promote').modal('show');
        var key = $(this).get(0)['value']
        var op = $(this).get(0)['name']
        var image = JSON.parse($("#tr"+key).get(0)['dataset']['json'])
        $("#"+key).fadeIn(500);
        var data = {
            "key": key,
            'op': op,
            'image': image
        };
    $(document).on('click', '[id="promoteModalClose"],[id="close"]' , function(e) {
        $("#"+key).fadeOut(500);
    });
    $(document).on('hide.bs.modal','#smallmodal-promote',function(){
      $("#"+key).fadeOut(500);
    });
    $(document).on('click', '[id="promoteModal"]' , function(e) {
        $('#smallmodal-promote').modal('hide');
        currentRequest = $.ajax({
            contentType: 'application/json',
            url: "/promote",
            type: "POST",
            data: JSON.stringify(data),
            beforeSend : function() {
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            complete: function(resp, textS, xhr) {},
            success: function(resp, textS, xhr){
                location.reload();
            },
            error: function(resp, textS, xhr){
                if (resp.status == '500') {
                    $('#error500').text('Sorry, but something went wrong. Please try reload the page.');
                    $('.alert').alert().addClass("show");
                }
            }
        });
    });
});
<!-- END PROMOTE BUTTON JS-->

, который связан со следующим html + jinja2 и другим модалом с кнопкой подтверждения:

...
<!-- JINJA2 DINAMIC TABLE -->
<td>
<div class="table-data-feature">
    {% if image['validated'] %}
    <button class="item" data-toggle="tooltip" data-placement="top" title="Invalidate Image" name="invalidate" id="invalidate" value="{{ image['key'] }}">
        <i class="zmdi zmdi-close" style="color:#fa4251"></i>
    </button>
    {% else %}
    <button class="item" data-toggle="tooltip" data-placement="top" title="Validate Image" name="validate" id="validate" value="{{ image['key'] }}">
        <i class="zmdi zmdi-check" style="color:#00ad5f"></i>
    </button>
    {% endif %}

    {% if image['validated'] and image['env'] != 'prod' %}
    <button class="item"  data-placement="top" data-toggle="tooltip" data-target="#smallmodal-promote" title="Promote Image" name="promote" id="promote" value="{{ image['key'] }}">
        <i class="zmdi zmdi-upload"></i>
    </button>
    {% endif %}

    {% if image['env'] != 'dev' %}
    <button class="item"  data-placement="top" data-toggle="tooltip" data-target="#smallmodal-promote" title="Demote Image" name="demote" id="demote" value="{{ image['key'] }}">
        <i class="zmdi zmdi-download"></i>
    </button>
    {% endif %}

    <button class="item" data-toggle="tooltip" data-placement="top" title="Depricate Image"  id="depricate" value="{{ image['key'] }}">
        <i class="zmdi zmdi-delete"></i>
    </button>
</div>
</td>
<!-- END JINJA2 DINAMIC TABLE -->
...
<!-- PROMOTE SMALL MODAL -->
<div class="modal fade" id="smallmodal-promote" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title status--denied" id="smallModalLabel">Promote Image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>This will create the new image within another environment context!</p>
                <p>Dev, QA or Prod</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="promoteModalClose" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="promoteModal">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- END PROMOTE SMALL MODAL -->
...

Но если POST сбой или успешное выполнение, и любая кнопка promote будет нажата снова, она отправит все предыдущее рекламное событие и новое!

Мне удалось НЕ отправить все запросы снова + новый с помощью: currentRequest но я все еще получил data: JSON.stringify(data), который содержит все последние запрошенные элементы.

Как я могу очистить эти данные раньше? Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...