Thank you. Can you help me to make it in that page itself by using ajax. So that If I click on check-out button the result will display there-itself. I have checked below URL for the same https://stackoverflow.com/questions/34342982/ajax-parse-url-to-pass-variable-to-mysql-query but could not find where to add this.
To make an ajax request as follows :
$(document).ready(function(){
$("#link").click(function(){
var url=$(this).attr("href");
var id=url.substr(url.search("id=")+3);
$(this).attr('href',"#");
$.ajax({
url:"update.php",
method:"GET",
data:{id:id},
success:function(data){
$('#display').html(data);
}
})
})
})
- Get
hrefattribute when user click on checkout button. - search for
id=inhrefattribute. search function will return index ofito get position of id value use index of i +3 . - use
substr()function. it takes index as argument .so pass index returned by search funtion +3 intosubstr(). - set attribute
href="#"for checkout button. - make ajax call.
since i gave an idlinkto checkout button.
Don’t forget to remove html tags like<html> <head> <title>etc. fromupdate.php.
I added a<div id="display"></div>inside curd.php after the table to show success message.
Another Simple way to do this is :
- give data attribute to checkout button and use
<div>element instead of<a>element i.e.
<div id="link" data='.$row->id_order .' >Check-out</div>
- To make an ajax call handle user click .when user click on checkout then get data attribute using
attr()function i.e.
$(document).ready(function(){
$("#link").click(function(){
var id=$(this).attr("data");
$.ajax({
url:"update.php",
method:"GET",
data:{id:id},
success:function(data){
$('#display').html(data);
}
})
})
})
don’t forget to remove <html> , <head> , <title>,<body> tags from update.php file.
@FatmaNagori Thank you. I have added the same code in crud.php and got below error:
Parse error : syntax error, unexpected ‘<’, expecting function (T_FUNCTION) in /var/www/html/gh/donation/crud.php on line 131
Could you please advice me where exactly I need to put this code.
I added as below:
<script type="text/javascript">
$(document).ready(function(){
$("#link").click(function(){
var id=$(this).attr("data");
$.ajax({
url:"update.php",
method:"GET",
data:{id:id},
success:function(data){
$('#display').html(data);
}
})
})
})
</script>
I have updated the same code after the php code. Now there is no error in the page. But Button is not executing.
Did you added <div id="display"></div> in your code?
I haven’t added. where I need to add this.
You need to add this after </table> element in crud.php.
I have added as below in crud.php
<td style="text-align:center; vertical-align:middle;"><span class="btn btn-success btn-xs"><div style="color: white;" id="link" data='.$row->id_order.' >Check-out</div></span></td>
<div id="display"></div>
But still button is not working
Add here
else {
$output .= '
<tr>
<td colspan="11" align="center">No Data Found</td>
</tr>
';
}
$output .= '</table><div id="display"></div>';
return $output;
}
I have added the same. However, I don’t see any any response while click on “Check-out” button. If I check the console log its displaying nothing.
try console.log() to print data in console returned by update.php i.e. :
$(document).ready(function(){
$("#link").click(function(){
var id=$(this).attr("data");
$.ajax({
url:"update.php",
method:"GET",
data:{id:id},
success:function(data){
console.log(data);
$('#display').html(data);
}
})
})
})
I have tried the same. If the page loads then I get below error in console:
ReferenceError: $ is not defineddonation:7:1
http://192.168.1.12/gh/donation/:7:
But after clearing this log and clicking on check-out button no logs will display.
I think it is because you didn’t add jquery to crud.php page. try to add jquery script to crud.php
Thank you. But I have added that, still same. I am working on it to fix.
Since you didn’t gave me full code.So I am getting the code from crud.php using index.php and the ajax call I wrote inside index.php and the code of my index.php is :
<?php
$url=$_SERVER['REQUEST_URI'];
header("Refresh: 300; URL=$url");
//index.php
include 'crud.php';
$object = new Crud();
$object->database_connect();
echo $object->get_data_in_table("SELECT * FROM htl_booking_detail") ;
$err = "";
?>
<html>
<head>
<title>Database records</title>
<script src="lib/jquery.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap.min.css" />
<script src="lib/bootstrap.min.js"></script>
<style>
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
font: "Open Sans",Helvetica,Arial,sans-serif;
}
.box
{
width:1470px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:10px;
font: "Open Sans",Helvetica,Arial,sans-serif;
}
#search{
margin-left: 219%;
}
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 28px;
text-align: center;
line-height: 30px;
cursor: pointer;
border: 0;
border-radius: 2px;
text-decoration: none;
transition: opacity 0.2s ease-out;
opacity: 0;
}
#back-to-top.show {
opacity: 1;
}
#search{
}
.table tr:nth-child(even){background-color: #D4D2D2;}
</style>
</head>
<body>
<div class="col-md-8">
<br>
<span style="text-align:left; margin:10px; margin-top:2px;"><button type="button" class="btn btn-success "><a style="color: white; text-decoration:none;" href=index.php >Home</a></button></span>
<span style="text-align:left; margin:10px; margin-top:2px;"><button type="button" class="btn btn-success "><a style="color: white; text-decoration:none;" href=../alert3/>Alert</a></button></span>
<span style="text-align:left; margin:10px; margin-top:2px;"><button type="button" class="btn btn-success "><a style="color: white; text-decoration:none;" href=./updateaddress/>Update Divotee</a></button></span>
</div>
<div class="col-md-4">
<input type="text" name="search" id="search" placeholder="Search by name or employee id" class="form-control" style="margin:10px;"/>
</div>
<br /><br/><br /><br/>
<div id="user_table" class="table-responsive">
</div>
<a href="" id="back-to-top" title="Back to top" class="btn btn-success" style="float:right; text-decoration:none;">↑</a>
</div>
<script>
$(document).ready(function(){
$("#link").click(function(){
var id=$(this).attr("data");
$.ajax({
url:"update.php",
method:"GET",
data:{id:id},
success:function(data){
$('#display').html(data);
}
})
})
})
</script>
</body>
</html>
And when I use the above code before clicking checkout button
and when I click on checkout button the result is
The ajax call working correctly for me.
Thank you. I have tried by adding the ajax code in index.php still its not worked.
I have forgot to mention action.php that is as below: This script is used to display for page links as shown below:
Rest all codes are in the earlier attachment. If any other code is missing please let me know.
Note: There is one more slip.php but its related to printing.
<?php
//action.php
include 'crud.php';
$object = new Crud();
if(isset($_POST["action"]))
{
if($_POST["action"] == "Load")
{
$record_per_page = 100;
$page = '';
if(isset($_POST["page"]))
{
$page = $_POST["page"];
}
else
{
$page = 1;
}
$start_from = ($page - 1) * $record_per_page;
echo $object->get_data_in_table("SELECT order_invoice.id_order,htl_branch_info_lang.hotel_name,
CONCAT(address.firstname, ' ' ,address.lastname) AS customer,address.address1,address.address2,address.postcode,
address.city,address.phone,order_invoice.date_add,htl_booking_detail.check_in,htl_booking_detail.check_out,
order_invoice.total_products_wt,order_invoice.total_discount_tax_incl,htl_booking_detail.date_too,
htl_booking_detail.id_room,GROUP_CONCAT(htl_room_information.room_num) as Room FROM htl_booking_detail
,htl_room_information,order_invoice,address,orders,htl_branch_info_lang WHERE
(orders.id_customer=address.id_customer) and (htl_room_information.id=htl_booking_detail.id_room)
and (order_invoice.id_order=htl_booking_detail.id_order) and (orders.id_order=order_invoice.id_order)
and (htl_booking_detail.id_hotel=htl_branch_info_lang.id) and (orders.invoice_number=order_invoice.number)
group by order_invoice.id_order desc LIMIT $start_from, $record_per_page");
echo '<br /><br /><div align="center">';
echo $object->make_pagination_link("SELECT order_invoice.id_order,htl_branch_info_lang.hotel_name,
CONCAT(address.firstname, ' ' ,address.lastname) AS customer,address.address1,address.address2,address.postcode,
address.city,address.phone,order_invoice.date_add,htl_booking_detail.check_in,htl_booking_detail.check_out,
order_invoice.total_products_wt,order_invoice.total_discount_tax_incl,htl_booking_detail.date_too,
htl_booking_detail.id_room,GROUP_CONCAT(htl_room_information.room_num) as Room FROM htl_booking_detail
,htl_room_information,order_invoice,address,orders,htl_branch_info_lang WHERE
(orders.id_customer=address.id_customer) and (htl_room_information.id=htl_booking_detail.id_room)
and (order_invoice.id_order=htl_booking_detail.id_order) and (orders.id_order=order_invoice.id_order)
and (htl_booking_detail.id_hotel=htl_branch_info_lang.id) and (orders.invoice_number=order_invoice.number)
group by order_invoice.id_order desc;", $record_per_page);
echo '</div><br />';
}
if($_POST["action"] == "Search")
{
$search = mysqli_real_escape_string($object->connect, $_POST["query"]);
$query =
"SELECT order_invoice.id_order,htl_branch_info_lang.hotel_name,
CONCAT(address.firstname, ' ' ,address.lastname) AS customer, address.address1,address.address2,address.postcode,
address.city,address.phone,order_invoice.date_add,htl_booking_detail.check_in,htl_booking_detail.check_out,
order_invoice.total_products_wt,order_invoice.total_discount_tax_incl,htl_booking_detail.date_too,
htl_booking_detail.id_room,GROUP_CONCAT(htl_room_information.room_num) as Room FROM htl_booking_detail
,htl_room_information,order_invoice,address,orders,htl_branch_info_lang WHERE
(orders.id_customer=address.id_customer) and (htl_room_information.id=htl_booking_detail.id_room)
and (order_invoice.id_order=htl_booking_detail.id_order) and (orders.id_order=order_invoice.id_order)
and (htl_booking_detail.id_hotel=htl_branch_info_lang.id) and (orders.invoice_number=order_invoice.number)
and (order_invoice.id_order LIKE '%".$search."%' or htl_room_information.room_num LIKE '%".$search."%'
or htl_branch_info_lang.hotel_name LIKE '%".$search."%' or address.firstname LIKE '%".$search."%' or address.address1 LIKE '%".$search."%') group by order_invoice.id_order desc";
//echo $query;
echo $object->get_data_in_table($query);
}
}
?>
you need to put ajax call in crud.php at the end of the file with jquery .
after adding action.php code when I tried it first time checkout button was not working for me also but when I puted checkout button click method into curd.php now it is working.
Now the crud.php code is :
<?php
class Crud
{
//crud class
public $connect;
private $host = 'localhost';
private $username = 'root';
private $password = 'password';
private $database = 'database';
function __construct()
{
$this->database_connect();
}
public function database_connect()
{
$this->connect = mysqli_connect($this->host, $this->username, $this->password, $this->database);
}
public function execute_query($query)
{
return mysqli_query($this->connect, $query);
}
public function get_data_in_table($query)
{
$output = '';
$result = $this->execute_query($query);
$output .= '
<table class="table table-bordered table-striped">
<tr style="font-family:arial; font-size:13px; font-weight:normal; color:#363A41; background-color:#8ea9db;">
<!-- <th width="1%" style="text-align:center; vertical-align:middle; "><input type="checkbox" id="select_all" name="select_all" onClick="selectAll()"></th>-->
<th width="4%" style="text-align:center; vertical-align:middle; font-family: Arial, Helvetica, sans-serif;">ID</th>
<th width="10%" style="text-align:center; vertical-align:middle;">Full Name</th>
<!--<th width="14%" style="text-align:center; vertical-align:middle;">Address</th>-->
<th width="10%" style="text-align:center; vertical-align:middle;">Guest House Name</th>
<th width="10%" style="text-align:center; vertical-align:middle;">Room No</th>
<!--<th width="10%" style="text-align:center; vertical-align:middle;">Date &Time</th>-->
<th width="10%" style="text-align:center; vertical-align:middle;">Check In</th>
<th width="10%" style="text-align:center; vertical-align:middle;">Check Out</th>
<th width="10%" style="text-align:center; vertical-align:middle;">Date To</th>
<!-- <th width="6%" style="text-align:center; vertical-align:middle;">Alert</th>-->
<th width="6%" style="text-align:center; vertical-align:middle;">Payment</th>
<th width="6%" style="text-align:center; vertical-align:middle;">Discount</th>
<th width="6%" style="text-align:center; vertical-align:middle;">Checkout</th>
<th width="6%" style="text-align:center; vertical-align:middle;">Print</th>
</tr>
';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_object($result))
{
$time = new DateTime($row->date_add);
$date = $time->format('d-m-Y');
$time = $time->format("g"). '.' .$time->format("i"). ' ' .$time->format("A");//this line for to convert into analog with am or pm
$check_in = $row->check_in;
if ($check_in == '0000-00-00 00:00:00') {
$check_in = '';
}else{
$check_in = new DateTime($row->check_in);
$check_in_date = $check_in->format('d-m-Y');
$check_in_time = $check_in->format("g"). '.' .$check_in->format("i"). ' ' .$check_in->format("A");
$check_in= "$check_in_date" . " " . "$check_in_time";
}
$check_out= $row->check_out;
if($check_out == '0000-00-00 00:00:00'){
$check_out = '';
}else {
$check_out = new DateTime($row->check_out);
$check_out_date = $check_out->format('d-m-Y');
$check_out_time = $check_out->format("g"). '.' .$check_out->format("i"). ' ' .$check_out->format("A");
$check_out = "$check_out_date" . " ". "$check_out_time";
}
$date_too = $row->date_too;
if($date_too == '0000-00-00 00:00:00'){
$date_too = '';}
else {
$date_too = strtotime($row->date_too);
$date_too = date('d-m-Y', $date_too);
}
$output .= '
<tr >
<tr style="font-family:arial; font-size:13px; font-weight:normal; color:#363A41;">
<!-- <td style=" text-align:center; vertical-align:middle;"><input type="checkbox" class="emp_checkbox" ></td>-->
<td style="text-align:center; vertical-align:middle;">'.$row->id_order.'</td>
<td style="text-align:center; vertical-align:middle; ">'.$row->customer.'</td>
<!-- <td style="text-align:center; vertical-align:middle;">'.$row->address1.' '.$row->address2.' '.$row->postcode.' '.$row->city.'</td>-->
<td style=" text-align:center; vertical-align:middle; ">'.$row->hotel_name.'</td>
<td style="text-align:center; vertical-align:middle; ">'.$row->Room.'</td>
<!--<td style="text-align:center; vertical-align:middle;">'.$date .' '.$time .'</td>-->
<td style="text-align:center; vertical-align:middle;">'.$check_in.'</td>
<td style="text-align:center; vertical-align:middle;">'.$check_out.'</td>
<td style="text-align:center; vertical-align:middle;">'.$date_too.'</td>
<!--<td style="text-align:center; vertical-align:middle; "></td>-->
<td style="text-align:center; vertical-align:middle;">'.number_format($row->total_products_wt, 2).'</td>
<td style="text-align:center; vertical-align:middle;">'.number_format($row->total_discount_tax_incl, 2).'</td>
<td style="text-align:center; vertical-align:middle;"><span class="btn btn-success btn-xs"><div style="color: white;" id="link" data='.$row->id_order.' >Check-out</div></span></td>
<td style="text-align:center; vertical-align:middle;"><span class="btn btn-success btn-xs"><a style="color: white;" href=./slip.php?id='.$row->id_order.' target="_blank">Print</a></span></td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="11" align="center">No Data Found</td>
</tr>
';
}
$output .= '</table><div id="display"></div>';
return $output;
}
function upload_file($file)
{
if(isset($file))
{
$extension = explode('.', $file["name"]);
$new_name = $extension[0] . '.' . $extension[1];
$destination = './upload/' . $new_name;
move_uploaded_file($file['tmp_name'], $destination);
return $new_name;
}
}
function make_pagination_link($query, $record_per_page)
{
$output = '';
$result = $this->execute_query($query);
$total_records = mysqli_num_rows($result);
$total_pages = ceil($total_records/$record_per_page);
for($i=1; $i<=$total_pages; $i++){
$output .= '<span class="curPage" class="pagination_link" id="pagination_link" style="cursor:pointer; padding:6px; border:1px solid #ccc;" submission_id="'.$i.'">'.$i.'</span>';
}
return $output;
}
}
?>
<script src="lib/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
var id=$(this).attr("data");
$.ajax({
url:"update.php",
method:"GET",
data:{id:id},
success:function(data){
$('#display').html(data);
}
})
})
})
</script>
I have added the same code still not working. in the console I could see that below message:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/
This might cause the issue?
While click on “check-out” button still no logs.
Thank you. its working fine. When lot of data in checkout is not working. I have set only 1 record at that time it worked perfectly. Still troubleshooting to find out why its not working when there is lot of data.