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);

Bootstrap-ui Modal is coming up blank when set inside angular-gantt

I am having difficulties trying to get my modal to come up. I am not sure if it is because modal is not compatible with angular-gantt or if I have the code wrong. At the moment I get a darker screen as if there should be a modal there.
Here is the code for the button in the gantt:
JS:
'content':'<i class=\"fa fa-cog\" data-toggle="modal" data-target="#hp_modal" ng-click="scope.show_details(task.model)"></i>' + 'Gant Object'
Html:
<div class='modal fade' id='hp_modal'>
<div class='modal dialog'>
<div class='modal-content'>
<div class="modal-header">
<h3>This is HP modal</h3>
</div>
</div>
</div>
</div>
And here is an Image of after I click on the cog:
https://imgur.com/a/CazzaLK

You need to remove all the class modal modal-dialog and modal-content
Angular already create them automaticly when you open your modal.
You just keep this tags :
<div class="modal-header">
<h5 class="modal-title">My Title</h5>
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" class="form-control" autofocus/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Then if you need to use some features such as modal-dialog-centered, you need to use the NgbModalOptions on open method :
this.modalRef = this.modalService.open(
this.dialogTemplateRef,
{centered:true}
);

Unable to use multiple modal's on the same page

I need to have multiple modal's on the same page. Right now I just have two. One that loads content dynamically, and another the shows a loading gif when a file is being deleted. The loading gif modal works fine as it opens and closes on its own as it should. But the main modal that loads its content dynamically looses the ability to close. When I hover over the close button or link it does not change to the pointer, it is like it does not recognize the button is there.
If I remove the loading gif modal, the dynamic modal works fine. I have tried to do different modals, but they all have the same problem.
<div class="container-fluid">
<div class="page-header">
<h1 class="text-center">Link Details</h1>
</div>
<div id="linkDetailsWrapper">
<!-- Note - This content is loaded dynamically -->
<div class="col-lg-6 uploadFiles" id="uploadFiles-right">
<h3 class="text-center">Uploaded By Customer</h3>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>File Name</th>
<th class="hidden-xs">Date Added</th>
<th>Notes</th>
<th class="hidden-xs">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>someFile.ext</td>
<td class="hidden-xs">2016-02-26 17:01:16</td>
<td><span class="glyphicon glyphicon-open-file"></span></td>
<td class="hidden-xs"><a title="Delete File" class="delete-file-link" data-fileid="130" data-tooltip="tooltip"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End of dynamic content -->
</div>
</div>
<div class="modal fade" id="modal">
<div class="modal-dialog">
<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>File Notes:</h4>
</div>
<div class="modal-body">
<p>The Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="loadingModal">
<div class="modal-dialog">
<img src="/source/img/loader.gif" alt="loading..." class="loadingModal" />
</div>
</div>
<script src="/source/js/uploadLinks.js"></script>
<script>
$('#linkDetailsWrapper').load('/_links/details/45');
</script>
Content of uploadLinks.js:
$('body').tooltip({
selector: '[data-tooltip="tooltip"]',
trigger: 'hover'
});
$('#modal').on('show.bs.modal', function(e)
{
var link = $(e.relatedTarget);
var noteID = link.data('noteid');
$(this).find('.modal-body').load('/_links/loadNote/'+noteID);
});
$(document).on('click', '.delete-file-link', function(e)
{
var el = $(this);
if(confirm('Are You Sure?\nThis Cannot Be Undone.'))
{
$('#loadingModal').modal('show');
$.get('/_links/deleteNote/'+$(this).data('fileid'), function(data)
{
if(data == 'success')
{
el.closest('tr').remove();
$('#loadingModal').modal('hide');
}
else
{
alert('There was a problem deleting the file.\nAn error log has been generated.');
$('#loadingModal').modal('hide');
}
});
}
});
Edit: I found the solution. I was using some CSS I found in another forum to center the modal on the page vertically. This was causing my problem. I removed the CSS and I am good to go now.
CSS Removed:
body.modal-open .modal {
display: flex !important;
height: 100%;
}

Set the value of textbox in Bootstrap Modal from label text

I am showing the bootstrap modal on clicking the hyperlink.Beside the hyperlink there's a label in which some text is getting printed dynamically.
I am getting the text of that specific label using jquery to print it in Textbox present in Bootstrap Modal.
The text is retrieved very fine but i could not get successfull in showing this text is bootstrap Modal Textbox.
Here is my Jquery Code :
<script>
$(function () {
$(".edit").click(function () {
var tr = $(this).parent().parent();
var tdRecords = $(tr).children();
var CurrValue = $(tdRecords[0]).text();
var NewValue = $(tdRecords[1]).text();
alert(CurrValue); //alert is showing the value fine
$("#Curr_Val").val(CurrValue); //not working
$('#myModal').modal('show');
});
});
</script>
Here is my Modal Code :
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
Current Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="Curr_Val"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-md-3">
New Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="New_Val"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The value is getting printed in alert very fine but it's not getting printed in textbox.
Someone Please Help me what am I missing.
Thanks in advance

The problem with accessing asp net controls using jquery way. You need to change it to $('#<%= Curr_Val.ClientID %>').val(CurrValue);

Change the Meteor Template Values on button click

I am displaying a list of Topics on a modal popup window, where on the modal I have two Buttons next and previous.I want When i click on the previous button it shows the previous 10 topics and when i click on the next button it shows the next 10 topics. My Template code is this
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="topic_selector_label">Quiz Settings</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered table-condensed table-hover " >
<tbody>
{{#each topics}}
<tr>
<td>
{{name}}
</td>
</tr>
{{/each}}
</tbody>
</table>
<button type="button" class="btn btn-default" id="previous_topics">Previous Topics</button>
<button type="button" class="btn btn-default pull-right" id="next_topics">Next Topics</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div>
and my js code is
'click #next_topics':function(){
var LIMIT=2;
skip_topics=skip_topics+2;
var syllabus = Meteor.syllabi.findOne(Session.get("currentSyllabusId"));
topics= Meteor.topics.find({subject_id: syllabus.subject_id, level_id: syllabus.level_id},{skip:skip_topics,limit:1})
return Template.syllabus_design({topics:topics})
},
I want to change the list of topics on next and previous button click

If I understand correctly your problem is due to the template not refreshing on click,
see this: https://github.com/meteor/meteor/issues/1172#issuecomment-19832727
try making skip_topics a Session variable and print that variable in your template - the same way that awatson1978 suggests in the github issue using his/her form_changed session variable.
For deeper understanding of what went wrong in your code see http://docs.meteor.com/#reactivity