Develop Reference

Error Opening Bootstrap Modal With JavaScript

I'm working on a piece of UI that involves a listing of rows in the database. Each row is editable, and when the edit button is clicked, my intent is to bring up a modal dialogue window with data preloaded in a form via AJAX for editing that specific row as shown in the following picture.
The following code shows a working setup you can play with.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
//populate the content of the modal window
//jQuery('#editModal').modal('show');
modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
modal1.show();
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
However, I'm getting the following error in the js console every time the edit button is clicked to display the modal:
Uncaught TypeError: can't access property "backdrop", this._config is undefined
This appears to be due to the fact that I'm launching the modal via javascript with the onclick event. If I change the html and js slightly as follows, and use the "data-bs-target" property of the button to open the modal instead, it all works without js errors.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
But I can't do it this way because I have to fetch the data to edit with AJAX and populate the body of the modal before I display it. Can anyone clue me in to what I need to do to eliminate the error?

This appears to be due to the fact that I'm launching the modal via javascript with the onclick event.
This is not correct.
The problem occurs because you are using the data-bs-toggle="modal" attribute without specifying what the target is.
If you try to remove the onclick attribute from the button the problem still exist.
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal">Edit</button>
Just remove the data-bs-toggle="modal" attribute from the edit button and use onclick only.
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadEditModal(8)">Edit</button>
I hope it helps

Angular Bootstrap modal is not working in Ngfor

I am using Angular 8,
In this I need to do a popup in NgFor loop, the data is binding in popup modal but the same data is binding continously in the bootstrap modal...
My Html is
<tr *ngFor="let law of List; index as i">
<td>{{i+1}}</td>
<td>
<mat-form-field>
<input matInput placeholder="Name" [formControl]="college">
</mat-form-field>
</td>
<td>
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target=".bd-example-modal-lg" (click)="data(law )"
(click)="get()">Quantity</button>
</td>
</tr>
<div class="modal fade bd-exampletwo-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">Delivary Details</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div>
<table ">
<thead>
<tr>
<th>Sl.No</th>
<th>first Name</th>
</tr>
</thead>
<ng-container>
<tr [formGroupName]="j">
<td>{{j+1}}</td>
<td>
<td>
<mat-form-field>
<input matInput placeholder="firstname" formControlName="f_name</mat-form-field>
</td>
</tr>
</ng-container>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How to iterate the bootstrap modal in ngfor .. In this same data is binding again and again..
data-target=".bd-exampletwo-modal-lg{{i}}">
<div class="modal-dialog modal-lg" id="{{i}}"></div
I used this to iterate but not working How to Do that

Bootstrap's JavaScript-based components, such as modal, do not work correctly with Angular. It is best to use an Angular-specific library, such as ng-bootstrap or ngx-bootstrap.

I am using a bootstrap model. But when i call a function in js side it closes, i want it to open

<div id="responsive-modal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; " data-keyboard="false" data-backdrop="static" ng-init = "populateBidSpocData()" >
<div class="modal-dialog modal-lg">
<div class="modal-content" style="margin-top:55px;">
<div class="modal-header" style="background:#003c4c;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="color:#FFF;">Check Availibility</h4>
</div>
<div class="modal-body">
<table class="table table-hover hd-bg-table table-bordered">
<thead>
<tbody>
<thead>
<tr>
<th class="text-center" style="vertical-align:middle" rowspan="2"></th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
<th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
</tr>
<tr>
<th><b>Initiation</b></th>
<th><b>SPOC Assignment</b></th>
<th><b>Participant Contribution</b></th>
<th><b>Review</b></th>
<th><b>Closure</b></th>
</tr>
</thead>
<tr ng-repeat="x in infoWithStatus track by $index">
<td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
<td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
<td>
<select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
<option value="">Please select a role</option>
</select>
</td>
<td>{{x.count1}}</td>
<td>{{x.count2}}</td>
<td>{{x.count3}}</td>
<td>{{x.count4}}</td>
<td>{{x.count5}}</td>
<tr/>
</tbody>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" >Close</button>
</div>
</div>
</div>
</div>
Here as we can see i am calling a function on click, that contains some validations. But, after the validations are done, it closes the model. But , i want the model to still open after validation as well.

You should remove
data-dismiss="modal"
from here
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
And in your validate(infoWithStatus) you should close the modal if validation is success. Use below code to hide modal
$("#responsive-modal3").modal("hide");

how to pass data to modal using bootsrap

I was trying to figure out how to pass a variable to a model. For example, I have a table that have lists of student. I want to click one of them and have a modal popup that is matching that student. So I obviously need to pass some how the id in the table to the model. This is all in Asp.net using razor. And then after having that model popup I would like to edit and resubmit which then would refresh the table. Perhaps even have a success message. I am using the bootstrap so I was thinking of using the alert to say Successfully Updated! or something.
here is the code. Please help me to resolve this issue.
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Name</th>
<th>DNIS </th>
<th>Created by</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.service_name)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.dnis)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.created_by) </td>
<td class="center"> #Html.DisplayFor(modelItem => item.date_time)</td>
<td class="center">
<a class="btn btn-success" href="~/Service/AssignSkillGroup/#item.service_name">
Add/Del SkillGroup
</a>
<a class="btn btn-info" href="~/Service/Edit/#item.service_name">
<i class="icon-edit icon-white"></i>
Edit
</a>
<a class="btn btn-danger" data-toggle="modal" data-id="#item.service_name" data-target="#myModal" >
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/Service/Delete/">
Delete
<a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
</a>
</div>
</div>
</span>
</body>

