Can anyone suggest some alternative solution for this problem.
I've made a popup form which i use css and javascript to trigger the display to none or flex every time i click into a specific button which is great. But this method seems to not work on a table as you can see below i've done a simple query which i just fetch some of the essentials and included some buttons to use to trigger the popup form.
PHP/HTML CODE
<tbody>
<?php
$res=mysqli_query($link,"SELECT CONCAT(c.firstname, ' ', c.lastname) AS fullname, c.* FROM user_registration c");
while($row=mysqli_fetch_array($res))
{
echo "<tr>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?> <img src="<?php echo $row["image"]; ?>" height="100" width="100"> <?php echo "</td>";
echo "<td>"; echo $row["fullname"]; echo "</td>";
echo "<td>"; echo $row["username"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; echo $row["id"]; echo "</td>";
echo "<td>"; ?> <button class="btn btn-success" style="width: 100%">Accept</button><?php echo "</td>";
echo "<td>"; ?> <button class="btn btn-danger" style="width: 100%">Decline</button><?php echo "</td>";
echo "<td>"; ?> <button class="btn btn-success" style="width: 100%">View Message</button><?php echo "</td>";
echo "</tr>";
}
?>
</tbody>
JAVASCRIPT CODE
document.getElementById("declineB").addEventListener("click", function(){
document.querySelector(".popup3").style.display = "flex";
})
document.getElementById("closeDecB").addEventListener("click", function(){
document.querySelector(".popup3").style.display = "none";
})
When you have multiple elements with id declineB, document.getElementById("declineB") can actually only get the first element with id declineB. The effect you want will only appear when an element whose id is declineB. When click others, no click event will be triggered.
When you use css class, you can add click event to every html element of same class:
let elements = Array.from(document.getElementsByClassName('spacer'))
for (let element of elements) {
element.addEventListener('click', ...)
}
Related
I am not able to update one column field. Please Suggest me what is the wrong thing in my code
index.php
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db_name = "logistics";
$lastId="";
//create connection
$con = mysqli_connect($host, $user, $pass, $db_name);
$result = mysqli_query($con,"SELECT * FROM notification");
?>
<div class="table-inner-wrapper">
<h5 class="text- blll"> Active Alerts </h5>
<table class="table table-hover table-striped">
<tr class="t_head">
<th>ID </th>
<th>Forklift ID</th>
<th>Timestamp</th>
<th>Duration</th>
<th>Alert Details</th>
<th></th>
<th>Remark</th>
<th></th>
</tr>
<?php
while($row = mysqli_fetch_array($result)){
echo "<form action='' id='remarks' method='post'>";
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['forklift_id'] . "</td>";
echo "<td>" . $row['noti_start'] . "</td>";
echo "<td>" . $row['duration'] . " hr</td>";
echo "<td>" . $row['alert_details'] . "</td>";
echo "<td><i class='email' id='". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='".$row['id']."'> ".$row['remarks']." </textarea></td>";
echo "<td><input type='button' class='btn btn-info remark' value='submit' id='".$row['id']."'></td>";
echo "</tr>";
echo "</form>";
}
?>
</table>
</div>
<script type="text/javascript">
$(() => {
$(document).ready(function(){
$(".remark").on('click',function(e){
e.preventDefault();
var id = $(this).attr('id');
var remarks = $("textarea.remarks").val();
// alert(remarks);
// alert(id);
$.ajax({
url:'remark.php',
method:'POST',
data: {id: id, remarks: remarks},
success:function(data){
alert(data);
// return data;
}
});
});
});
})
</script>
remark.php
<?php
$conn = new mysqli('localhost', 'root', '', 'logistics');
$remarks = $_POST['remarks'];
echo $remarks;
$id = $_REQUEST['id'];
echo $id;
$sql = "UPDATE notification SET remarks='".$remarks."' WHERE id='".$id."' " ;
if($conn->query($sql)===TRUE){
echo "DATA updated";
}
?>
I am trying to update remarks column value on submit based on row id but it's updating only a first row of column value and if i click on the remaining rows it is not updating the remarks value.
A couple things:
I would change $id = $_REQUEST['id']; to $id = $_POST['id'];
Secondly, your <form> tag is inside your while loop which means you are echoing out a new form on every iteration. All of the forms will have the same id. This will cause you problems and fits the type of behavior that you are describing. Remove the <form> tags from the inside of the loop like so:
echo "<form action='' id='remarks' method='post'>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['forklift_id'] . "</td>";
echo "<td>" . $row['noti_start'] . "</td>";
echo "<td>" . $row['duration'] . " hr</td>";
echo "<td>" . $row['alert_details'] . "</td>";
echo "<td><i class='email' id='". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='".$row['id']."'> ".$row['remarks']." </textarea></td>";
echo "<td><input type='button' class='btn btn-info remark' value='submit' id='".$row['id']."'></td>";
echo "</tr>";
}
echo "</form>";
This line:
var remarks = $("textarea.remarks").val();
will only give you the value of the first textarea with the class remarks. You need to access the remarks from the textarea associated with the button instead. You do have a problem though that you have multiple elements with the same id, so you need to fix that first. Try changing this code:
echo "<td><i class='email' id='". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='".$row['id']."'> ".$row['remarks']." </textarea></td>";
to
echo "<td><i class='email' id='e". $row['id'] ."'> <i class='fa fa-inbox fa-2x'> </i> </i> </td>";
echo "<td><textarea class='remarks' id='t".$row['id']."'> ".$row['remarks']." </textarea></td>";
Now your textarea field has a unique id which is still related to $row['id']. So in your event code, you can write:
var remarks = $("#t" + id).val();
to get the value of remarks associated with that button.
I've this code in php, and it retrieve all the value I've in my database, and I want the user not be able to choose or tamper with the one that has expired date,
please can you help me ?
my code below only show u the word 'Expired' and 'Not Expired' on the web, since I'm only Echoing it.
I want to just disable the check box, and not let the user be able to change anything like the statues or remove the job.
please can you help me ?
$result = mysqli_query($dbCIE,$sqlCommand) or die(mysql_error());
echo "<form action='JobsLists.php' method='post'>";
while($row = mysqli_fetch_array($result))
{
$exp_date = $row['DueDate'];
$today_date = date('Y/m/d');
$exp=strtotime($exp_date);
$td=strtotime($today_date );
if($td>$exp){
echo"Expiered";
}else{
echo"NOT Expiered";
}
echo "<tr>";
echo "<td> <input type='checkbox' id='myCheck' name='JobId[]' value='". $row['JobId'] ."' /> </td>";
echo "<td align=center>" . $row['SSU'] . "</td>";
echo "<td align=center>" . $row['JobName'] . "</td>";
echo "<td align=center> " . $row['Description'] . "</td>";
echo "<td align=center>" . $row['DueDate'] . "</td>";
echo "<td>"."<select name='JobStatus[".$row['JobId']."]'>";
if($row['JobStatus'] == "InProgress"){
echo "<option value='InProgress' selected>In Progress</option>";
echo "<option value='Completed'>Completed</option>";
} else {
echo "<option value='InProgress'>In Progress</option>";
echo "<option value='Completed' selected> Completed </option>";
}
echo "</select>" . "</td>"; // need to be worked on..
echo "</tr>";
}
"</table>";
?>
Why not just not print it out?
if (!$td->exp)
echo "<td> <input type='checkbox' id='myCheck' name='JobId[]' value='". $row['JobId'] ."' /> </td>";
It's better to just not show a button or input than to disable it sometimes. Inputs can be disabled with the DISABLED keyword
<input type="checkbox" name="foo" DISABLED>
<html>
<body>
<form action="index.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="search" />
</form>
</body>
</html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: middle;
}
</style>
<script type="text/javascript">
function showHide(id) {
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
</script>
</head>
<body>
<table border="1">
<?php
mysql_connect("localhost","root","") or die("could not connect");
mysql_select_db("vauban") or die("could not find database");
$output = '';
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM info3 WHERE FirstName LIKE '%$searchq%' OR LastName LIKE '%$searchq%'") or die("could not search!");
$count = mysql_num_rows($query);
if($count == 0) {
$output = 'There was no search results!';
}else{
while($row = mysql_fetch_array($query)) {
$id = $row['Id'];
echo"<td>". $row['Id']."</td>";
echo"<td>". $row['FirstName']."</td>";
echo"<td>". $row['LastName']. "</td>";
echo"<td>". $row['PhoneNumber']. "</td>";
echo"<td> <button onclick=\"showHide('id'); return false;\">". $row['CompanyName']. "</button></td>";
echo"<td> <a href ='view.php?Id=$id'>Edit</a>";
echo"<td> <a href ='del.php?Id=$id'><center>Delete</center></a>";
echo "</tr>";
$CompanyName=$row['CompanyName'];
}
}
}
?>
</table>
<script type="text/javascript">
function showHide(id) {
$CompanyName=$row['CompanyName'];
if ($CompanyName = "Company A") {
<?php
echo "<table id='test1' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '1'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
</table>
}
else if ($CompanyName = "Company B") {
<?php
echo "<table id='test2' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '2'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
</table>
}
else if ($CompanyName= "Company C") {
<?php
echo "<table id='test3' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '3'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
</table>
}
else if ($CompanyName = "Company D") {
<?php
echo "<table id='test4' style='width:50%' align='right'>";
include("db.php");
$result=mysql_query("SELECT * FROM company where no = '4'");
while($test = mysql_fetch_array($result))
{
$id = $test['No'];
echo "<th rowspan='1'>Company name</th>";
echo "<td colspan='3'>". $test['CompanyName']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Location</th>";
echo "<td colspan='3'>". $test['Location']."</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Found</th>";
echo "<td colspan='3'>". $test['Found']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Website</th>";
echo "<td colspan='3'>". $test['Website']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th rowspan='3'>Contact</th>";
echo "<th>Email</th>";
echo "<td colspan='3'>". $test['Email']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Phone</th>";
echo "<td colspan='3'>". $test['Phone']. "</td>";
echo "</tr>";
echo "<tr>";
echo "<th>Fax</th>";
echo "<td colspan='3'>". $test['Fax']. "</td>";
echo "</tr>";
echo "<br>";
}
mysql_close($conn);
?>
}
else {
alert("No such company exist...");
}
}
</script>
</body>
</html>
My table:
and what I want to display when I click on one of the button:
I just want to display another table when I click on one of the column and it has to be accurate (e.g. click Company C to get information of Company C).
Tried using function() ---> fail
Tried using if else ---> fail
You may want to use AJAX in order to achieve what you want.
Reminder: mysql_* is already deprecated, so you should consider mysqli_* instead.
First is, you need to list down your data in a table from info3 table, assuming that company table has CompanyName column in order to connect it to your info3 table's CompanyName column.
echo '<td> <button class="company_button">'.$row['CompanyName'].'</button></td>';
And create a div space for returned data of the clicked button.
<div id="company_desc_div"></div>
Then we can create a script using jQuery (javascript library) which you can download here.
$(document).on("click", ".company_button", function(){ /* WHEN A BUTTON IS CLICKED */
var company_desc = $(this).text(); /* GET WHAT COMPANY IS IT */
$.ajax({ /* START AJAX */
type: "POST", /* METHOD TO USE TO PASS THE DATA */
url: "get_company_info.php", /* FILE WHERE WE WILL PROCESS THE PASSED ON DATA */
data: { "company_desc": company_desc }, /* DATA TO BE PASSED ON */
success: function(result){ /* GET THE RETURNED DATA FROM get_company_info.php */
$("#company_desc_div").html(result); /* PUT THE RETURNED DATA TO company_desc_div DIV */
}
});
});
As you might notice, we pass the data of the clicked button to get_company_info.php, so lets create that file:
<?php
/* ESTABLISH YOUR CONNECTION */
$con = new mysqli("localhost", "root", "", "vauban");
/* CHECK CONNECTION */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
if($stmt = $con->prepare("SELECT CompanyName, Location, Found, Website, Email, Phone, Fax FROM company WHERE CompanyName = ?")){ /* PREPARE THE STATEMENT */
$stmt->bind_param("s", $_POST["company_desc"]); /* BIND THE PASSED ON DATA TO THE SELECT QUERY */
$stmt->execute(); /* EXECUTE THE QUERY */
$stmt->bind_result($companyname, $location, $found, $website, $email, $phone, $fax); /* BIND THE RESULT TO THESE VARIABLES */
$stmt->fetch(); /* FETCH THE RESULTS */
/* WHAT YOU ECHO IS WHAT WILL BE RETURNED TO THE AJAX REQUEST */
echo '<table>
<tr>
<th>Company name</th>
<td colspan="3">'.$companyname.'</td>
</tr>
<tr>
<th>Location</th>
<td colspan="3">'.$location.'</th>
</tr>
<tr>
<th>Found</th>
<td colspan="3">'.$found.'</td>
</tr>
<tr>
<th>Website</th>
<td colspan="3">'.$website.'</td>
</tr>
<tr>
<th rowspan="3">Contact</th>
<th>Email</th>
<td>'.$email.'</td>
</tr>
<tr>
<th>Phone</th>
<td colspan="3">'.$phone.'</td>
</tr>
<tr>
<th>Fax</th>
<td colspan="3">'.$fax.'</td>
</tr>
</table>';
$stmt->close();
} /* END OF PREPARED STATEMENT */
?>
What we echo from this file is what will be returned to the AJAX request.
So i am trying to display data in sql server using PHP. I am using a sortable library i found online and this is my code:
echo "<table id='report' class='sortable'>";
echo "<thead><tr>";
echo "<th>A</th>";
echo "<th>B</th>";
echo "<th>C</th>";
echo "<th>D</th>";
echo "<th>E</th>";
echo "<th>F</th>";
echo "<th>G</th>";
echo "<th>H</th>";
echo "<th>I</th>";
echo "</tr></thead>";
echo "<tbody>";
for($i=0; $i<$tablerows; $i++)
{
echo "<tr>";
echo "<td>".$result[$i]['A']."</td>";
echo "<td>".$result[$i]['B']."</td>";
echo "<td>".$result[$i]['C']."</td>";
echo "<td>".$result[$i]['D']."</td>";
echo "<td>".$result[$i]['E']."</td>";
echo "<td>".$result[$i]['F']."</td>";
echo "<td>".$result[$i]['G']."</td>";
echo "<td>".$result[$i]['H']."</td>";
echo "<td>".$result[$i]['I']."</td>";
echo "<td><div class='arrow'></div></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='5'>";
echo "<div id='nestedAccordion'>";
echo "<h2>COLUMN 1 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 2 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 3 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 4 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "<h2>COLUMN 5 ELABORATE</h2>";
echo "<div>";
echo "</div>";
echo "</div>";
echo "</td>";
echo "</tr>";
When my page is loaded, it can be sorted by the A-I headings in <th> tag. As you can see, in my 'for' loop my last tag has an arrow. I want that so if the user wants more information about the row, he can view that by clicking that arrow, and information that will be displayed is in: <td colspan='5'>
Here is the javascript/jquery:
$(document).ready(function () {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
var parentDivs = $('#nestedAccordion div'),
childDivs = $('#nestedAccordion h3').siblings('div');
$('#nestedAccordion h2').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$('#nestedAccordion h3').click(function () {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
});
The question and the problem i have is only either sortable for table or arrow will work. When i load the page, and i click on the arrow to view more information i can view it, but if i sort afterward, the data under the arrow is taken as its own row rather than part of the row it was selected from.
If i sort at start, and then click on arrow, the row below is hidden. I think the problem is in this chunk of code:
$(".arrow").click(function(){
$(this).parents("tr").next("tr").toggle();
$(this).toggleClass("up");
});
Since the next tr is for colspan? But how do i fix it?
I want to allow clicking on a whole host table in foreach loop in codeigniter. For some reason, the code does not work for me. Do you have an idea how to fix it?
Thanks in advance
<table class="table table-hover">
<thead>
<tr>
<th>השולח</th>
<th>נשלחה בתאריך</th>
<th>נושא ההודעה</th>
<th>תוכן ההודעה</th>
</tr>
</thead>
<tbody>
<?php foreach ($messages->result() as $row)
{
?>
<script type="text/javascript">
function newDoc() {
window.location.assign("<?php echo base_url();?>/read_messages/<?php echo $row->id;?>")
}
</script>
<?php
echo "<tr>";
echo "<td>".$row->author. "</td>";
echo "<td>".$row->posted_in. "</td>";
echo "<td>".$row->title. "</td>";
echo "<td>".$row->body. "</td>";
?>
onclick="newDoc()";
<?php
echo "</tr>";
}
?>
</tbody>
</table>
</div>
As I understand your question you want fetch click on every row. then your code should be as:
Your Script should be out side
<script type="text/javascript">
function newDoc(id) {
window.location.assign("<?php echo base_url();?>/read_messages/"+id);
}
</script>
<?php foreach ($messages->result() as $row)
{
echo "<tr onclick='newDoc(".$row->id.")'>";
echo "<td>".$row->author. "</td>";
echo "<td>".$row->posted_in. "</td>";
echo "<td>".$row->title. "</td>";
echo "<td>".$row->body. "</td>";
echo "</tr>";
}
?>
You have to assign onClick="newDoc" to html element like
<table onClick="newDoc()">
You have to issues, one your newDoc() function is not assigned to element and two you want create the newDoc function once and only once passing in the $row->id so that its affect changes for each <tr>
<script type="text/javascript">
function newDoc(rowId) {
window.location.assign("<?php echo base_url();?>/read_messages/" + rowId);
}
</script>
<?php
foreach ($messages->result() as $row) {
echo "<tr onlick='newDoc(<?php echo $row->id ?>)'>";
echo "<td>".$row->author. "</td>";
echo "<td>".$row->posted_in. "</td>";
echo "<td>".$row->title. "</td>";
echo "<td>".$row->body. "</td>";
echo "</tr>";
}
?>