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

How to pass value into href link of a Bootstrap Modal?

I want to clear the values of a certain table so I want to get the table name using Bootstrap modal. I want the name of the table in url.
This is my code:
Here I'm sending the name of the table into the modal
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</ol>
I want to pass the value inside data-table into href as clear.php?clear_id="table_name"
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to clear scrap for this table.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="clear.php?clear_id=">Clear</a>
</div>
</div>
</div>
</div>
Thank you in advance!

You can dynamically change the href value of the Clear button in your modal by utilising the shown.bs.modal event trigger and building the URL with the data-table attribute at your disposal provided by the relatedTarget property in the event object.
I've add a clear button click event to emphasise this visually.
$('#scrapModal').on('show.bs.modal', function (e) {
var table = $(e.relatedTarget).data('table')
var href = 'clear.php?clear_id=' + table
$('.btn-danger', this).attr('href', href)
console.log(href)
})
// Simulate "clear" button click to alert href value
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</li>
</ol>
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to clear scrap for this table.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="#">Clear</a>
</div>
</div>
</div>
</div>

Use the following lines of code inside your script tag and this should work fine.
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})

You can do it by using a simple script like this:
$('#scrapModal').on('show.bs.modal', function (event) {
var table = $(event.relatedTarget).data('table');
$(this).find('.btn-danger').attr("href", "clear.php?clear_id=" + table);
)}
This will run when the modal appears. It would be better to give the confirm button an id attribute in order to look up in a more elegant way.
You can find more information about varying the modal content here: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Bootstrap Modal is getting hidden when window is resized

I am working on a web page where i am using bootstrap drop down and modal popup.
I am placing the modal popup inside drop down div. The popup is opening and working perfectly.
What issue i am getting is whenever i resize the window, modal popup is getting hidden when window comes to its minimum width.
I want the popup to stay on page.
Below is the code:
<div class="btn-group dropdown">
<button type="button"
id="btnCalculate"
data-toggle="dropdown"
class="dropdown-toggle">
Calculate
</button>
<div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
<div class="col-md-12">
<row>
<label class="control-label">Test</label>
<button name="getBalance"
type="submit"
data-toggle="modal"
data-target="#myModal"
class="btn btn-default"
>
Balance
</button>
</row>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks

Attach the modal to <div class="container"> tag directly, not to the dropdown menu.
Just like the following:
<div class="container">
<div class="btn-group dropdown">
<button type="button"
id="btnCalculate"
data-toggle="dropdown"
class="dropdown-toggle"> Calculate </button>
<div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
<div class="col-md-12">
<row>
<label class="control-label">Test</label>
<button name="getBalance"
type="submit"
data-toggle="modal"
data-target="#myModal"
class="btn btn-default">
Balance
</button>
</row>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It is not prefarble to place modals within low-level position such a dropdown menu. See how modals work
Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
However, if you insist to keep your modal within the dropdown menu, you need to prevent the dropdown menu from being closed when the modal is called, and ensure it is placed on the top of .modal-backdrop
JS code:
$('.dropdown').on('hide.bs.dropdown', function () {
return false;
});
and add z-index:auto to dropdown-menu style

Modal popup is opening even when button is disabled in angularjs

I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.

Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">

The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}

I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">

try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;

Bootstrap Split button drop down: programmatic access to prevent overlapped click events

I have a table that has an on click event per row to open a modal, and am looking to create a column of actions in the table for some split buttons using bootstrap
the issue is that the tr click events are interfering with the split button click events
here is my demo
Click on a table row, you will see the table row modal
Click on the action button, you will see the separate action modal
However, click on the split group button's drop down, it opens the drop down AND opens the table row modal
The reason is due to overlapping onclick functions Click events on overlapping items
The action button onclick used to have this issue as well, so I added an onclick stop propagation to the button, preventing overlay clicks from occuring
onclick="$('#dd-modal').modal('show');event.stopPropagation();"
So that solves my button issue, but my dropdown of the button , I cannot figure out how to programmatically show the dropdown without triggering the tr onclick event
I think that
.trigger('click.bs.dropdown');
may have something to do with it, but unsure on how to implement
Thanks for any help
$(document).ready(function () {
$("#table").on("click", "tr", function () {
$('#tr-modal').modal({
backdrop: 'static',
keyboard: false
});
});
});
function opener() {
$('#dd-modal').modal('show');
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="table" class="table table-striped">
<tr>
<td>My Name</td>
<td>Date</td>
<td>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger" onclick="$('#dd-modal').modal('show');event.stopPropagation();">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Some other Name</td>
<td>Date</td>
<td>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-success" onclick="$('#dd-modal').modal('show');event.stopPropagation();">Action</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</td>
</tr>
</table>
<div class="modal fade" id="tr-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 class="modal-title">Table Row Modal</h4>
</div>
<div class="modal-body">
<p>Table row modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
<button type="button" class="btn btn-primary">Ok!</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="dd-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 class="modal-title">split button modal</h4>
</div>
<div class="modal-body">
<p>split button modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Dismiss</button>
<button type="button" class="btn btn-primary">Ok!</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

You can do a quick check for the tagName of the target and ignore if it's a button or if the parent is a button (this is in case you happen to click in the "span" for the caret icon) to get around this issue pretty quickly.
Wrap you modal opening call with this if statement checking the target type...
$("#table").on("click", "tr", function (e) {
if (e.target.tagName !== "BUTTON" && e.target.parentElement.tagName !== "BUTTON") {
$('#tr-modal').modal({
backdrop: 'static',
keyboard: false
});
}
}
replace the contents of your document ready js with that
note: take note of the event paremeter in the first line
function (e)
Working Demo