Updating html table with new php variable - javascript

I am trying to refresh my table when the user clicks the button. This is because when the user clicks the button that row will be moved to the next table. (Not in this code example to make it simpler). How the tables are created are with the php code which executes in index code.php. Indexcode.php creates the variable $waiting which is then fetched in index.php and used to populate the table. When the button is clicked a request is sent to indexcode.php which updates the mysql tables. This is why I want to refresh the tables to display the new updated information. I have tried quite a few ways but to no avail.
index.php
<html>
<style>
<?php include 'table.css'; ?>
</style>
<?php include 'indexcode.php'; ?>
<script src="js/jquery.js"></script>
<script>
function orderPacked(val) {
$.ajax({
type: "POST",
url: 'indexcode.php',
data: "packed=" + val,
success: function(){
var container = document.getElementById("yourDiv");
var content = container.innerHTML;
container.innerHTML= content;
}
});
}
</script>
<h1> <center> Warehouse </center></h1>
<p><center>This is for warehouse use</center></p>
<body>
<h2 class="text-waiting">These orders need to be packed</h2>
<body>
<table id="wtable" class="waiting-table" cellpadding="11"><tr>.
<th>Order ID</th><th>Customer</th><th>Vendor</th><th>Address</th>.
<th>Cart_ID</th><th>Cart</th><th>Checked</th></tr>
<?php while($row = mysqli_fetch_row($waiting)){
?>
<tr>
<?php
echo '<td>',$row[0],'</td>';
echo '<td>',$row[1],'</td>';
echo '<td>',$row[3],'</td>';
echo '<td>',$row[7],'</td>';
echo '<td>',$row[2],'</td>';
echo '<td>',"items",'</td>';
?>
<td>
<button onclick="orderPacked('<?php echo $row[0]; ?>')" id="button"
name="packed" >Packed</button>
</td>
</tr>
<?php } ?>
</table>
</body>
</html>
indexcode.php
...
$stmt = $conn->prepare("SELECT * FROM sale WHERE wh_state =
'waiting'");
$stmt->execute();
$waiting = $stmt->get_result();
$stmt = $conn->prepare("SELECT * FROM sale WHERE wh_state = 'packed'");
$stmt->execute();
$packed = $stmt->get_result();
$stmt->close();
// define variables and set to empty values
$orderErr = "";
$order = "";
if (empty($_POST["packed"])) {
$orderErr = "Error";
else {
$orderp = test_input($_POST["packed"]);
// update the state of the sale
$stmt = $conn->prepare("UPDATE sale SET wh_state = 'packed' WHERE id = '{$orderp}'");
$stmt->execute();
$waiting = $stmt->get_result();
$stmt->close();
}
}
...

when creating table in php.make a id for every row.
get the result from ajax response(update row).so you can update the row dynamically with the id with updated data with javascript.
`
<?php
echo "<tr id='id_".$row[0]."'>";
echo '<td>',$row[0],'</td>';
echo '<td>',$row[1],'</td>';
echo '<td>',$row[3],'</td>';
echo '<td>',$row[7],'</td>';
echo '<td>',$row[2],'</td>';
echo '<td>',"items",'</td>';
?>
<td>
<button onclick="orderPacked('<?php echo $row[0]; ?>')" id="button_<?php
echo $row[0]; ?> "
name="packed" >Packed</button>
</td>
</tr>
<?php } ?>`
and also make sure to use unique id's for html elements.

Related

How to edit and delete records of MySQL database without refreshing?

I am new to ajax, I am trying to view, add, edit and delete data of mysql database without refreshing the tab or in other words using ajax on this table:
I have done the view part, *edited but I can not figure out how to edit or delete *. I know it is a very long task, but I have found no solution on the internet.. Thanks in advance
HTML Code:
<html>
<head>
<title>View Data Without refresh</title>
<script language="javascript" type="text/javascript" src="script/jquery-git.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
(function() {
$.ajax({
type: "POST",
url: "display.php",
dataType: "html",
success: function(response){
$("#responsecontainer").html(response);
}
});
});
});
</script>
</head>
<body>
<fieldset><br>
<legend>Manage Student Details</legend>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Status</th>
</tr>
</table>
<div id="responsecontainer" align="center"></div>
</fieldset>
<input type="button" id="display" value="Add New"/>
</body>
</html>
PHP Display Code:
<?php
include("connection.php");
$sql = "select * from tbl_demo";
$result=mysqli_query($db,$sql);
echo "<table class='myTable'>";
while($data = mysqli_fetch_row($result))
{
echo "<tr>";
echo "<td width='13.5%'>$data[0]</td>";
echo "<td width='21%'>$data[1]</td>";
echo "<td width='19.5%'>$data[2]</td>";
echo "<td width='24%'>$data[3]</td>";
echo "<td><span class='edit'>Edit</span> | <span
class='delete'>Delete</span></td>";
echo "</tr>";
}
echo "</table>";
?>
If your connection, sql query and php response is ok and
I want it to be automatically done
means you want run ajax on page loading. Then, Output of php should be at last instead in each iteration.
<?php
include("connection.php");
$sql = "select * from tbl_demo";
$result=mysqli_query($db,$sql);
$output = "<table class='myTable'>";
while($data = mysqli_fetch_row($result))
{
$output .="<tr>";
$output .="<td width='13.5%'>$data[0]</td>";
$output .="<td width='21%'>$data[1]</td>";
$output .="<td width='19.5%'>$data[2]</td>";
$output .="<td width='24%'>$data[3]</td>";
$output .="<td><span class='edit'>Edit</span> | <span
class='delete'>Delete</span></td>";
$output .="</tr>";
}
$output .="</table>";
echo $output;
?>
To make edit/delete you need to pass or redirect page with action to other page named controller. After making changes again you need to redirect index/view data page or use ajax if you don't want to refresh/redirect page.

