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

Bootstrap modal not popping up when button is pressed

Im trying to make a basic student list webpage using bootstrap. What I want to do is that when the modal button is pressed, a modal pops up that lets the user type in the requested details, but before that I just copy pasted the code in bootstrap's site to test first if everything is well and implemented.
this is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Student List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8" id="pageName">
<h1>Student List</h1>
</div>
<div class="col-4" id="newButton">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<table class="table">
<thead class="thead-dark" id="tableHeader">
<tr>
<th scope="col">ID</th>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">Course</th>
<th scope="col">Average</th>
</tr>
</thead id="tableContent">
<tbody>
</tbody>
</table>
<script src="js/bootstrap.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
my problem is that when I press the button, nothing happens. The button in itself is fine, it can be pressed and stuff, but the modal does not pop up. Have i missed something or have not implemented something?

You are using bootstrap 5 so use data-bs-toggle instead of data-toggle and use data-bs-target instead of data-target
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
Ref:https://getbootstrap.com/docs/5.1/components/modal/

Fixed, Actually you miss the CSS and there is button attributes were wrong:-
Below example working fine...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<title>Student List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8" id="pageName">
<h1>Student List</h1>
</div>
<div class="col-4" id="newButton">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" 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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<table class="table">
<thead class="thead-dark" id="tableHeader">
<tr>
<th scope="col">ID</th>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">Course</th>
<th scope="col">Average</th>
</tr>
</thead id="tableContent">
<tbody>
</tbody>
</table>
<script src="js/bootstrap.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
</body>
</html>

You can use jquery to trigger the modal to open.
$('.newButton button').on('click',function(){ $('#exampleModal').modal('show'); })

read this link and do not change the version of bootstrap: https://getbootstrap.com/docs/5.0/components/modal/
from there, you can see you missed this:
<script>
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
</script>

bootstrap issue during modal integration

I have an issue when i'm trying to invoque a modal form, the moment when i click the edit button i need to load the form, but nothing appear, after looking for the problem tryin to fix it , the problem still remain, i'm stucked here for today trying all solution but nothing ....
The code snippet is showing the whole code :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{title}">Spring 4 MVC</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="#{css/bootstrap.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/dataTables.bootstrap4.min.css"
th:href="#{css/dataTables.bootstrap4.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/buttons.bootstrap4.min.css"
th:href="#{css/buttons.bootstrap4.min.css}"
/>
<script type="text/javascript"
src="../static/js/jquery-3.2.1.min.js"
th:src="#{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript"
src="../static/js/jquery.dataTables.min.js"
th:src="#{js/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.buttons.min.js"
th:src="#{js/dataTables.buttons.min.js}"></script>
<script type="text/javascript"
src="../static/js/pdfmake.min.js"
th:src="#{js/pdfmake.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.bootstrap4.min.js"
th:src="#{js/dataTables.bootstrap4.min.js}"></script>
<script type="text/javascript"
src="../static/js/buttons.bootstrap4.min.js"
th:src="#{js/buttons.bootstrap4.min.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</head>
<body>
<div class="container">
<div th:if="${not #lists.isEmpty(produit)}">
<h2>Product List</h2>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Product Id</th>
<th>Description</th>
<th>Price</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${produit}">
<td th:text="${product.idProduit}">Id</td>
<td th:text="${product.code}">code</td>
<td th:text="${product.libelle}">descirption</td>
<td th:text="${product.indice}">price</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button></p>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>

It seems you have not included the boot‌​strap.min.js file try include it then it would work. Because this file has many methods like, modal, tooltip and etc.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boot‌​strap.min.js"></scri‌​pt> file.
Include that file after /jquery-3.2.1.min.js. Then it would work.

How Do I sove this "Cannot read property 'reset' of null" in AngularJS?

