Having serious data problem.
I have a button, script action, bootstrap modal confirm.
Problem
Clicking delete and agreement on modal, works like a charm. One click, one network tab/delete action. But, clicking on "delete>cancel", "delete>cancel" etc. adds as many network tab/delete actions (check img)
NB! Problem is not the 404, but that there are two (or more) actions taken, even though cancel should remove previous info/data. There is no arrays, no modal leftovers, but once you click agreement OK, as many network actions/posts are made as many you cancelled previously. And weird part is that if you click other delete, it adds THAT as well, and therefor there will be multiple deletions. It's like adding elements to delete.
Code example here: https://jsfiddle.net/cvyw6758/4/
$(document).ready(function(){
$("#action_modal").on('show.bs.modal', function (event) {
let button_ = $(event.relatedTarget),
modal_ = $(this);
let id_ = (button_.data("row") ? button_.data("row") : ""),
question_ = (button_.data("modal_body") ? button_.data("modal_body") : ""),
title_ = (button_.data("modal_title") ? button_.data("modal_title") : "Agreement"),
action_ = (button_.data("action") ? button_.data("action") : false),
url_ = (button_.data("href") ? button_.data("href") : (button_.attr("href") ? button_.attr("href") : false));
modal_.find(".modal-title").html(title_);
// do confirm action
switch (action_) {
case "approve_remove":
const elem_ = button_.parent().parent();
modal_.find(".modal-body").html(`${question_}`);
$("#confirmed").on("click", function(e) {
e.preventDefault();
// do delete
$(this).off();
$.post(`${url_}${id_}`, function(data_) {
if(data_.status == "success") {
elem_.hide();
elem_.parent().next().html(`<td colspan="3">${data_.message}</td>`);
setTimeout(function() {
elem_.parent().parent().prev().slideUp("200").remove("");
elem_.parent().parent().slideUp("200").remove("");
}, 5000);
}
else {
$(`<tr><td colspan="3">${data_.message}</td></tr>`).insertBefore(elem_.parent());
setTimeout(function() {
elem_.parent().parent().prev().slideUp("200").remove();
}, 4000);
}
modal_.modal("hide");
}, "json");
});
break;
default:
console.log("No action assigned! Please inform IT department!");
modal_.find("#confirmed").hide();
modal_.find(".modal-body").html("No action assigned! Please inform IT department!");
break;
};
});
// reset modal
$("#action_modal").on('hidden.bs.modal', function (event) {
const modal_ = $(this);
modal_.removeData();
modal_.find(".modal-title").html("");
modal_.find(".modal-body").html("");
});
})<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- start of a modal -->
<div class="modal fade" id="action_modal" tabindex="-1" role="dialog" aria-labelledby="action_modal_label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="action_modal_label">Popup</h5>
</div>
<div class="modal-body">
<h4 class="text-zenter"></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">cancel</button>
<button type="button" class="btn btn-primary" id="confirmed">ok</button>
</div>
</div>
</div>
</div>
<!-- end modal -->
<span class="glyphicon glyphicon-trash remove_comment_btn" id="remove_comment_btn_1790"
data-toggle="modal" data-target="#action_modal" data-href="/do_delete/" data-row="1790"
data-action="approve_remove"
data-modal_title="Agreement"
data-modal_body="are you sure you want to delete?"
aria-selected="false" aria-hidden="true"> Delete 1790</span>
<br />
<span class="glyphicon glyphicon-trash remove_comment_btn" id="remove_comment_btn_1791"
data-toggle="modal" data-target="#action_modal" data-href="/do_delete/" data-row="1791"
data-action="approve_remove"
data-modal_title="Agreement"
data-modal_body="are you sure you want to delete?"
aria-selected="false" aria-hidden="true"> Delete 1791</span>Expectation
My problem is - I need it to be reset each time cancel is clicked! Any ideas?
UPDATE
It seams to affect ALL modals. As soon as you open one of the similar modals, it will start piling data up and affect all you previously opened.