Develop Reference

There are three modals on a page. Each respective modal opens correctly, but with wrong modal body content

Each button opens a different modal
I have a peculiar issue with Bootstrap 5 modal. I have a webpage that lists database records (please see screenshot). Each record has three buttons to open their respective modal (view, edit, other).
Once the page loads, if I click the 'view' button to open its respective modal, the content of the modal body appears correctly. If I close this modal and then click either my 'edit' or 'other' buttons to open their respective modal, the content of the modal body is that of my 'view' modal - even though the modal header displays the correct title for my 'edit' and 'other' modals (suggesting to me that the correct block of 'modal code' is in play).
Now, if I refresh the webpage, and then click either my 'edit' or 'other' buttons (not clicking the 'view' button just yet), the respective modal opens with the correct content in the modal body as expected. But, once I click my 'view' button and open its respective modal, all subsequent attempts to open my 'view' and 'other' modals keep displaying the modal body content of my 'view' modal - despite what the modal header title shows.
My code is listed below. Since I an not experienced in Javascript, I suspect the case of this issue lies there. Any feedback is appreciated.
HTML Table Code:
<table >
<thead>
<tr>
<th>ID</th>
<th>Name (Last, First)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1046</td>
<td>ABBE, BILLY</td>
<td>
<button id="1046" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
</td>
</tr>
<tr>
<td>506</td>
<td>ABBEY, TEST</td>
<td>
<button id="506" class="btn btn-primary btn-sm me-1 mb-1 " role="button" />View</button>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyEditBtn" role="button" />Edit</a>
<a href="#" class="btn btn-primary btn-sm me-1 mb-1 MyOtherBtn" role="button" />Another Action</a>
</td>
</tr>
</tbody>
</table>
Modal HTML:
<div class="modal fade" id="MyEditModal" tabindex="-1" role="dialog" aria-labelledby="MyEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MyEditModalLabel">Edit Modal</h5>
</div>
<form action="xxxx.php" method="post" name="EditForm" id="EditForm">
<div class="modal-body">
<h6 class="mt-2">Test edit modal</h6>
<div class="form-floating">
<input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Name" id="Edit_Name" >
<label for="Edit_Name" class="form-label">Name:</label>
</div>
<div class="form-floating">
<input class="form-control border-0 fw-bold bg-white" type="text" name="Edit_Email" id="Edit_Email" >
<label for="Edit_Email" class="form-label">Email:</label>
</div>
<input type="text" name="Edit_ID" id="Edit_ID">
<input type="hidden" name="Modal_Type" value="Edit" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" name="editdata" class="btn btn-warning">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="MyOtherModal" tabindex="-1" role="dialog" aria-labelledby="MyOtherModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MyOtherModalLabel">Other Modal</h5>
</div>
<form action="xxxx.php" method="post" name="OtherForm" id="OtherForm">
<div class="modal-body">
<h6 class="mt-2">Test other modal</h6>
<div class="form-floating">
<input class="form-control" type="text" name="Other_Name" id="Other_Name" >
<label for="Other_Name" class="form-label">Name:</label>
</div>
<div class="form-floating">
<input class="form-control" type="text" name="Other_Email" id="Other_Email" >
<label for="Other_Email" class="form-label">Email:</label>
</div>
<input type="text" name="Other_ID" id="Other_ID">
<input type="hidden" name="Modal_Type" value="Other" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" name="adddata" class="btn btn-warning">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="ShowRecordModal" role="dialog" aria-labelledby="MyViewModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="ShowRecordModal">
<h5 class="modal-title">Customer Details</h5>
<button type="button" class="btn-close no-print" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Supporting Javascript:
<script>
$(document).ready(function() {
$('table tbody').on('click', 'button', function() {
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
cust_id = data[0];
$.ajax({url: "readtest.php",
method: 'post',
data: {CID:cust_id},
success: function(result) {
$(".modal-body").html(result);
}
});
$('#ShowRecordModal').modal('show');
})
})
</script>
<script>
$(document).ready(function () {
$('.MyEditBtn').on('click', function () {
$('#MyEditModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
$('#Edit_ID').val(data[0]);
$('#Edit_Email').val(data[1]);
$('#Edit_Name').val(data[2]);
});
});
</script>
<script>
$(document).ready(function () {
$('.MyOtherBtn').on('click', function () {
$('#MyOtherModal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
$('#Other_ID').val(data[0]);
$('#Other_Email').val(data[1]);
$('#Other_Name').val(data[2]);
});
});
</script>
I've removed extraneous codes such as the DataTables plug-in leaving only the minimum code to eliminate possible third-party components involvement in the issue.

The reason why all your modals get the same content in the modal body after clicking on the "view" button is because you're targeting the .modal-body of every modal on your page in your jQuery $.ajax() function: $(".modal-body").html(result);.
You need to target the modal ID first in the jQuery selector $():
$("#ShowRecordModal .modal-body").html(result);

Passing of parameters in a v-for loop into a bootstrap modal and outputting it

I am trying to pass an index number (loanRequest[6][index]) which is in a v-for loop into a bootstrap modal which has a texbox and then sending an object (obj) which contains both the index number and the content of the texbox (reason) to my backend API.
Here's my Vuejs code:
<tr v-for="(n,index) in loanRequest[1]">
<td v-for="">{{loanRequest[0][index]}}</td>
<td v-for="">{{loanRequest[7].staff_name}}</td>
<td v-for="">{{loanRequest[1][index]}}</td>
<td v-for="">{{loanRequest[2][index]}}</td>
<td v-for="">{{loanRequest[3][index]}}</td>
<td v-for="">{{loanRequest[4][index]}}</td>
<td v-for="">{{loanRequest[5][index].created_at}}</td>
<td><a :href="'http://localhost:8080/loans/details/'+loanRequest[6][index]"><button class="btn btn-primary btn-sm">view details</button></a></td>
<td><a ><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#approve" #click="approveUpdate(loanRequest[6][index])">Approve</button></a>
<a ><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#reject" #click="clearbox(loanRequest[6][index])">Reject</button></a>
</td>
<br><br>
</tr>
</table>
<!-- Modal reject -->
<div class="modal fade" id="reject" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Loan Rejection</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to reject this loan request?</p>
<div class="form-group">
<label>Reason: </label>
<input v-model="reason" class="form-control" placeholder="Enter your reason">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" v-show="reason" #click="clearbox">Reject</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
loanRequest: '',
reason: ''
}
},
methods: {
clearbox (index){
var obj = {
"id": index,
"reason": this.reason
};
console.log(obj);
this.reason = null;
}
}
}
</script>
Presently with my above code, I am getting 2 objects with the first one conataining the index number and the second object containing the textbox content.
How can I merge them together to get one object (obj) which contains both the index number and the modal textbox content? Any help would be appreciated!