we have to clear the data of the form after the user is click on the submit button.i will be provided the id to the clear the form but form is not not reset.i am using javaScript reset() function to clear the data.how to solve this.
//here we crate the module for the CRUD application here
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
//here we create the myService function for show the Dmmt array
$scope.user = myService.show();
console.log($scope.user);
//here we create the saveUser function for push the item into the list
$scope.saveUser = function(){
var data =
{
eid:$scope.user.eid,
email:$scope.user.email,
city:$scope.user.city,
salary:$scope.user.salary,
date:$scope.user.date,
}
//here we create will pass the user data to the myService of the show2
$scope.user =myService.show2(data);
//Here we clear the form data
document.getElementById("clearData").reset();
//Here we clear the form data without function
// $scope.user.eid ="";
// $scope.user.email ="";
// $scope.user.city ="";
// $scope.user.salary ="";
// $scope.user.date ="";*/
}
//Calling setParam function for the particular userDetails.
$scope.setParam = function(index){
$scope.one = $scope.user[index];
console.log($scope.one);
}
//here we delete the deleteUser function for remove the item into the lsit
$scope.deleteUser = function(index){
$scope.result3 =myService.show3(index);
console.log($scope.result3);
}//close contrller here
$scope.editeUser = function(x){
$scope.ok= myService.editeUsers(x);
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- include the angularjs files here-->
<script src="angular.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="app/controller.js"></script>
<script src="app/service.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
</head>
<body ng-controller="myCont">
<div class="jumbotron">
<div class="container">
<button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Australia'" data-ng-false-value=''/> Australia<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Playboy'" data-ng-false-value=''/>Playboy
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
<div class="input-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="alert alert-info" ng-if="message">
Info ×.
</div>
<table class="w3-table w3-bordered">
<thead>
<tr>
<th>User</th>
<th>EmployeenName</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | orderBy:'salary' "
onclick="document.getElementById('id01').style.display='block'"
ng-click ="setParam($index)" >
<td style="max-height:61px;"><img src={{x.img}}></img></td>
<td>{{x.eid}}</td>
<td>{{x.email}} </td>
<td>{{x.salary| currency}}</td>
<td>{{x.city}}</td>
<td>{{x.date | date:'dd/mm/yy'}}</td>
<div style="float:right; margin-top:8px;"><p class="bg-primary">
Total Count after Filtered-{{filtered.length}}</p>
</div>
<td>
<button type="button" class="btn btn-info" ng-click="isEditForm=true;">edit</button>
</td>
<td ng-show="isEditForm">
<lable>Name</label><input ng-model="x.eid"/><br>
<lable>Email</label><input ng-model="x.email"/><br>
<lable>salary</label><input ng-model="x.salary"/><br>
<lable>city</label><input ng-model="x.city"/><br>
<lable>date</label><input ng-model="x.date"/><br>
<button ng-click="isEditForm=false;">SAVE HERE</button>
</td>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalDelete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
//here we will provide the id for clear data
<form id="clearData">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New User Registration</h4>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="eid" ng-model="user.eid" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" ng-model="user.email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Salary</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal"
ng-click="saveUser()" >Submit</button>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</form>
</div> <!-- here model body is closed-->
</div> <!-- here model content is clo sed-->
</div>
</div>
<!-- Declare another model is declare for edit Modal -->
<!--Here we creat the delete user model for dlete the user -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Are R Want to Delete </h4>
</div>
<div class="modal-body">
<strong style="color:blue;">
You re going to delete the {{one.eid}}</strong>
</h4>
</div>
<style type="text/css"></style>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is closed-->
</div>
</div>
</div>
</div>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px">
<div class="w3-center"><br>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">×</span>
<img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top">
</div>
<form class="w3-container" action="form.asp">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
<tr>
<td>{{one.eid}}</td>
<td>{{one.email}}</td>
<td>{{one.salary}}</td>
<td>{{one.city}}</td>
<td>{{one.date}}</td>
<span class="btn btn-info">Follow Here</span>
</table>
</form>
</div>
</div>
</div>
</body>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

AngularJs has ngModel to handle forms.
Use that instead.
Then, to clear the form, you simply set the form data object to new empty object and call $scope.$apply() *if calling outside of angular digest cycle * This will clear the form for you.

Extra </body> and </form> tags in the bottom, Remove them first.
Do not use document APi in Angular controller.
This should work
$scope.user.eid ="";
$scope.user.email ="";
$scope.user.city ="";
$scope.user.salary ="";
$scope.user.date ="";
for cleaner code you can wrap it in a function clear and call.

Bootstrap table contents in a modal pop up

I have some formatting issues using bootstrap.
I want to insert data in tabular form in modal-body.
Is this possible? As i checked the sample, modal can only be used by using div tags.
http://getbootstrap.com/javascript/#modals

Sure, you can use tables in modals!:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<table>
<thead>
</thead>
<tbody class="table">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Yes, but I had to move my modal content to the top of the html body to get it to work correctly.

Try this One
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Add New User
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="lead_id" class="col-form-label">ID:</label>
<input type="text" class="form-control" id="lead_id">
</div>
<div class="mb-3">
<label for="first_name" class="col-form-label">First Name:</label>
<input type="text" class="form-control" id="first_name">
</div>
<div class="mb-3">
<label for="last_name" class="col-form-label">Last Name:</label>
<input type="text" class="form-control" id="last_nam"e>
</div>
</form>
</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</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>