Итак, я сделал этот скрипт:
<!-- 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">×</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)
, который содержит все последние запрошенные элементы.
Как я могу очистить эти данные раньше? Спасибо