I'm new to Javascript. I'm trying to implement Ajax system in my coursework in order to update the html table without updating the whole page. My HTML table is basically the table from my database, so Ajax should update the MySQl table, but how can I refresh the actual table on webpage? Another question is can I use different .php files for each action and just call them with ajax? How can I display the forms in the message box for adding the row or should I just redirect to a new page where the will be the forms for a new row?
Here is my table:
<?php
include("audentificate.php");
include ('db.php');
$query = "SELECT * FROM Trains";
$result = mysqli_query($conn, $query);
?>
<html>
<head>
<link href = "style.css" rel = "stylesheet" type = "text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Departures table for workers </title>
</head>
<body>
<div class="table" align="center">
<div style = "background-color:#FFFFFF; padding:20px;"><b>Departures Table for workers</b></div>
<table border="1" align="center" width="700">
<thead>
<tr>
<th>Change row</th>
<th>ID</th>
<th>Train Company</th>
<th>Destination</th>
<th>Time</th>
<th>Platform</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><input id = 'tick' type="checkbox" name="name1" /> </td>
<td><?php echo $row['id']?></td>
<td><?php echo $row['Traincompany'] ?></td>
<td><?php echo $row['Destination'] ?></td>
<td><?php echo $row['Time'] ?></td>
<td><?php echo $row['Platform'] ?></td>
<td><?php echo $row['Date'] ?></td>
</tr>
<?php endwhile ?>
</tbody>
</table>
<p class="message">Logout from userLogout
</div>
</body>
</html>
Related
I have a table like below:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key => $value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td><button type="button" name="button2" >Usuń</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
how to delete item from this list via clicking on the button in last column of the table?
my php:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
thanks for any help, I don't know how to get value by button clicking :/
It seems that your data is gotten from a file, so to get it done you need to go over all these steps in the same php script:
Get data from this file
Parse data with json_decode
Remove an item using unset($data['id'])
Save new data in the same file
Here is an example:
$jsonData = file_get_contents("data.json");
$data = json_decode($jsonData, true);
// here we go
if(isset($_POST['item_key']) && !empty($_POST['item_key'])) {
$data = array_values($data);
$i=0;
foreach($data as $element) {
//check if it's the right item
if(intval($_POST['item_key']) == $element['id']){ // intval only if you are sure id passed in POST[item_key] always integer
unset($data[$i]);
}
$i++;
}
file_put_contents('data.json', json_encode(array_values($data)));
}
$_POST['item_key'] will come after submiting the form in the html, see below.
In your html code, you will need to add the following:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nazwa</th>
<th scope="col">Cena</th>
<th scope="col">Kupujący</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key =>
$value): ?>
<tr>
<td><?php echo $value['id']; ?></td>
<td><?php echo $value['name']; ?></td>
<td><?php echo $value['price']; ?></td>
<td><?php echo $value['buyer']; ?></td>
<td>
<!-- action="#" means you will stay in the same script after submit -->
<form action="#" method="POST">
<input
hidden
type="text"
name="item_key"
value="<?php echo $value['id'];?>"
/>
<input type="submit" value="Remove" />
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
UPDATE
Used unset with array_values after json_decode
Removed header(refre..) since the refresh will be done by form submit to same script
hello i created a datatabe to to load my datas sort them and using the search functionality but it dose not work i tried it been 5 days and i am stuck here i do not know what i am missing or what i done wrong this is my codes if any one can help me i would be thankful
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tbody>
<?php
endwhile;
}
?>
</div>
</table>
these are my bootstrap and scripts that i use
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
also this is my data table code
<script type="text/javascript">
$(document).ready(function() {
$('#datas').dataTable( { "ordering": true } );
} );
</script>
the datatable is created but it does not work like the search or the sorting this is picture of what it likes
i am using bootstrap 4
You are missing <tr> both on your <thead> and <tbody>
<thead style="color:black;">
<th>Product</th>
</thead>
should be:
<thead style="color:black;">
<tr>
<th>Product</th>
<tr>
</thead>
and inside you tbody while:
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td>...</td>
</tr>
<?php endwhile; ?>
You're also closing your </tbody> on every while loop:
</tbody>
<?php
endwhile;
?>
</div> //where are you opening this div? Seems it should not be here
</table>
change to:
<?php endwhile; ?>
</tbody>
</table>
This changes should make your DataTable work as expected.
Malformed html, loops wrong, missing tr tag, etc. Should be something like this.
<div class="table-responsive">
<table id="datas" class="table table-striped table-bordered" style="width:100%">
<thead style="color:black;" >
<th>id</th>
<th>Product</th>
<th>Price</th>
<th>Weight</th>
<th>Image</th>
<th>Type</th>
<th>Type 2</th>
</thead>
<?php
$get = mysqli_query($conn,"SELECT * FROM products;");
?>
<tbody>
<?php
while ($row=mysqli_fetch_array($get)) {
$id=$row['product_id'];
$name=$row['product_name'];
$type2=$row['product_type'];
$weight=$row['weight'];
$price=$row['product_price'];
$type=$row['type'];
$img=$row['img'];
$get1 = mysqli_query($conn," SELECT * FROM money WHERE name='$type' ");
while ($row1 = mysqli_fetch_assoc($get1)):
$p=$row1['price'];
$newprice = $p*$weight;
?>
<tr>
<td><?php echo $id;?></td>
<td><?php echo $name;?></td>
<td>$<?php echo $newprice;?></td>
<td><?php echo $weight;?> g</td>
<td>
<img src="<?php echo $img; ?>" style="height:5rem;width:5rem;border-radius:10px;">
</td>
<td><?php echo $type;?></td>
<td><?php echo $type2;?></td>
</tr>
?>
<?php endwhile; ?>
<?php } ?>
</tbody>
</table>
</div>
When the table is empty, Datatables works and shows no data available ( with pages and search etc..) But when a single row is inserted, Datatables breaks.
I am getting the data to the table using PHP and has used this method in the past and worked fine.
I am assuming that since it works with empty tables, the problem is not with the linking of scripts etc.
Any help would be great, thank you.
I have tried to see if there is a problem within the HTML by correcting tags etc but I cant seem to identify the problem.
<div class="tab-pane active" id="queries">
<hr>
<table id="table1" class="table table-striped ">
<thead>
<tr class="sticky" >
<th>Date of Complaint</th>
<th>Reference</th>
<th>Name</th>
<th>Surname</th>
<th>Subject</th>
<th> </th>
</tr>
</thead>
<?php
//process $result
echo "<tbody>";
while ($row = mysqli_fetch_assoc($queriesresult2)) {
;
echo "<tr>";
echo "<td>".$row['Data1']."</td>";
echo "<td>".$row['Data2']."</td>";
echo "<td>".$row['Data3']."</td>";
echo "<td>".$row['Data4']."</td>";
echo "<td>".$row['Data5']."</td>";
echo "<td><a class=\"btn btn-danger\" href=\"editQUERY?id=".$row['id']."\">Edit</a></td>";
echo "</tr>";
}
echo "</tbody>";
?>
</table>
<hr>
</div>
I see you use bootstrap dataTables. Try this code, it should work and you will have your search bars:
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<div class="tab-pane active" id="queries">
<hr>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($queriesresult2)) { ?>
<tr>
<td><?= $row['data1'] ?></td>
<td><?= $row['data2'] ?></td>
<td><?= $row['data3'] ?></td>
<td><?= $row['data4'] ?></td>
<td><?= $row['data5'] ?></td>
<td><a class="btn btn-danger" href="editQUERY?id="<?= $row['id'] ?>">Edit</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable( {} );
} );
</script>
</body>
</html>
I am working on a payroll project and I am coding with php,html,js and mysql on xampp server. I have a salary sheet code which needs to be printed in pdf format for each employee with their names as the pdf filename.
on running the php page the js code triggers automatically and generates a pdf file with the filename as the employee name alongwith the employee salary data.
Now I need to generate all the employee payslips together in this format but automatically or maybe by clicking a single button.
I have done this project in vb6,ms-access with success but I am not well versed in javascript and now I am stuck here.
Any Help will be appreciated
<HTML>
<HEAD>
<TITLE>Salary Sheet</TITLE>
</HEAD>
<BODY>
<?php
include "connect.php";
$mysql = "SELECT * FROM emp_ndata LIMIT 0,1";
$myquery = mysqli_query($con, $mysql);
if(! $myquery ) {
die('Could not get data: ' . mysql_error());
}
$row = mysqli_fetch_array($myquery, MYSQLI_ASSOC);
?>
<div id="pdata">
<table class="table_for_showdata table_for_showdata_small">
<tr>
<th colspan="2">
Salary Sheet of <b class="table_for_showdata_lg">
<?php echo $row['Emp_Name']; ?></b> : <?php echo $row ['Emp_psmonth']; ?> , <?php echo $row ['Emp_psyear']; ?>
</th>
</tr>
<tr>
<td>Emp-Code</td>
<td><?php echo $row['Emp_ID']; ?></td>
</tr>
<tr>
<td>Designation</td>
<td><?php echo $row['Emp_Designation']; ?></td>
</tr>
<tr>
<th colspan="2">EARNINGS</th>
</tr>
<tr>
<td >Basic</td>
<td><?php echo round($row ['Emp_Basic']).".00"; ?></td>
</tr>
<tr>
<td >House Rent Allowance</td>
<td><?php echo round($row ['Emp_HRA']).".00"; ?></td>
</tr>
<tr>
<th >DEDUCTIONS</th>
<th> </th>
</tr>
<tr>
<td >Professional Tax</td>
<td><?php echo $row ['Emp_Proffessional_Tax'].".00"; ?></td>
</tr>
<tr>
<td >Provident Fund</td>
<td><?php echo $row ['Emp_Provident_Fund'].".00"; ?></td>
</tr>
<tr>
<th > </th>
<th> </th>
</tr>
<tr>
<td class="tab_head_blue"><b>TOTAL PAY : </td>
<td style="font-size:18px"><b>Rs.<?php echo $row ['Emp_Total_Pay'].".00"; ?></b></td>
</tr>
</table>
</div>
<script type="text/javascript">
function printDiv() {
var divToPrint = document.getElementById('pdata');
var popupWin = window.open('', '_blank', 'width=1100,height=400');
popupWin.document.open();
document.title = "<?php echo $row['Emp_Name']; ?>";
popupWin.document.write('<html><head><title>' + document.title + '</title>');
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
<script>
printDiv();
</script>
</BODY></HTML>
I'm a beginner in HTML, PHP, JavaScript and MySQL. I've written a HTML code to enter data into a simple table containing columns "Name" and "Email" in MySQL by employing a seperate PHP file. Then I tried fetching the table contents using PHP. But now I need a little help in updating the data. My code is as follows:
enter code here<!DOCTYPE html>
<html>
<script language="javascript" src="update.js"></script>
<?php
$a=mysqli_connect("localhost","root","","test4");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($a,"select * FROM test");
?>
<table border="1" cellspacing="1" cellpadding"1">
<tr>
<th>pkid</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
for ($i=0; $i<mysqli_num_rows($result); $i++)
{
$row = mysqli_fetch_array($result)
?>
<tr>
<td id="pkid"><?php echo $row['pkid'] ?></td>
<td id="name"><?php echo $row['name'] ?></td>
<td id="email"><?php echo $row['email'] ?></td>
<td><input type=submit onclick="myfunc()" value="View"/></td>
</tr>
<?php
}
?>
</table>
<form action="insert.php" method="post">
<table border="2">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>
<input type="submit" value="Add">
</tr>
</table>
</form>
</html>
<?php
mysqli_close($a);
?>
Here is the Code for Update Data to MYSQL :
Html File :
<title>Listing Details for Update</title>
<?php
include ('config.php');
$tbl_name="user"; // Table name
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="4"><strong>List data from mysql </strong> </td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center"><strong>pkid</strong></td>
<td align="center"><strong>Name</strong></td>
<td align="center"><strong>Email-Id</strong></td>
<td align="center"><strong>Action</strong></td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? echo $rows['pkid']; ?></td>
<td><? echo $rows['name']; ?></td>
<td><? echo $rows['email']; ?></td>
<td align="center">update</td>
</tr>
<?php
}
?>
</table>
</td>
</tr>
</table>
<?php
mysql_close();
?>
Here you can find the way for Update Single Field, Multiple Field Etc.,
http://php.sysaxiom.com/update_data.php
http://php.sysaxiom.com/update_multiple_data.php
If you need to change the contents of the table to have different rows/row data, (and you want to do it live) you will need to use AJAX. jQuery has fairly straightforward ajax usage, so for actual implementation, I would look to that. You'll also need another PHP file that just returns the raw HTML required to fill in the table. Pseudocode (jquery) below:
$.post("url","dataToPost",function(data){$("#table id where I want to put new data).innerHTML=data});
Basically, the $.post() posts the dataToPost to the url and sets the innerHTML of whatever you select to the resultant data.