You can use bootstrap dialog event to achieve what you want :
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get id attribute of the clicked element (delete button)
var id = $(e.relatedTarget).data('id');
// do what you want with the id ..
});

You can make your modal like the following
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="Close()" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" id="del" >
Yes
</a>
<a class="btn btn-default" onclick="Close()">
No
</a>
</div>
</div>
</span>
The add the following script and call those methods through your delete button and pass the id to the script function.
<script>
function deleteFunction(id) {
$('#myModal').show();
var a = document.getElementById('del');
a.href = "/Service/Delete/" + id;
}
function Close()
{
$('#myModal').hide();
}
</script>

Angular ignoring hidden elements

I have a list of messages returned from a server and i'm using angular to template those messages into rows in a table. That all works fine, but i want to have it so when you click the row a modal pops up with that rows information. Unfortunately angular seems to completely ignore hidden elements even though the modal is within the app and controller namespace (not sure if namespace is the proper term). I have googled around and found a BUNCH of fixes for input fields but none for just simple binding. Heres my code.
HTML (Table)
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
</div>
JavaScript
$('.modal.ui').modal();
var app = angular.module('messages', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
app.controller('MessagesCtrl', function($scope, $http) {
$scope.currentMessage = {};
$http.get('{{ route('message.index') }}').then(function(resp) {
$scope.messages = resp.data.messages;
});
$scope.show = function(message) {
$scope.currentMessage = message;
}
});
HTML (All)
<div style="padding: 10px" data-ng-app="messages" data-ng-controller="MessagesCtrl">
<table class="table ui celled striped">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="message in messages | orderBy:['viewed', 'created_at']" class="message">
<td>[[ message.email ]]</td>
<td>[[ message.phone || 'N/A' ]]</td>
<td>[[ message.subject ]]</td>
<td>
<i class="icon reply"></i>
<i class="icon unhide" data-ng-click="show(message)"></i>
<i class="icon trash" data-ng-click="destroy(message)"></i>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
<div class="ui modal">
<div class="header">Message</div>
<div class="content" style="background: none">
<div><strong>Sent: </strong>[[ currentMessage.sent_at ]]</div>
<div><strong>From: </strong>[[ currentMessage.email ]]</div>
<div><strong>Phone: </strong>[[ currentMessage.phone || 'N/A' ]]</div>
<div><strong>Subject: </strong>[[ currentMessage.subject ]]</div>
<div style="margin-top: 10px">
<h1>Message</h1>
[[ currentMessage.body ]]
</div>
</div>
<div class="actions">
<a class="ui button green icon mini labeled">
<i class="icon reply"></i>
Reply
</a>
<button class="ui button red icon mini labeled">
<i class="icon trash"></i>
Delete
</button>
</div>
</div>

This is full example: i used bootstrap for open modal
<!doctype html>
<html ng-app="messages" ng-controller="MessagesCtrl">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
</head>
<body>
<div>
<table class="table table-bordered">
<thead>
<tr style="text-align: center">
<th class="collapsing">Email</th>
<th class="collapsing">Phone</th>
<th>Subject</th>
<th style="width: 100px">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="message in messages" class="message">
<td>{{ message.email }}</td>
<td>{{ message.phone || 'N/A' }}</td>
<td>{{ message.subject }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" ng-click="openModal(message)">
show message
</button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
remove message
</button>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<strong style="font-size: 1.5em">No messages</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Message</h4>
</div>
<div class="modal-body">
<div><strong>Sent: </strong>{{ currentMessage.sent_at }}</div>
<div><strong>From: </strong>{{ currentMessage.email }}</div>
<div><strong>Phone: </strong>{{ currentMessage.phone || 'N/A' }}</div>
<div><strong>Subject: </strong>{{ currentMessage.subject }}</div>
<div style="margin-top: 10px">
<h1>Message</h1>
{{ currentMessage.body }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-primary">Reply</button>
</div>
</div>
</div>
</div>
<script>
angular.module("messages", []);
angular.module("messages").controller("MessagesCtrl", function($scope) {
$scope.messages = [{
email: "x#x.com",
phone: "092222222",
subject: "test",
sent_at: "2015/15/15",
body: "your message"
}];
$scope.openModal = function(message) {
$scope.currentMessage = message;
}
});
</script>
</body>
</html>

I figured out the problem. For those using semantic ui (and perhaps bootstrap) when the modal is initialized a script will move it from where you placed it (in the app directive) to the the bottom of the body tag. Like #Maher did in his example make the entire body the app and controller to fix this.