How to get inputs value using javascript

My script fetchs and insert some data from db and displays to the user then I decied to slightly change my code and add some functionality.For example what if any of textbox is empty so that I have added a java script file that controls this sitituation.Bu I cant get the value of textboxes values from index .php file
this is index.php file
<?php
$records = array();
$db = new mysqli("localhost", "root", "", "app");
if (!empty($_POST)) {
$first = $_POST["first"];
$last = $_POST["last"];
$bio = $_POST["bio"];
$insert = $db->prepare("Insert into people (first,last,bio,created) values(?,?,?,NOW())");
$insert->bind_param("sss", $first, $last, $bio);
if ($insert->execute()) {
header("location: index.php");
}
}
if ($result = $db->query("select * from people")) {
if ($result->num_rows) {
while ($row = $result->fetch_object()) {
$records[] = $row;
}
$result->free();
}
} else {
$db->error;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="sites.js"></script>
<title>Title</title>
</head>
<body>
<?php
if (!count($records)) {
echo "no";
} else {
?>
<table>
<tr>
<td>First</td>
<td>Last</td>
<td>Bio</td>
<td>Created</td>
</tr>
<?php
foreach ($records as $r) {
?>
<tr>
<td><?php echo $r->first; ?></td>
<td><?php echo $r->last; ?></td>
<td><?php echo $r->bio; ?></td>
<td><?php echo $r->created; ?></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
and this is the html markup
<form action="" method="post">
First <input type="text" id="first"><br>
last <input type="text" id="last"><br>
Bio <input type="text" id="bio"><br>
<button id="submit" value="click me!!"></button>
</form>
</body>
</html>
I am trying to get inputs values from index file like this below But it doesnt work this way It returns object
$(document).ready(function () {
$('#submit').click(function () {
var name=$('#last');
alert(name);
});
});
thank in advance
When selecting an element with
$('#last')
you are getting the entire element in return. With that, you can use the val() method to retrieve the elements value:
var name = $('#last').val();
This will not return the value of name field:
var name=$('#last');
You can use like:
var name=$('#last').val();
Also note that, you are missing the name attribute in input fields. Without name attribute you can't get the value in $_POST.
You are referring to the object so you will get the object.
var name=$('#last');
If you need the value you have to ask for it:
var name=$('#last').val();

PHP - pass hidden value into the jquery

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".buttonsPromptConfirmDeleteDepartment").click(function(){
var departmentID = $('input#departmentID').val();
alert(departmentID);
});
});
</script>
</head>
<body>
<?php
//db connection
$query = "SELECT *
FROM department
ORDER BY dept_ID ASC";
$result = mysqli_query($dbc, $query);
$total_department = mysqli_num_rows($result);
if($total_department > 0)
{
?>
<table width="600" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
<tr>
<td width="80" align="center">ID</td>
<td width="300" align="center">Department</td>
<td width="220" align="center">Action</td>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td align="center"><?php echo $row['dept_ID']; ?></td>
<td align="center"><?php echo $row['dept_name']; ?></td>
<td>
<button class="buttonsPromptConfirmDeleteDepartment">Delete</button>
<input type="hidden" id="departmentID" value="<?php echo $row['dept_ID']; ?>" />
</td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
department table
dept_ID dept_name
1 Account
2 Finance
3 Marketing
Assume that my department table only have 3 records.
My requirement is the following:
- Click 1st delete button, show department ID = 1
- Click 2nd delete button, show department ID = 2
- Click 3rd delete button, show department ID = 3
However from my code, I can't meet my requirement. The department ID output that I get is 1 no matter what button I clicked.
Can someone help me?
No need to use a hidden input, you could just use the button tag instead:
<?php while($row = mysqli_fetch_array($result)) { ?>
<tr>
<td align="center"><?php echo $row['dept_ID']; ?></td>
<td align="center"><?php echo $row['dept_name']; ?></td>
<td>
<button type="submit" name="departmentID" class="buttonsPromptConfirmDeleteDepartment" value="<?php echo $row['dept_ID']; ?>">Delete</button>
</td>
</tr>
<?php } ?>
Of course, in the PHP script that does the form processing, access the POST index like you normally would:
$id = $_POST['departmentID'];
// some processes next to it
Note: Don't forget the <form> tag.
Additional Note: Don't forget to use prepared statements:
$sql = 'DELETE FROM department WHERE dept_ID = ?';
$stmt = $dbc->prepare($sql);
$stmt->bind_param('i', $id);
$stmt->execute();
// some idea, use error checking when necessary
// $dbc->error
Change
id="departmentID"
to
class="departmentID" and
Change
<script>
$(document).ready(function(){
$(".buttonsPromptConfirmDeleteDepartment").click(function(){
var departmentID = $('input#departmentID').val();
alert(departmentID);
});
});
to
<script>
$(document).ready(function(){
$(".buttonsPromptConfirmDeleteDepartment").click(function(){
var departmentID = $(this).next('input.departmentID').val();
alert(departmentID);
});
});
first of all dept_id in while loop and you are using same id for all dept..
another thing you can get dept_id upon button click using jquery.. like this
$('.buttonsPromptConfirmDeleteDepartment').click(function(){
dept_id = $(this).next('input').val();
})

Ajax Response working only one time - Shopping cart using PHP [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm working on a Shopping cart. I'm adding product to cart First. Then using Ajax to Change the item Quantity On Change. This process works perfectly on First Change. But when I'm changing the quantity again the portion not refreshed.
Here is coding to display Cart Details
<?php
$session_id = $_SESSION["session_id"];
$query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price from cart as c inner join category as p on c.category_id = p.category_id where c.session_id = '$session_id'";
$select_cart = mysqli_query($mysqli, $query);
if (mysqli_num_rows($select_cart) > 0)
{
?>
<table>
<tr>
<th>Item</th><th>Item Detail</th><th>Quantity</th><th>Price</th><th>Sub Total</th>
</tr>
<?php
while ($result_cart = mysqli_fetch_object($select_cart))
{
?>
<tr id="cart<?php echo $result_cart->cart_id; ?>">
<td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td>
<td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td>
<td width="50" align="center">
<select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" >
<?php
for ($i = 1; $i <= 10; $i++)
{
?>
<option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option>
<?php
}
?>
</select>
</td>
<td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td>
<td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?>
<a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td>
</tr>
<?php
}
?>
</table>
<?php
}
else
{
?>
<p>Cart is Empty..!</p>
<?php
}
?>
And this is the Ajax script using on Same page
<script type="text/javascript">
$('.quantity').change( function()
{
var ID = $(this).attr("id");
var sid=ID.split("quantity");
var New_ID=sid[1];
var QTY = document.getElementById(ID).value;
var URL='updatecart.php';
var dataString = 'id=' + New_ID +'&qty='+ QTY;
$.ajax({
type: "GET",
url: URL,
data: dataString,
cache: false,
success: function(data){
$('#cart'+New_ID).html(data);
alert (data);
}
});
});
</script>
And Here is the code where I'm updating Data into database- updatecart.php.
<?php
include('admin/includes/config.php');
if(isset($_GET['id'])) {
$cart_id = ($_GET['id']);
$item_quantity = ($_GET['qty']);
mysqli_query($mysqli, "update cart set item_quantity = '$item_quantity' where cart_id = '$cart_id'");
// Loop through the products and output HTML for JavaScript to use
?>
<?php
$query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price from cart as c inner join category as p on c.category_id = p.category_id where c.cart_id = '$cart_id'";
$select_cart = mysqli_query($mysqli, $query);
$result_cart = mysqli_fetch_object($select_cart);
?>
<td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td>
<td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td>
<td width="50" align="center">
<select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" >
<?php
for ($i = 1; $i <= 10; $i++)
{
?>
<option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option>
<?php
}
?>
</select>
</td>
<td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td>
<td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?>
<a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td>
<?php
}
?>
I need to automatically calculate the Subtotal Price and Total prices of cart on Changing the Quantity of particular items. I'm new to Ajax.
These are the similar Questions.
1. Ajax form only work one time
2. Ajax Request works only once - code Ignitor
After refering these questions I tried to use something like this $('.quantity').on( "change", "select", function() {But Not getting Result.
Please help me. Do I need to Change the whole coding Structure.
You are changing the DOM after ajax success (using the html() method). The element is replaced with a new one, thus your events are removed.
Also, your other fix is only applying the change on quantity elements that also have been removed. Try something like
$(document).on( "change", ".quantity", function() {}
i have found 2 issues:
1. always use jQuery's document-ready function around DOM related events:
$( document ).ready(function() {
//DOM EVENTS
});
2. your event doesn't work on live-generated DOM elements:
$( '.quantity' ).change( function(){} );
change it to:
$( document ).on('change', '.quantity', function(){} );
this will also add event listeners to DOM elements with the class "quantity" that have been generated after the document loaded for the first time.
This is not the best solution but, at least, it may work as a workaround. Your can do the following in your code:
<script type="text/javascript">
$('.quantity').change(selectChange);
function selectChange()
{
var ID = $(this).attr("id");
var sid=ID.split("quantity");
var New_ID=sid[1];
var QTY = document.getElementById(ID).value;
var URL='updatecart.php';
var dataString = 'id=' + New_ID +'&qty='+ QTY;
$.ajax({
type: "GET",
url: URL,
data: dataString,
cache: false,
success: function(data){
$('#cart'+New_ID).html(data);
$('.quantity').change(selectChange);
alert (data);
}
});
}
</script>
I assume that your "select" is removed and re-appended on the ajax call success callback, so, the events won't be binded more than once.

How to pass PHP value to Javascript and redirect to other page?

Why is it that I cant pass a value from my PHP code to an OnClick function on my button to my javascript function depCheck2()? I would like to redirect it to 2 different pages depending on the value it carries. Could anyone please help me?
<html>
<head>
<?php
$company_id = $_GET['cont'];
$query = "SELECT count(Department_ID) as countDep FROM department WHERE Company_ID=$company_id";
$result = mysql_query($query, $db) or die(mysql_error($db));
$row = mysql_fetch_array($result);
extract($row);
?>
<script>
function depCheck2(x){
var CountRow = '<?php echo "$countDep";?>';
if (CountRow>0){
window.location.assign("editEvent.php?id="+x"");
}
else{
window.location.assign("editEvent.php2?id="+x"");
}
}
</script>
</head>
<body>
<?php
include("config.php");
$company_id = $_GET['cont'];
$query = "select * from event_details where Company_ID=".$company_id." ORDER BY EventDetails_ID DESC";
$result=mysql_query($query, $db) or die(mysql_error($db));
echo "<table border=1 width='1000'>";
echo "<tr><th>Serial Number</th><th>Status</th><th>Event Type</th><th>Date of Event</th><th>End Date</th><th>Details</th></tr>";
while ($row = mysql_fetch_array($result))
{
extract($row);
echo "
<tr>
<td align='center'>$EventDetails_ID</td>
<td align='center'>$Status</td>
<td align='center'>$EventType</td>
<td align='center'>$StartDate</td>
<td align='center'>$EndDate</td>
<td align='center'>
<input type='button' value='Details' class='btn btn-large btn-primary' onClick='depCheck2(\''.$EventDetails_ID.'\')'>
</td>
</tr>
";
}
?>
</table>
</body>
</html>
At first: <?php echo "$countDep";?> contains $countDep which is not defined in PHP.
It is only present in the DB Query but you haven't assigned it to any variable from the $result
Then window.location.assign("editEvent.php?id="+x""); the syntax is wrong.
You have extra quotes at the end.
It should be window.location.assign("editEvent.php?id="+x);
Try this one:
window.location.href ="editEvent.php2?id="+x;

Categories