I'm building a simple webpage with a navbar and table. The table rows are generated from a simple JS script fetching data asynchronously from a DB.
I decided to use Bootstrap5 for convenience, but i'm stuck because even though the page correctly builds and displays, the modals aren't shown.
Each table row has a final <td> with two buttons: a "discard row" button which removes the row from the table and an update button, which is supposed to show me a modal to edit content and update the DB.
here is what i've got:
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<title>My new page</title>
</head>
<body>
<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateModalLabel">Update</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
my modal
</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>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Oversonic</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="reload()">Reload</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Content -->
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10" id="main-content">
<div class="row my-3" id="header"><h2>Conversation logs:</h2></div>
<div class="row" id="content">
<table class="table table-hover" id="main-table">
<thead>
<tr>
<th scope="col">datetime</th>
<th scope="col">user:</th>
<th scope="col">response:</th>
<th scope="col">data</th>
<th scope="col">location/th>
<th scope="col">buttons</th>
</tr>
</thead>
<tbody id="loaded-content">
<!-- dynamically filled -->
</tbody>
</table>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="resources/loading-spinner.js"></script>
<script src="resources/script.js"></script>
</body>
</html>
as for the js these are the functions:
const table_body = document.getElementById("loaded-content");
function populateTable (file) {
// Populate the table with data from the file's rows
file.forEach(row => {
const new_row = document.createElement("tr");
for (const key in row) {
const new_td = document.createElement("td");
if (key == "timestamp") {
new_td.textContent = new Date(row[key]).toDateString();
} else {
new_td.textContent = row[key];
}
new_row.appendChild(new_td);
}
// Create buttons: update and discard
const btn_update = document.createElement("button");
const btn_discard = document.createElement("button");
const updateButton = addTextandAttributes(btn_update, "<img src=\"resources/cloud-plus-fill.svg\"></img>", {"type":"button", "class":"btn btn-outline-info btn-sm mt-1 me-2", "data-toggle": "modal", "data-target": "#updateModal"});
const discardButton = addTextandAttributes(btn_discard, "<img src=\"resources/x-circle.svg\"></img>", {"type": "button", "class":"btn btn-outline-dark btn-sm mt-1", "onclick": "deleteRow(this)"});
// Create cell to store buttons and append it to each row
const buttonsCell = document.createElement("td");
buttonsCell.appendChild(updateButton);
buttonsCell.appendChild(discardButton);
new_row.appendChild(buttonsCell);
table_body.appendChild(new_row);
});
}
function deleteRow(element) {
try {
const idx = element.rowIndex
var row = element.parentElement.parentElement
console.log(row)
table_body.deleteRow(idx)
} catch (error) {
console.log(`Could not delete row! (${error})`)
}
}
here is a picture of a sample row:
the delete row button works as expected.
the problem here is that when i click the update button nothing happens, even though i added the modal's id to the aria attribute in the buttons (as you can see from the js populateTable function.
Don't forget that the data- attributes have change to data-bs- in Bootstrap 5.
When the button is dynamically created, set the correct attributes:
const updateButton = addTextandAttributes(btn_update,
"<img src=\"resources/cloud-plus-fill.svg\"></img>", {
"type":"button",
"class":"btn btn-outline-info btn-sm mt-1 me-2",
"data-bs-toggle": "modal",
"data-bs-target": "#updateModal"
});
Demo
Modal Form not showing up
This is how you do it with Bootstrap5 and JavaScript only:
let elem = document.getElementById('exampleModalId')
let modal = new Modal(elem)
modal.show()
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
CLick me here button adds the pink block each time its being clicked.
Each pink block has the same menu with edit, delete and run
Everytime a new pink block is added by CLick me here button, it should make a auto click of edit menu of the respective added block so it opens the popup.
So it displays the fullscreen popup.
I have code so far as
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<button id="clickme">Click me here</button>
<script>
$("#clickme").click(function (event) {
$("body").append(`<ul class="list-group">
<li class="list-group-item">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Run</a></li>
</ul>
</div>
<div class="ms-5">A First item<br/>
<small class="text-secondary">This is a first item description</small>
<div>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>`)
})
</script>
</body>
You can use bootstrap own modal functions, specifically .modal(show) to achieve this, and an additional thing to note on this is that you are using same id on all modals which means your edit button will always open the very first modal that you append. to fix that I have added a count variable to make the ids dynamic.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<button id="clickme">Click me here</button>
<script>
let count = 0;
$("#clickme").click(function (event) {
$("body").append(`<ul class="list-group">
<li class="list-group-item">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle${count}" class="edit-btn" role="button" class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Run</a></li>
</ul>
</div>
<div class="ms-5">A First item<br/>
<small class="text-secondary">This is a first item description</small>
<div>
<div class="modal fade" id="exampleModalToggle${count}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file ${count}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>`)
$(`#exampleModalToggle${count}`).modal("show");
count++;
})
</script>
</body>
In the code below, i have an empty list and 2 sortable list for a user to use. The user can sort the buttons within the list and add buttons to the empty list or remove them once added. I am able to add the buttons from the list to the empty list but not being able to understand how to stop the same list item from being duplicated in the empty list when the add button is clicked again or how to remove them once the empty list is filled. Any help would be appreciated :)
HTML -
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.modal-body ul {
list-style-type: none;
}
</style>
</head>
<ul id="dynamic-list" class="link col-lg-12 sub-menu-center" aria-expanded="false" style="text-align: center; float: left">
<li>Append Sorted List here from current tab </li>
</ul>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mt-0" id="addFeatures"> ADD BUTTTONS</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6 ">
<h6 style="text-align: left; font-weight: bold;">CURRENT</h6>
<div class="col-lg-12" style="border: 1px solid grey;height: 100%;text-align: center">
<ul class="existing" style="min-height:100px">
<?php
features();
?>
</ul>
</div>
</div>
<div class="col-lg-6 ">
<h6 style="text-align: left; font-weight: bold;">AVAILABLE</h6>
<div class="col-lg-12" style="border: 1px solid grey; height: 100%;text-align: center">
<ul id="available" class="available" style="min-height:100px" >
<li id="createwindow"><button class="col-lg-12 btn btn-dark" type="button" onclick="createWindow()">Button1</button></li>
<li id="createsource"><button class="col-lg-12 btn btn-dark" type="button">Button2</button></li>
<li id="createencoder"><button class="col-lg-12 btn btn-dark" type="button" >Button3</button></li>
<li id="createschedule"><button class="col-lg-12 btn btn-dark" type="button">Button4</button></li>
<li id="createlayout"><button class="col-lg-12 btn btn-dark" type="button">Button5</button></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer" style="">
<button type="button" class="btn btn-dark" onclick="addFeatures()" data-dismiss="modal">Add</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
JAVASCRIPT -
$('.existing').sortable({
handle: 'button',
cancel: '',
connectWith:'.available',
placeholder: "ui-state-highlight",
dropOnEmpty: true
});
})
$(function () {
$('.available').sortable({
handle: 'button',
cancel: '',
connectWith: '.existing',
placeholder: "ui-state-highlight",
dropOnEmpty: true
});
})
function addFeatures (){
var list_location = document.getElementById ('dynamic-list');
var ul = document.querySelectorAll ('.existing li');
for (let i = 0; i <= ul.length; i++) {
$( ul[i] ).clone().appendTo(list_location);
}
}
Unordered list with id="dynamic-list" is the empty list that user adds buttons to.
Unordered list with id="existing" and id="available" are sortable lists.
Heres a Fiddle of the code - JSFIDDLE
in my Springboot system i need to have a javascript popup message to confirm delete when i select the delete button. However currently it deletes the record without poping up a confirmation message when i click the delete button.Can someone help me to solve this? Thank you.
Subject view Html file
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Nav Bar header code-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript" src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{js/main.js}" src="../static/js/main.js"></script>
<link rel="icon" href="../../favicon.ico"/>
<link rel="stylesheet" href="webjars/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css "/>
<!-- Bootstrap core CSS -->
<link href="../static/css/bootstrap.css" rel="stylesheet" th:href="#{/css/bootstrap.css}"/>
<!-- End of Nav Bar header code-->
<link rel="stylesheet" type="text/css" href="static/css/view.css" th:href="#{/css/view.css}">
<meta charset="UTF-8">
<title>Subject Details</title>
</head>
<body>
<!-- Nav Bar body code-->
<div class="containerr">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
<!-- End of Nav Bar body code-->
<h1>Subject Details</h1>
<h2>Add a new Subject</h2>
<h2>Upload a CSV File</h2>
<div class="container" style="margin-top:30px">
<br><br>
<table border="1">
<thead>
<tr>
<th>Subject Code</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="subject : ${subjectDetails}">
<td th:text="${subject.subjectCode}">Code</td>
<td th:text="${subject.name}">Name</td>
<td>
<a th:href="#{'/subject/edit/' + ${subject.id}}">Edit</a>
</td>
<td>
<a th:href="#{subject/delete/(id=${subject.id})}" class="btn btn-danger delBtn">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="myForm">
<div class="modal fade" id="myModal" 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">
<P class ="alert alert-danger">
Are you sure you want to delete?
</P>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Delete
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../static/js/bootstrap.js" th:href="#{/js/bootstrap.js}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
Subject Controller
#RequestMapping("/subject/delete")
public String deleteProduct(Long id){
subjectDAO.delete(id);
return "redirect:/subject";
}
main.js
$(document).ready(function () {
$('.table .delBtn').on('click',function (event) {
event.preventDefault();
var href=$(this).attr('href');
$('#myModal #delRef').attr('href',href);
$('#myModal').modal();
});
});
You can use an alert to confirm or cancel when you click the delete button.
function myFunction() {
var txt;
if (confirm("Want to delete!")) {
txt = "Deleted!";
// Do the delete when you click ok
} else {
txt = "Cancel!";
// If you click cancel, remove the alert box
}
console.log(txt);
}
I've been learning bootstrap so I've been making a website to practice with it. I have a large red collapsible which displays some text when clicked on. I have a button next to it that moves below the text when clicked on, when I would like it to be on the bottom of the red button, and when the collapsible is clicked on, have the text come between the two buttons. I'm not sure how to move the button below and have the text come between.
EDIT: Bonus points if you can help me figure out why the "X" button on the modal is left of modal texts
https://codepen.io/anon/pen/Nwajax
HTML
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button type="button" class="btn btn-warning">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-success">Button 3</button>
</div>
</div>
<div class="col-sm-8 div2">
<button data-toggle="collapse" data-target="#main_collapse" class="btn-danger" id="coll_button">Collapsible</button>
<div id="main_collapse" class="collapse">
<h1>Some pretty neat random text that just appears when you click on the collapse thing</h1>
</div>
<!--Start modal-->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">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>
<!--End modal-->
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu drop1">
<li class="drop1">Dropdown 1</li>
<li class="drop1">Dropdown 2</li>
<li class="drop1">Dropdown 3</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
</body>
</html>
Here is a codepen (view should be changed to have display on the right/left, bootstrap is a bit weird with it) Thanks for your help.
Joel,
The button next to the collapsible is disappearing from view when you click on the collapsible because the size of the text in between is h1. Change it to a smaller size for eg. h6
<h6>Some pretty neat random text that just appears when you click on the
collapse thing</h6>
Also, the reason why you are seeing the close button on the model before the heading is because of way the markup is constructed. you have the markup for the button first followed by the heading change it to heading first followed by button like this:
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
These is my javascript function i want to append the SEARCHID in my bootstrap model form.
How to i get that id in my bootstrap model form
These is my bootstrap model hidden field
<input type="hidden" name="ID" value="ID" id="searchid">
This is my javascript function in these function i get my id when user click on button
function searchitem(id)
{
var SEARCHID = id;
console.log(SEARCHID);
}
<a class="btn btn-primary text-capitalize ct-js-btnEdit--Agents btn-sm" id="<?php echo $DETAILS->id;?>" value="<?php echo $DETAILS->id;?>" onclick="searchitem(this.id);"><i class="fa fa-pencil"></i> Edit</a>
Try the below solution, comments added to explain the process
//on button click
$("#yourPHPId").on("click", function() {
//get the id from the button element
var searchId = $("#searchid").attr("id");
//append to modal-body (inside p tag if preferred)
$(".modal-body p").append("Hidden field id = " + "<b>" + searchId + "</b>");
});
//on modal hide
$('#myModal').on('hidden.bs.modal', function() {
//empty the modal body (<p>) contents
$(".modal-body p").empty();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<input type="hidden" name="ID" value="ID" id="searchid">
<!-- Trigger the modal with a button !-->
<!-- Insert your PHP functions here as required, they have been taken out in order for the code snippet to work !-->
<a class="btn btn-primary" id="yourPHPId" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil" ></i> Edit</a>
<!-- 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">Modal Header</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>