Move you modal dialog to additional component, then pass your index as a props.

I need to set next button as disabled till any radio button got selected

In my use case i need to set Next button from a popup is disabled in default till any one of the radio button got selected.
Need to achieve this in Ember.Js
My hbs code (for that popup):
{{! To list all accounts in popup }}
<div id="listAllAccounts" class="modal animated fadeInUp modal-pop downloadAsPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" {{action 'clearModal'}}>×</button>
<h4 class="modal-title">List of accounts</h4>
</div>
<div class="modal-body">
<div class="textGroup">
<h2 class="primaryTitle">Select an account.</h2>
</div>
<div class="modalTableHolder">
<table class="primaryListTable" id="AccountsInfo">
<thead>
<td class="tablestyle5">Account ID</td>
<td class="tablestyle5">Account Name</td>
</thead>
<tbody>
{{#each model.integration as |list index|}}
<tr>
<td class="tablestyle5"><input type="radio" name="accounts" class="messageCheckbox mt6 mR5" data-acc-name={{list.ACCOUNT_NAME}} value={{list.ACCOUNT_ID}}>{{list.ACCOUNT_ID}}</td>
<td class="tablestyle5">{{list.ACCOUNT_NAME}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<div class="text-right">
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" {{action 'clearModal'}}>Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" {{action 'showContainerPopup' 'clearModal'}}>Next</button>
</div>
</div>
</div>
</div>
</div>
{{! To list all accounts in popup Ends }}
JS code:
Ember.run.scheduleOnce('afterRender', this, function() {
new URI(Abc, this.get('currentOrg.ABC_ID'), Project, this.get('defaultProject.PROJECT_ID'), Integration)
.addQueryParam('email', this.get(email))
.GETS()
.then(function(res) {
if(res.length !== 0){
var sett = projectObj.get("INTEGRATION");
self.set("model.integration", res); //this is where i set data to that popup
common.hideModal("loadingPopup");
common.showModal("listAllAccounts");
} else {
common.hideModal("loadingPopup");
options.content = i18n("enable.integration.noaccount.error");
options.type = 'warning';
dialog.showCard(options);
}
});
This is the popup. I need to disable the next button until anyone selects any one radio button. If radio button is checked i need to enable next option.

You can use .change() or .one("change") to check whether they select yet.
$(".text-right button:last").prop("disabled", true); // disable the button
$('input[type="radio"]').one("change", function () {
$(".text-right button:last").prop("disabled", false); // enable it;
});

First you can disable your button using
disabled="disabled"
when pop is appear and add extra class for next button btn-next.
And check if radio button is checked or not to enable your button.
$(document).on('click',"input:radio[name='accounts']",function () {
if ($(this).is(':checked')) {
$(".btn-next").prop("disabled", false);
}
});

Issue in passing a data id to bootstrap modal

I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.

Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});

I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>

Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});

Onclick function triggering multiple times

I am having an issue when saving inside of the add-comment modal. When I click on "save" inside of the modal it is triggers depending on how many times I have previously opened that modal.
The form I am working with is dynamic so there could be 1 to many comments to be added. I only want to use one modal to insert comments in a hidden field (not shown)
I am very confused to why when i click on the
TEST CASE
Launch Page
Open the comment modal using the comment icon
Click Save
Repeat open and saving the comment modal multiple times.
Look inside of console to see
"In Save Comment: " + i
Where i equals the number of times it is in that function.
HTML
<form id="requestForm">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#detailsModal"><span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" data-add-comment><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</form>
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="detailsModalLabel">User Details</h4>
</div>
<div class="modal-body">
<table class="table table-bordered">
<tbody>
<tr>
<td class="col-sm-3"><strong>Name</strong></td>
<td class="col-sm-4" id="info-name"></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Details Modal -->
<!-- Comments Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="commentModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<textarea id="modalComTxt" class="form-control" rows="4" maxlength="512"></textarea>
<p>Characters left: <span id="txtAreaCount">512</span></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save-comment" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
JAVASCRIPT
$("#requestForm").on('click', '[data-add-comment]', function() {
var curComBtn = $(this);
var curComment = curComBtn.prev().val();
var modalTxt = $('#modalComTxt');
var commentModal = $('#commentModal');
modalTxt.val(curComment); //set the modal value with existing comment
var i = 1;
$('#txtAreaCount').text((512 - modalTxt.val().length)); //change text count in modal
commentModal.modal('toggle');
//Function when clicking save in modal
$('#save-comment').click(function() {
console.log("In Save Comment: " + i)
i++
console.dir(curComBtn.prev());
curComBtn.prev().val(modalTxt.val());
});
});

Move the code below outside the $("#requestForm").on('click', function(){...} handler. What is happening, is that you bind an additional handler to save-comment button click event every time the [data-add-comment] button of the form gets clicked.
$('#save-comment').click(function() {
var curComBtn = $('#requestForm').find('[data-target="#detailsModal"]');
curComBtn.val( $('#modalComTxt').val() );
});

Every time someone clicks #requestForm you bind the click eventlistener to #save-comment. So after opening the modal for a second time there will be two click eventlisteners binded to #save-comment.
Since #save-comment isn't added dynamically, you can bind the click event outside of the #requestForm click handler:
$('#requestform').click(function(){
// do stuff
});
$('#save-comment').click(function(){
// do other stuff
});