Title is maybe misleading, but i try you explain it.
My table of users
and When i click on the cross I want open only div with id for example as # in table(id=1, id=2...)
So here is my php code:
$select = "SELECT ... from ...";
$data = mysqli_query($connect, $select);
$count = 0;
echo "<table>
<tr>
<th>#</th>
<th>Name</th>
</tr>";
while ($query = mysqli_fetch_array($data)) {
$counter++;
echo "<tr>
<th>{$counter}</th>
<td>{$query["name"]}</td>
<td><a href='xxx.php?id={$query["id"]}'><i class='ion-edit'></i></a><i class='ion-close-round'></i>
<div class='modal'> //modal have of course display none!
<div class='mContent'>
<div class='mHeader'>
<h2>Modal Header</h2>
</div>
<div class='mMiddle'>
<a href='xxx.php?id={$query['id']}'>delete</a>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div></td></tr>";
}
echo "</table>\n";
Jquery:
$('.ion-close-round').on('click', function () {
$('.modal').css("display", "block");
});
this script "open" every modal of course, but i want open only modal with given id
Thanks for your help all
You can use $.next() to target the .modal that comes after .ion-close-round
$('.ion-close-round').on('click', function () {
$(this).next('.modal').css("display", "block");
});
The selector . is a class selector.
You want to use the ID selector which is #
The ID selector is stricter as only one element on an HTML page can have a given ID, so your ID is 'modal', it would only work on the first element with the ID of modal.
Related
I have two tables in a SQLite DB. The second table contains information about the first.
The first table is loaded in a modal table with buttons to a second modal table in which I would like to load information from the second SQlite table based on the rowID from the first.
I have attempted several things but none of them worked, I assume because JS only gets executed when loading the page, but I can't figure out a way to work around this.
I left comments about the things I tried in the code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal1">View</button>
<!-- begin modal1 -->
<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<table class="table table-bordered table-striped">
<thead>
<tr class="btn-primary">
<th>id.</th>
<th>text1</th>
</tr>
</thead>
<tbody>
<?php
$db = new PDO('sqlite:db.sqlite'); // I know this is unsafe, but it works and it's for a local page.
$qry1 = $db->prepare("SELECT * FROM table1");
$qry1->execute();
$i = 1;
while ($row = $qry1->fetch(PDO::FETCH_ASSOC)) {
$Query1ID[$i] = $row['id']; //If I know what row I'm selecting I could use it to find the correct variable in the next query, but I can only find this with JS and don't know how to combine these.
?>
<tr>
<td onclick="clicked(<?php echo $i; ?>)"><button type="button" class="btn btn-primary mybutton" data-toggle="modal" data-target="#modal2" data-row-val="<?php echo $row['id']; ?>"><?php echo $row['id']; ?></button></td>
<!-- with onclick I can find out what row I clicked and in combination with $Query1ID[$i] I should be able to get the correct variable in the new query. But I don't know how to combine them. -->
<td><?php echo $row['table1_text']; ?></td>
<?php
$i++;
}
?>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- end modal1 -->
<!-- begin modal2 -->
<div class="modal" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<table class="table table-bordered table-striped">
<thead>
<tr class="btn-primary">
<th>id.</th>
<th>Entries for <span id="rowvarfromJS">empty</span></th> <!-- I can call the variable but can not use it in the query. -->
</tr>
</thead>
<tbody>
<?php
$db = new PDO('sqlite:db.sqlite');
//function if clicked = 3 newID = $Query1ID[3] //something like this would solve my problem
$newID="$Query1ID[10]";
echo $newID;
echo "<script>var javascriptVar = '199';</script>";
echo "<script>if (nr == 2){alert('execute php?')}</script>";
$phpVar = "<script>document.writeln(javascriptVar);</script>";
echo "phpvar=$phpVar";
//$qry2 = $db->prepare("SELECT * FROM table2 WHERE fortable1ID = $newID"); //This works, if only I could use the JS var from the clicked function to find the correct variable.
//$qry2 = $db->prepare("SELECT * FROM table2 WHERE fortable1ID = $phpVar"); //This does not work even though $phphvar contains the correct value.
$qry2 = $db->prepare("SELECT * FROM table2 WHERE fortable1ID = '199'");
// I need this static 199 to be $row['id']; from the previous query.
// I have attempted using rowvarfromJS for that but that doesn't work.
// I can use AJAX and complete the query on another page, but I do not know how to use JS reply to generate a new table.
$qry2->execute();
$i2 = 1;
while ($row = $qry2->fetch(PDO::FETCH_ASSOC)) {
?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['table2text']; ?></td>
<td><?php echo "$Query1ID[4]"; ?></td> <!-- I can use this variable in a query, but I do not know how to select the correct one.-->
</tr>
<?php
$i2++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!-- end modal2 -->
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
//This was an attempt to get the rowID with JS. It works, but I can't use the variable in the query.
$(function () {
$(".mybutton").click(function () {
var my_row_value = $(this).attr('data-row-val');
$("#modal2").attr('data-row-value',my_row_value );
alert('My Row Value '+my_row_value ); //If I could only use this value in the query.
let rowvarfromJS = my_row_value;
document.getElementById("rowvarfromJS").innerHTML = rowvarfromJS;
})
});
//Gets clicked row number. If I know the clicked row number then I should be able to find the correct php variable for the next query, but I don't know how to do this.
function clicked (nr) {
let rcfromJS = nr;
console.log('Clicked from row: ' + rcfromJS);
}
//I have also attempted using AJAX to pass the JS variable to another PHP and get the result back, which works, but the result is in JS and I don't know how to create a table from that.
</script>
</body>
</html>
Most attempts are written as comments in the code. Aside from those I also tried using Ajax, but the problem with that is that I am using a JS variable to get a JS variable and I don't know how to use that to populate the modal table.
var data = {
'var1': "199",
'var2': "test."
};
$.ajax({
type: 'post',
url: 'executesecondquery.php',
data: data,
timeout: 50000
}).done(function(response) {
console.log(response); //can I use this response to populate the second table?
}).fail(function(error) {
// uh-oh.
});
executesecondquery.php
<?php
$db = new PDO('sqlite:db.sqlite');
$qry2 = $db->prepare("SELECT table2text FROM table2 WHERE fortable1ID = '$var1'");
$qry2->execute();
$i2 = 1;
while ($row = $qry2->fetch(PDO::FETCH_ASSOC)) {
echo $row['table2text'];
$i2++;
}
?>
i have to show and hide a div after click on a text in a span. I have many generated from a loop and i would like click sur every #mod and show me the hidden div. But the hidden div is showed just if i click on the first #mod. How can i make all the #mod a I make this code, but it work just for only one and not for all. Where i m wrong?
<tbody>
<form action="#" method="post" enctype="multipart/form-data" name="actionpost">
<?php
global $wpdb;
$articles = $wpdb->get_results( "select * from {$wpdb->prefix}mic_articles");
?><?php
foreach ($articles as $article){
$url = get_home_url() . "/" . strtolower( str_replace( " ", "-", normalize( $article->titre ) ) );
echo "
<tr class='alternate' valign='top'>
<th class='check-column' scope='row'> <input type='checkbox' name='article[]' value='$article->id'></th>
<td class='column-columnname'><a href='$url'><strong>$article->titre</strong></a>
<div class='row-actions'>
<span id='mod'><a href='#'>Modifier</a> </span> | <span style='color:red' class='supp'>Corbeille</span>
</label>
</div>
</td>
<td class='column-columnname'></td>
</tr>";
}
?>
<?php
?>
</tbody>
</table>
<script>
$('#mod').click(function() {
$('#modification').toggle("slide");
});
</script>
You need the handler to attach the the event. try add the ready
$( document ).ready(function() {
$('#mod').click(function() {
$('#modification').toggle("slide");
});
});
Id in span tag, it has to be unique. You can use a class instead.
<span class="mod">...</span>
$( document ).ready(function() {
$('.mod').click(function() {
$('#modification').toggle("slide");
});
});
I'm new to php and I have this problem.
First I did display the inputed message using select and while loop in table. Then I want a functionality that can reply by getting the name or id of the selected row by clicking a button that shows a modal.
The problem is only the first row are showing the modal. The rest of the rows aren't displayed. I've already searched for the answers and found out that modal is using the same id to display.
I'm still a student and sorry for the messy codes.
`
INBOX
while (($row = mysqli_fetch_array($query))) {
$idd = $row['id'];
$content = $row['content'];
$content_msg = $row['content_msg'];
$to_msg = $row['to_msg'];
$date_created = $row['date_created'];
$from_msg = $row['from_msg'];
$query1 = mysqli_query($db, "SELECT profile_pic FROM users WHERE
first_name = '$from_msg' ")
or die (mysqli_error($db));
while ($rows = mysqli_fetch_array($query1)) {
$pic = $rows['profile_pic'];
echo "
<table id = 'tbl_inbox' border = '0'>
<tr>
<td rowspan = '9' width = '90px'>
<center> <img src = '$pic' width = '80px' height = '80px' id =
'inbox_pic'> </center>
</td>
<td class = 'td_name' colspan = '4'>
<b>$from_msg</b>
</td>
<td id = 'td_date'>
<b>$date_created</b>
</td>
</tr>
<tr>
<td rowspan = '3' colspan = '5' id = 'td_msg'>
$content_msg
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<!-- This is the looped button
<td colspan = '5' id = 'td_action'> <button id ='reply$idd' name =
'btn' value = 'reply$idd'> $idd </button> </td>
</tr>
</table>
";
//
?>
<div id="myModal<?php echo $idd; ?>" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>This is modal ID <?php echo $idd; ?></h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal<?php echo $idd; ?> = document.getElementById('myModal<?
php echo $idd; ?>');
// Get the button that opens the modal
var btn<?php echo $idd; ?> = document.getElementById('reply<?php
echo $idd; ?>');
// When the user clicks the button, open the modal
btn<?php echo $idd; ?>.onclick = function() {
modal<?php echo $idd; ?>.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal<?php echo $idd; ?>) {
modal<?php echo $idd; ?>.style.display = "none";
}
}
</script>
<?php
}}
?>
<script>
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
`
First things first.. Why are you creating a <table> everytime it runs the while loop?
But I think that the problem that your having is because of the way you try to toggle a Modal..
Every item is having one single Modal Toggle function but it's better to make a generic function like:
function toggleModal(id) {
document.queryselector(`#${id}`).classList.toggle('modal-active');
}
Then make a button like:
<button onclick="() => toggleModal(testModal1)">TEST</button>
To explain what this exactly does:
The only thing you're actually doing is toggling a class with display: unset so that it get's showed. So if it's already inside it's classes it will get removed from it, otherwise it gets added to the classes.
If this is not the case, try looking inside your console (F12) and watch for errors when pressing one of the not working buttons
In a table I display several links whose value (user id) is extracted from a database. By clicking on the link appears a modal pop up in which I would like to pass the selected value.
Here is the table:
<table>
<tr>
<td>Username</td>
<td>Id</td>
</tr>
<?php
include ‘db_connection.php’;
$sql = "SELECT * FROM users";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $row[userID]?></td>
<td>
<div id='basic-modal'>
<a href="?id=<?php echo $row[userID]?>" class='basic'>Show</a>
</div>
</td>
</tr>
<?php } ?>
</table>
If I click on the link Show appears the modal pop up:
<div id="basic-modal-content">
<?php
if(isset($_GET[‘userID’])){
$userID = $_GET[‘userID’];
echo ‘UsuerID: ‘ .$userID;
}
?>
</div>
This is the script I used
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
});
Since I have little familiarity with the jQuery framework I would like to ask you how can I pass the selected value within the modal and then use it.
jquery allows you to use the .data() attribute
<div id='basic-modal'>
<a href="?id=<?php echo $row[userID]?>" data-mydata="<?php echo $row[userID]?>" class='basic'>Show</a>
</div>
and then u can retrieve data from 'data-mydata' attribute:
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content')
.text($(this).data('mydata'))
.modal();
return false;
});
});
Hello guys I'm trying to delete a record/row from my table using a modal delete confirmation. This is what I've tried so far:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
</script>
<table class="table table-bordered">
<?php
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
<tr>
<td><a href="project-detail.php?code=<?php echo $project; ?>">
<?php echo $project; ?></a></td>
<td><?php echo $desc; ?></td>
<td><a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white">
</i>
</a></td>
<td><a href="#<?php echo $project; ?>"
id="<?php echo $project; ?>"
data-id="<?php echo $project; ?>"
class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i></a></td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
</table>
But the problem is, when I am about to delete the last row the one that gets deleted is the first row. Why is it like that? Any ideas? Help is much appreciated. Thanks.
The problem lies in the modal generation and passing the $project value.
You are using a loop as
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
And inside the above loop you are generating the modals so basically you will have many modals which are equal to the num of rows in the query.
Now all of them are having the same "id" i.e. "dialog-example" and once you click on the delete it pop ups the first modal from the DOM and is deleting wrong data.
Solution
For each modal you give the id as
<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">
Then in the blow code
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
Get the id of the element using attr("id") and append this at the end of
"dialog-example_"+{id you received}
The same thing you need to do for the hide modal as well.
UPDATE ON HOW TO DO IT
Give the modal div id as
<div class="modal hide fade" id="dialog-example_<?php echo $project; ?>">
Then in the click function to as
$(".btn-show-modal").click(function(e){
e.preventDefault();
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('show');
});
Change
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
to
<a href="delete-project.php?code=<?php echo $project; ?>"
class="btn btn-danger" id="<?php echo $project ;?>">Yes<a>
AND finally
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
to
$(".btn btn-danger").click(function(e) {
var id = $(this).attr('id');
var modal_id = "dialog-example_"+id;
$("#"+modal_id).modal('hide');
});
because you generate modal for every row this is wrong !
and show modal(first modal show) this is wrong!(this delete first row)
create one modal and set parameter with jquery e.g
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
$("#dialog-example #btn-delete").attr('href','delete-project.php?code='+$(this).attr('data-id'));
});
good luck
On topic
Problem is you have multiple modals. But select it on 1 id. So jQuery will select the first value.
A solution would be to put the delete url in an hidden input field. Then when the user clicks the open delete modal you select the url and put it in the a tag.
Example time
JavaScript Part
$(function(){
$(".btn-show-modal").click(function(e){
// put the right url in the delete
$("#dialog-example .delete-url").attr('href', $(this).attr('data-delete-url');
$("#dialog-example").modal('show');
return e.preventDefault();
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
PHP part
I assume $stmt is prepared etc
<ul>
<? foreach($stmt->fetchAll() as $record) : ?>
<li>
delete
</li>
<? endforeach; ?>
</ul>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a class="delete-url btn btn-danger">Yes<a>
</div>
</div>
Code explaind
It is not handy to put an bootstrap modal in an foreach/for/while unless you change the id. But then again lot of duplicate code.
What the code does it changes the delete-url on the fly depending on which a the user clicked
Off topic
I highly recommend using the foreach for your iteration of the data records instead of a for loop.
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){ /** code **/}
would be
$stmt2 = $conn->prepare( "SELECT project_code, description
FROM tblprojects" );
$stmt2->execute();
foreach($stmt2->fetchAll() as $record){}
Because when you open the modal, it open the first #dialog-example div.
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$(this).parent().find("#dialog-example").modal('show');
});