Various forms are loaded into a modal and the data that is saved uses the button text ('save' insert new record, 'update' update existing record...) In the snippet below there are two buttons - 'insert' and 'standard' - when the standard modal is launched the spinner works, but when the button text is changed it doesn't. Any ideas how this can be overcome?
$('#insertButton').on('click', function() {
$('#testButton').text('Save');
$('#testModal').modal('show');
})
$('#standardButton').on('click', function() {
$('#testModal2').modal('show');
})
<
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<div class="container">
<button type="button" id="insertButton">Insert</button>
<button type="button" id="standardButton">Standard</button>
</div>
<div class="modal" id="testModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="testButton" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="modal" id="testModal2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="testButton2" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Save
</button>
</div>
The text()
method sets the content of an element by overwriting all of its child nodes, including regular tags.
To ensure that only text is changed while all the other children remain intact:
TEXT_NODE
.$('#insertButton').on('click', function() {
$('#testButton').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).remove();
$('#testButton').append(' Insert');
$('#testModal').modal('show');
});
$('#standardButton').on('click', function() {
$('#testModal2').modal('show');
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<div class="container">
<button type="button" id="insertButton">Insert</button>
<button type="button" id="standardButton">Standard</button>
</div>
<div class="modal" id="testModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="testButton" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="modal" id="testModal2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="testButton2" class="btn btn-primary">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Save
</button>
</div>
</div>
</div>
</div>