We Keep Coding

how to add a copy button

I created a bootstrap modal and when I click on the send button I have a result.
I want to add a copy button to copy the text.
My approach does not work. Maybe I forgetten something ?
Thank you
<span class="text-white"><i class="bi bi-chat-left-dots-fill" alt="Open the chat"></i><span>
<div class="modal fade" id="chatModal" tabindex="-1" role="dialog" aria-labelledby="chatModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="chatModalLabel">What do you want to resolve ?</h5>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" id="messageGpt" rows="3" placeholder="Write a message (be patient on the response)"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" id="sendGpt">Send</button>
</div>
<div class="separator"></div>
<div class="card">
<div class="chat-box-message text-start">
<div id="chatGpt-output">
<!-- add copy button -->
<button type="button" id="button-copy" data-bs-toggle="tooltip" title="" class="btn btn-light" data-bs-original-title="Copy" aria-label="Copy"><i class="bi bi-clipboard2"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
below my script to let open the modal when I click on the button send
$output .= '<script defer>';
$output .= '$(document).ready(function() {';
$output .= '$("#sendGpt").click(function() {';
$output .= 'let message = $("#messageGpt").val();';
$output .= '$.post("' . $url . '", {message: message}, function(data) {';
$output .= '$("#chatGpt-output").html(data);';
$output .= '});';
$output .= '});';
$output .= '});';
$output .= '</script>';
echo $output;

How to pass data for Bootstraps modal

Trying to pass the value of my button to my bootstrap modal and modal is not receiving any data. The button has its data inside but using the same variable for the modal is not working. Here is my code.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
?>
<!-- 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"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>
The modal is showing but the <?PHP echo $row["postID"]; ?> is showing me only the last row of the database.

your $row is effective in while loop.
if yout want to use only one modal and reuse, you will need to use ajax when click the button.
or move modal section to inside while loop.
pair modal div's id and button's data-target.
each modal must has different id. in your case, postID will be good identifier.
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal_<?PHP echo $row['postID']; ?>" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<!-- Modal -->
<div id="myModal_<?PHP echo $row['postID']; ?>" 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"><?PHP echo $row["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->
<?PHP
}
}
?>

Try this code:
<?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="container post" style="border: 1px solid black;">
<h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname']; ?></h4>
<p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
<p class="post"><?PHP echo $row['postDetail'];?></p>
<button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
<Br>
</div>
<?PHP
}
}
?>
<!-- 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"><?PHP echo $_POST["postID"]; ?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Modal content-->
</div>
</div>
<!-- Modal -->

Try to change your button to this:
<button class="btn btn-lg btn-block btn-my-button" name="postDetail" data-title="<?php echo $row['postID']; ?>"><?php echo $row['postID']; ?></button>
just put the value that you need with the data-* in the button then add jquery with the class of your button.
jquery:
$('.btn-my-button').click(function(){
$('#myModal .modal-title').text($(this).data('title'));
$('#myModal').modal('show');
});

How to add data to a modal PHP, MySQL Ajax

I wrote this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
Message options
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<table class="table">
<tr>
<td>
<i class="fa fa-inbox"></i> Inbox
</td>
</tr>
<tr>
<td>
<i class="fa fa-envelope"></i> Read
</td>
</tr>
<tr>
<td>
<i class="fa fa-trash"></i> Trash
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header">
Messages
</div>
<div class="card-block">
<table class="table mx-auto" id="table">
<thead>
<tr>
<th>Number</th>
<th>Subject</th>
<th>Time added</th>
<th>More</th>
</tr>
</thead>
</div>
<?php
if((isset($_GET['messages']) && $_GET['messages'] == 'inbox') || !isset($_GET['messages'])) {
$id = $_SESSION['id'];
$messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageDeleted = 0");
}
elseif(isset($_GET['messages']) && $_GET['messages'] == 'read' ){
$id = $_SESSION['id'];
$messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageRead = 1");
}
elseif (isset($_GET['messages']) && $_GET['messages'] == 'trash'){
$id = $_SESSION['id'];
$messages = $database->getDataAsArray("SELECT * FROM messages WHERE userId = $id AND messageDeleted = 1");
}
if(!$messages){
echo '<tr>
<td colspan="3" style="text-align: center">No new messages in the inbox</td>
</tr>';
}
elseif(!isset($_GET['messages']) || $_GET['messages'] == 'inbox'){
foreach ($messages as $message){
$number = $message['id'];
$subject = $message['subject'];
$time_added = $message['time_added'];
if($message['messageRead'] == 0){
echo "<tr class='table-active'><td>$number</td><td>$subject</td><td>$time_added</td></tr>";
}
else{
echo "<tr><td>$number</td><td>$subject</td><td>$time_added</td><td><div class='dropdown'>
<button class='btn btn-secondary btn-sm ' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
<i class='fa fa-ellipsis-v'></i>
</button>
<div class='dropdown-menu dropdown-menu-left' aria-labelledby='dropdownMenu2'>
<a class='dropdown-item' href='#'>Preview</a>
<a class='dropdown-item' href='#'>Mark as read</a>
<a class='dropdown-item' href='#'>Mark as unread</a>
</div>
</div>
</td></tr>";
}
}
}
else{
foreach ($messages as $message){
$number = $message['id'];
$subject = $message['subject']; // needs to become subject new row in database
$time_added = $message['time_added'];
echo "<tr><td>$number</td><td>$subject</td><td>$time_added</td>
<td><div class='dropdown'>
<button class='btn btn-secondary btn-sm ' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
<i class='fa fa-ellipsis-v'></i>
</button>
<div class='dropdown-menu dropdown-menu-left' aria-labelledby='dropdownMenu2'>
<button class='dropdown-item' data-toggle='modal' data-number='$number' data-target='#exampleModalLong'>Preview</button>
<a class='dropdown-item' href='#'>Mark as read</a>
<a class='dropdown-item' href='#'>Mark as unread</a>
</div>
</div>
</td></tr>";
}
}
?>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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>
<script>
$('#exampleModalLong').on('show.bs.modal', function(e) {
var number = $(e.relatedTarget).data('number');
$.ajax({
type: 'POST',
url: 'retrieveData.php',
data: {
'id': number
},
success: function(data){
console.log(data);
},
error: function(error){
alert(error);
}
});
});
</script>
I want to retrieve the data by Id of the message and show a preview on click of the modal. But somehow when I click on my 3 dot menu (which launches the modal) the console won't log the data from retrieveData.php
retrieveData.php
if(isset($_POST['id'])){
$id = $_POST['id'];
$data = $database->getDataAsArray("SELECT * FROM messages WHERE id=$id");
echo $data;
return $data;
}
getDataAsArray function (completly unsafe I know I need to use a prepared statment):
public function getDataAsArray($myQuery){
$this->connection = mysqli_connect($this->host, $this->dbUsername, $this->dbPassword, 'portal');
$query = mysqli_query($this->connection, $myQuery);
$results = array();
while($line = mysqli_fetch_array($query)){
$results[] = $line;
}
return $results;
}
Could anyone please help me to fix my Ajax function (I think the error is there) so I can display the data of a message in my modal?

echo $data; where $data is an array will output only the text "Array" as described by the manual:
Arrays are always converted to the string "Array"; because of this,
echo and print can not by themselves show the contents of an array.
Use json_encode to format the array to JSON (JavaScript Object Notation):
echo json_encode($data);
By the way, you can get rid of that return $data; as it isn't doing anything (assuming given code isn't within a function, and that file isn't included anywhere else in your code with include or require).

Show data based of selected id on modal popup window after click a button php mysql

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

how to make javascript works after php database query?

I am using bootstrap framework, javascript(jquery) and php for my website.
So basic I want to press a button, by pressing it, we query database and return result, the results will be displayed in the bootstrap javascript powered modal: because popup modal is written in javascript and its run after php, the $row is always shown as undefined. I am wondering if there is a way to make php runs before js?
<form action="" method="post">
<input type="text" id="field" name="field">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" name="submit" id="submit">
Launch demo modal
</button>
</form>
<?php
if(isset($_POST['submit'])){
$link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT name FROM mytable" or die("Error in the consult.." . mysqli_error($link));
//execute the query.
$result = mysqli_query($link, $query);
//display information:
if ($row = mysqli_fetch_array($result)) {
?>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?php echo $row["name"] . "<br>"; ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<?php
}
}
?>

You are better off separating this request for data to an AJAX request, and then open the modal in the AJAX success callback.
example:
ajax_handler.php:
if(isset($_POST['submit'])){
$link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link));
//consultation:
$query = "SELECT name FROM mytable";
//execute the query.
$result = mysqli_query($link, $query);
$rows = mysqli_fetch_array($result);
//always wrap a response in an 'object' (associative array)
//more infor here: http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/
echo json_encode(array('result' => $rows));
}
js code:
$("#submit").on('click', function(){
$.post('ajax_handler.php', {submit: true}, function(data){
var data = JSON.parse(data), markup = '';
for(var i = 0; i < data.result.length; i++){
markup = markup + '<div>' + data.result[i] + '</div>';
}
$('myModal').modal('open');
$('.modal-body').append(markup)
});
});
markup:
<button class="btn btn-primary btn-lg" id="submit">