I am creating a QR Code scanning web application which will run locally on a pc. It scans a qr code with unique id and marks the entry of the user using pc camera. I want to add a pop up in which before marking entry into the system, it asks whether to enter the person or not (security reasons at my company). If the user clicks yes, it marks the entry otherwise nothing happens.
Here is my code:
index.php
<?php session_start();?>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PBSO GATEPASS</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/instascan.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
#divvideo{
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body style="background:#eee">
<nav class="navbar" style="background:#2c3e50">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <i class="glyphicon glyphicon-qrcode"></i> WELCOME TO IOCL-PBSO (Marketing Division)</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-cog"></span> Maintenance <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-user"></span> List of Trainees</li>
<li><span class="glyphicon glyphicon-plus-sign"></span> Add New Trainee</li>
<li><span class="glyphicon glyphicon-calendar"></span> Attendance</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-align-justify"></span> Reports</li>
<li><span class="glyphicon glyphicon-time"></span> Check Attendance</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!--<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>-->
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4" style="padding:10px;background:#fff;border-radius: 5px;" id="divvideo">
<center><p class="login-box-msg"> <i class="glyphicon glyphicon-camera"></i> TAP HERE</p></center>
<video id="preview" width="100%" height="50%" style="border-radius:10px;"></video>
<br>
<br>
<?php
if(isset($_SESSION['error'])){
echo "
<div class='alert alert-danger alert-dismissible' style='background:red;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-warning'></i> Error!</h4>
".$_SESSION['error']."
</div>
";
unset($_SESSION['error']);
}
if(isset($_SESSION['success'])){
echo "
<div class='alert alert-success alert-dismissible' style='background:green;color:#fff'>
<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
<h4><i class='icon fa fa-check'></i> Success!</h4>
".$_SESSION['success']."
</div>
";
unset($_SESSION['success']);
}
?>
</div>
<div class="col-md-8">
<form action="CheckInOut.php" method="post" class="form-horizontal" style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<i class="glyphicon glyphicon-qrcode"></i> <label>SCAN QR CODE</label> <p id="time"></p>
<input type="text" name="studentID" id="text" placeholder="scan qrcode" class="form-control" autofocus>
</form>
<div style="border-radius: 5px;padding:10px;background:#fff;" id="divvideo">
<table id="example1" class="table table-bordered">
<thead>
<tr>
<td>NAME</td>
<td>GATE ID</td>
<td>TIME IN</td>
<td>TIME OUT</td>
<td>LOGDATE</td>
</tr>
</thead>
<tbody>
<?php
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
$date = date('Y-m-d');
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
$sql ="SELECT * FROM attendance LEFT JOIN student ON attendance.STUDENTID=student.STUDENTID WHERE LOGDATE='$date'";
$query = $conn->query($sql);
while ($row = $query->fetch_assoc()){
?>
<tr>
<td><?php echo $row['LASTNAME'].', '.$row['FIRSTNAME'].' '.$row['MNAME'];?></td>
<td><?php echo $row['STUDENTID'];?></td>
<td><?php echo $row['TIMEIN'];?></td>
<td><?php echo $row['TIMEOUT'];?></td>
<td><?php echo $row['LOGDATE'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success pull-right" onclick="Export()">
<i class="fa fa-file-excel-o fa-fw"></i> Export to excel
</button>
</div>
<script>
function Export()
{
var conf = confirm("Please confirm if you wish to proceed in exporting the attendance in to Excel File");
if(conf == true)
{
window.open("export.php",'_blank');
}
}
</script>
<script>
let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
Instascan.Camera.getCameras().then(function(cameras){
if(cameras.length > 0 ){
scanner.start(cameras[0]);
} else{
alert('No cameras found');
}
}).catch(function(e) {
console.error(e);
});
scanner.addListener('scan',function(c){
document.getElementById('text').value=c;
document.forms[0].submit();
});
</script>
<script type="text/javascript">
var timestamp = '<?=time();?>';
function updateTime(){
$('#time').html(Date(timestamp));
timestamp++;
}
$(function(){
setInterval(updateTime, 1000);
});
</script>
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script>
$(function () {
$("#example1").DataTable({
"responsive": true,
"autoWidth": false,
"order": [[ 2, "desc" ]],
});
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
});
});
</script>
</body>
</html>
here is CheckInOut.php
<?php
session_start();
$server = "localhost:3404";
$username="root";
$password="hunter2";
$dbname="qrcodedb";
$conn = new mysqli($server,$username,$password,$dbname);
if($conn->connect_error){
die("Connection failed" .$conn->connect_error);
}
if(isset($_POST['studentID'])){
echo "<link rel='stylesheet' href='plugins/css/bootstrap.min.css'>";
echo "<script>";
echo "$(document).ready(function(){";
echo "$('#myModal').modal('show')";
echo "});";
echo "</script>";
echo "<div id='myModal' class='modal fade'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<h5 class='modal-title'>Attention!!! </h5>";
echo "<button type='button' class='close' data-dismiss='modal'>×</button>";
echo "</div>";
echo "<div class='modal-body'>";
echo "<p>Authorize the user</p>";
echo "</div>";
echo "<div class='modal-footer'>";
echo "<button type='button' class='btn btn-primary'>Allow</button>";
echo "<button type='button' class='btn btn-secondary' data-dismiss='modal'>Deny</button>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "<script src='plugins/jquery/jquery.min.js'></script>";
echo "<script src='plugins/bootstrap/js/bootstrap.min.js'></script>";
$studentID =$_POST['studentID'];
$date = date('Y-m-d');
$time = date('H:i:s A');
$sql = "SELECT * FROM student WHERE STUDENTID = '$studentID'";
$query = $conn->query($sql);
if($query->num_rows < 1){
$_SESSION['error'] = 'Cannot find QRCode number '.$studentID;
}else{
$row = $query->fetch_assoc();
$id = $row['STUDENTID'];
$sql ="SELECT * FROM attendance WHERE STUDENTID='$id' AND LOGDATE='$date' AND STATUS='0'";
$query=$conn->query($sql);
if($query->num_rows>0){
$sql = "UPDATE attendance SET TIMEOUT='$time', STATUS='1' WHERE STUDENTID='$studentID' AND LOGDATE='$date'";
$query=$conn->query($sql);
$_SESSION['success'] = 'Successfuly Time Out: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$sql = "INSERT INTO attendance(STUDENTID,TIMEIN,LOGDATE,STATUS) VALUES('$studentID','$time','$date','0')";
if($conn->query($sql) ===TRUE){
$_SESSION['success'] = 'Successfuly Time In: '.$row['FIRSTNAME'].' '.$row['LASTNAME'];
}else{
$_SESSION['error'] = $conn->error;
}
}
}
}else{
$_SESSION['error'] = 'Please scan your QR Code number';
}
header("location: index.php");
$conn->close();
?>
Please help me in creating the pop up. The pop up code does not work, but rest of the code works
Related
I'm trying to multiply data from input (quantity) to data in the database (price) and show the result (total price) using AJAX
I expected when I change the quantity:
page automatically refresh and show the result (total price) of multiplying the quantity
data (total price) in the database too will be updated
What I got :
when I change data (quantity) page refreshed but data (quantity) will return to the previous value, and the result (total price) didn't change too
data (total price) not updated in database
When it fails, I try not using ajax and manually refresh the page but the result (total price) still not change, then I try to check in the console and see quantity data is changing but somehow it's not multiplying to (price) in data base
cart.php
<?php
session_start();
global $pid;
?>
<!--index.php-->
<!DOCTYPE html>
<html>
<head>
<title>Map Store</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/fc847822ba.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="fontawesome/css/all.min.css"/>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="index.php">Map Store</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="index.php">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.php">Checkout</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="cart.php"><i class="fas fa-shopping-cart text-white"> <span id="cart-item" class="badge badge-danger"></span></i></a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div style="display: <?php if(isset($_SESSION['showAlert'])){echo $_SESSION['showAlert'];} else {echo'none';} unset($_SESSION['showAlert']); ?>" class="alert alert-success alert-dismissible mt-3">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><?php if(isset($_SESSION['message'])){echo $_SESSION['message'];} unset($_SESSION['showAlert']); ?></strong>
</div>
<div class="table-responsive mt-2">
<table class="table table-boarded table-stripped text-center">
<thead>
<tr>
<td colspan="7">
<h4 class="test-center text-info m-0"> Products in your cart</h4>
</td>
</tr>
<tr>
<th>ID</th>
<th>Image</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
<th>
<i class="fas fa-trash"></i> Clear cart
</th>
</tr>
</thead>
<tbody>
<?php
require 'config.php';
$stmt = $conn->prepare("SELECT * FROM cart");
$stmt->execute();
$result = $stmt->get_result();
$grand_total = 0;
while($row = $result->fetch_assoc()):
?>
<tr>
<td type="hidden"><?= $row['id'] ?></td>
<input type="hidden" name="pid" class="pid" value="<?= $row['id'] ?>">
<td><img src="<?= $row['product_image'] ?>" width="50"> </td>
<td><?= $row['product_name']?></td>
<td><?= number_format ($row['product_price'],2); ?> </td>
<input type="hidden" name="pprice" class="pprice" value="<?= $row['product_price']?>" >
<td>
<input type="number" name="qty" min="1" class="form-control itemQty" value="<?= $row['qty'] ?>" style="width: 75px;"></td>
<td><?= number_format ($row['total_price'],2 ); ?></td>
<td>
<i class="fas fa-trash-alt"></i>
</td>
</tr>
<?php $grand_total +=$row['total_price']; ?>
<?php endwhile; ?>
<tr>
<td colspan="3">
<i class="fas fa-cart-plus"></i> Continue Shopping
</td>
<td colspan="2"><b>Grand Total :</b></td>
<td><?= number_format ($grand_total,2); ?></td>
<td>
<i class="far fa-credit-card"> </i>Checkout
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/jquery.zoom.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/main.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".itemQty").on('change', function(){
var $el = $(this).closest('tr');
var pid = $el.find(".pid").val();
var pprice = $el.find(".pprice").val();
var qty = $el.find(".itemQty").val();
//console.log(qty);
location.reload(true);
$.ajax({
url : 'action_1.php',
method : 'post',
cache : false,
data : {qty:qty,pid:pid,pprice:pprice},
success : function(response){
console.log(response);
}
});
});
});
</script>
</body>
</html>
action_1.php
<!--action.php-->
<?php
session_start();
require 'config.php';
if(isset($_POST['qty'])) {
$qty = $_POST['qty'];
$pid = $_POST['id'];
$pprice = $_POST['pprice'];
$tprice = $qty*$pprice;
$stmt = $conn->prepare("UPDATE cart SET qty=?, total_price=? WHERE id=?");
$stmt->bind_param("isi",$qty,$tprice,$pid);
$stmt->execute();
}
if (isset($_POST['action']) && isset($_POST['action']) == 'order') {
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$products = $_POST['products'];
$grand_total = $_POST['grand_total'];
$address = $_POST['address'];
$pmode = $_POST['pmode'];
$data = '';
$stmt = $conn->prepare("INSERT INTO orders (name,email,phone,address,pmode,products,amount_paid) VALUES (?,?,?,?,?,?,?)");
$stmt->bind_param("sssssss",$name,$email,$phone,$address,$pmode,$products,$grand_total);
$stmt->execute();
$stmt = $conn->prepare("DELETE FROM cart");
$stmt->execute();
echo 'Thank You';
}
?>
I expected when I change the quantity:
1. page automatically refresh and show the result (total price) of multiplying the quantity
2. data (total price) in the database too will be updated
What I got :
1. when I change data (quantity) page refreshed but data (quantity) will return to the previous value and the result (total price) didn't change too
2. data (total price) not updated in database
I've searched and searched and found many similar questions but i haven't found anything that has worked.
i am trying to write a simple php crud page where
i have an index.php page using nav-tabs (drop down menus as i will add more pages after getting these to work)
i have a drop down menu that links to a vendorlanding.php page
which displays a grid and simple add/update/delete links.
i can successfully navigate to this page from index.php but when i click on any of the links from vendorlanding.php (ie add a new vendor: addvendor.php) nothing happens.
i would like it to open the addvendor.php page in the current tab.
any help is greatly appreciated
below is contents of index.php and vendorlanding.php
index.php:
<?php
// Initialize the session
session_start();
// If session variable is not set it will redirect to login page
if(!isset($_SESSION['username']) || empty($_SESSION['username'])){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Ledger</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
<style type="text/css">
.bs-example
{
width: 55%;
padding-left: 15%;
}
.header
{
width: 55%;
padding-left: 15%;
}
.footer
{
width: 55%;
padding-left: 15%;
}
.padding2
{
margin: 100px;
padding-left: 50%;
margin: 100px;
}
body{ font: 14px sans-serif; }
</style>
</head>
<body>
<div class = "header">
<h2>welcome <b><?php echo htmlspecialchars($_SESSION['username']); ?></b>. Sign Out
</br>
</br>
</div>
</br>
</br>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Ledger Content<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#viewvendors">View Vendors</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Manage Users<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="tab" href="#adduser">Add User</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="Home" class="tab-pane fade in active">
<?php
include("main.inc.php");
?>
</div>
<div id="viewvendorslanding" class="tab-pane fade">
<?php
include("vendorLanding.php");
?>
</div>
<div id="adduser" class="tab-pane fade">
<?php
include("register.php");
?>
</div>
<div id="addvendor" class="tab-pane fade">
<?php
include("addVendor.php");
?>
</div>
</div>
</div>
</br>
</br>
</br>
<div class="footer">
<?php
include("footer.inc.php");
?>
</div>
</body>
</html>
vendorlanding.php --> this has a button to add a new vendor (which doesn't work)
<body>
<div class="wrapper1">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="page-header clearfix">
<h2 class="pull-left">Vendor Details</h2>
Add New Vendor
</div>
<?php
// Include config file
require_once '../dbConfig.php';
// Attempt select query execution
$sql = "SELECT * FROM vendors";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
echo "<table class='table table-bordered table-striped'>";
echo "<thead>";
echo "<tr>";
echo "<th>#</th>";
echo "<th>Name</th>";
echo "<th>Description</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td>" . $row['vendor_id'] . "</td>";
echo "<td>" . $row['vendor_name'] . "</td>";
echo "<td>" . $row['vendor_description'] . "</td>";
echo "<td>";
echo "<a href='vendorRead.php?id=". $row['id'] ."' title='View Record' data-toggle='tooltip'><span class='glyphicon glyphicon-eye-open'></span></a>";
echo "<a href='vendorUpdate.php?id=". $row['id'] ."' title='Update Record' data-toggle='tooltip'><span class='glyphicon glyphicon-pencil'></span></a>";
echo "<a href='vendorDelete.php?id=". $row['id'] ."' title='Delete Record' data-toggle='tooltip'><span class='glyphicon glyphicon-trash'></span></a>";
echo "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
// Free result set
mysqli_free_result($result);
} else{
echo "<p class='lead'><em>No records were found.</em></p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
// Close connection
//mysqli_close($link);
?>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the ajax code:
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
$(document).ready(function(){
$("#simple-table").DataTable();
$(".viewrecord").click(function(e){
e.preventDefault();
$.ajax({
url:"processes.php",
type: "post",
async: false,
data:{action:"view_image_info",post_id:$(this).attr('id')},
success:function(res){
$(".page-content .row .col-xs-12").html('');
$(".page-content .row .col-xs-12").html(res);
$(".page-content").append('<div class="row"><div class="col-xs-12"><button type="button" id="backbutton" class="width-10 btn btn-sm btn-primary"><i class="ace-icon glyphicon glyphicon-chevron-left"></i><span class="bigger-110">Back</span></button></div></div>');
}
});
});
$(".deleterecord").click(function(e){
e.preventDefault();
$.ajax({
url:"processes.php",
type: "post",
async: false,
data:{action:"delete_image",post_id:$(this).attr('id')},
success:function(res){
if(res == 'success'){
alert("Image deleted successfully");
window.location.reload();
} else {
alert("Some error occured while deleting the image");
window.location.reload();
}
}
});
});
$(".approvevideo").click(function(e){
e.preventDefault();
$.ajax({
url:"processes.php",
type: "post",
async: false,
data:{action:"approve_image",post_id:$(this).attr('id')},
success:function(res){
if(res == 'success'){
alert("Image approved");
window.location.reload();
} else {
alert("Some error occured while approving the image");
window.location.reload();
}
}
});
});
$(".page-content").on('click','#backbutton', function(){
window.location.reload();
});
});
</script>
Here is the PHP code:
<?php
#$total_count_query = mysql_query("SELECT COUNT(post_id) as totalrows FROM `yoga_posts` WHERE `post_type`='image' ");
$totalrows=0;
while($row = mysql_fetch_array($total_count_query)){
$totalrows = $row['totalrows'];
}
if($totalrows==0){
?>
<tr>
<td colspan="4">No Records Found</td>
</tr>
<?php
} else {
#$query = mysql_query("SELECT * FROM `yoga_posts` WHERE `post_type`='image' ");
while($row = mysql_fetch_array($query)){
?>
<tr>
<td class="center">
<label class="pos-rel">
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</td>
<td><?php echo $row['post_title'];?></td>
<td><?php echo get_username_from_id($row['user_id']);?></td>
<td>
<div class="action-buttons">
<a class="blue viewrecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
</a>
<a class="red deleterecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
<?php if($row['post_status']=='pending'){?>
<a class="green approvevideo" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon ace-icon glyphicon glyphicon-ok bigger-130"></i>
</a>
<?php } ?>
<?php
#$total_count_query = mysql_query("SELECT COUNT(post_id) as totalrows FROM `yoga_posts` WHERE `post_type`='image' ");
$totalrows=0;
while($row = mysql_fetch_array($total_count_query)){
$totalrows = $row['totalrows'];
}
if($totalrows==0){
?>
<tr>
<td colspan="4">No Records Found</td>
</tr>
<?php
} else {
#$query = mysql_query("SELECT * FROM `yoga_posts` WHERE `post_type`='image' ");
while($row = mysql_fetch_array($query)){
?>
<tr>
<td class="center">
<label class="pos-rel">
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</td>
<td><?php echo $row['post_title'];?></td>
<td><?php echo get_username_from_id($row['user_id']);?></td>
<td>
<div class="action-buttons">
<a class="blue viewrecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
</a>
<a class="red deleterecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
<?php if($row['post_status']=='pending'){?>
<a class="green approvevideo" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon ace-icon glyphicon glyphicon-ok bigger-130"></i>
</a>
<?php } ?>
<?php
#$total_count_query = mysql_query("SELECT COUNT(post_id) as totalrows FROM `yoga_posts` WHERE `post_type`='image' ");
$totalrows=0;
while($row = mysql_fetch_array($total_count_query)){
$totalrows = $row['totalrows'];
}
if($totalrows==0){
?>
<tr>
<td colspan="4">No Records Found</td>
</tr>
<?php
} else {
#$query = mysql_query("SELECT * FROM `yoga_posts` WHERE `post_type`='image' ");
while($row = mysql_fetch_array($query)){
?>
<tr>
<td class="center">
<label class="pos-rel">
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</td>
<td><?php echo $row['post_title'];?></td>
<td><?php echo get_username_from_id($row['user_id']);?></td>
<td>
<div class="action-buttons">
<a class="blue viewrecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
</a>
<a class="red deleterecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
<?php if($row['post_status']=='pending'){?>
<a class="green approvevideo" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon ace-icon glyphicon glyphicon-ok bigger-130"></i>
</a>
<?php } ?>
<?php
#$total_count_query = mysql_query("SELECT COUNT(post_id) as totalrows FROM `yoga_posts` WHERE `post_type`='image' ");
$totalrows=0;
while($row = mysql_fetch_array($total_count_query)){
$totalrows = $row['totalrows'];
}
if($totalrows==0){
?>
<tr>
<td colspan="4">No Records Found</td>
</tr>
<?php
} else {
#$query = mysql_query("SELECT * FROM `yoga_posts` WHERE `post_type`='image' ");
while($row = mysql_fetch_array($query)){
?>
<tr>
<td class="center">
<label class="pos-rel">
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</td>
<td><?php echo $row['post_title'];?></td>
<td><?php echo get_username_from_id($row['user_id']);?></td>
<td>
<div class="action-buttons">
<a class="blue viewrecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-search-plus bigger-130"></i>
</a>
<a class="red deleterecord" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon fa fa-trash-o bigger-130"></i>
</a>
<?php if($row['post_status']=='pending'){?>
<a class="green approvevideo" href="#" id="<?php echo $row['post_id'];?>">
<i class="ace-icon ace-icon glyphicon glyphicon-ok bigger-130"></i>
</a>
<?php } ?>
I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!
HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
I have a forms of crud operations of groceryCrud where I put them in a modal. Inside the datatable, there's a button where I choose to edit, view or delete records. Inside of those button functions are the code mentioned above. In the codes above, when I click the edit button, it will display a modal with the edit form and so forth with others. At the list.php, I declare a JavaScript variables below where I get the edit and view links from groceryCrud.
The problem is, I can't get the ID of the selected data inside the datatable when I click the edit and view button. It will get and display the latest inputted data/record in the modal. Is there anything wrong on declaring my JavaScript variables that's why I can't get exactly the link with the exact ID of my selected record to be performed with crud operations?
I have a code at datatables/view/list.php
<table class="table table-striped table-bordered table-vcenter table-condensed table-responsive table-hover" id="example-datatable" style="height: 50px;">
<thead>
<tr>
<center>
<?php foreach ($columns as $column) {?>
<th><?php echo $column->display_as;?></th>
<?php }
?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) {?>
<th class="text-center actions" title="Actions" data-sortable="false"><i class="fa fa-flash"></i></th>
<?php }
?>
</center>
</tr>
</thead>
<tbody>
<?php foreach ($list as $num_row => $row) {
?>
<tr id='row-<?php echo $num_row?>'>
<?php foreach ($columns as $column) {?>
<td><?php echo $row->{$column->field_name}?></td>
<?php }
?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) {
?>
<td class="text-center">
<?php
if (!empty($row->action_urls)) {
foreach ($row->action_urls as $action_unique_id => $action_url) {
$action = $actions[$action_unique_id];
?>
<a href="<?php echo $action_url;?>" class="edit_button btn btn-small btn-effect-ripple btn-ripple btn-default row col-sm-4 col-xs-4" role="button">
<span class="ui-button-icon-primary ui-icon <?php echo $action->css_class;?> <?php echo $action_unique_id;?>"></span><span class="ui-button-text"> <?php echo $action->label?></span>
</a>
<?php
}
}
?>
<?php if (!$unset_read) {?>
<!-- <a href="<?php // echo $row->read_url ?>" class="edit_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-document"></span>
<span class="ui-button-text"> <?php // echo $this->l('list_view'); ?></span>
</a>-->
<a href="#modal-fadeView" class="btn btn-effect-ripple btn-xs btn-primary viewBtn" data-toggle="modal" title="<?php echo $this->l('list_view');?>" role="button" style="overflow: hidden; position: relative;">
<i class="fa fa-info-circle"></i>
</a>
<?php }
?>
<?php if (!$unset_edit) {?>
<!-- <a href="<?php // echo $row->edit_url ?>" class="edit_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
<span class="ui-button-text"> <?php // echo $this->l('list_edit'); ?></span>
</a>-->
<a href="#modal-fadeEdit" class="edit_button btn btn-effect-ripple btn-xs btn-success editBtn" data-toggle="modal" title="<?php echo $this->l('list_edit');?>" role="button" style="overflow: hidden; position: relative;">
<i class="fa fa-pencil"></i>
</a>
<?php }
?>
<?php if (!$unset_delete) {?>
<!-- <a onclick = "javascript: return delete_row('<?php // echo $row->delete_url ?>', '<?php // echo $num_row ?>')"
href="javascript:void(0)" class="delete_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-circle-minus"></span>
<span class="ui-button-text"> <?php // echo $this->l('list_delete'); ?></span>
</a>-->
<a onclick = "javascript: return delete_row('<?php echo $row->delete_url?>', '<?php echo $num_row?>')"
href="javascript:void(0)" class="delete_button btn btn-effect-ripple btn-xs btn-danger" title="<?php echo $this->l('list_delete');?>" role="button">
<i class="fa fa-times"></i>
</a>
<?php }
?>
</td>
<?php }
?>
</tr>
<?php }
?>
</tbody>
<!-- <tfoot>
<tr>
<?php foreach ($columns as $column) {?>
<th><input type="text" name="<?php echo $column->field_name;?>" placeholder="<?php echo $this->l('list_search') . ' ' . $column->display_as;?>" class="search_<?php echo $column->field_name;?>" /></th>
<?php }
?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) {?>
<th>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only floatR refresh-data" role="button" data-url="<?php echo $ajax_list_url;?>">
<span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text"> </span>
</button>
<a href="javascript:void(0)" role="button" class="clear-filtering ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary floatR">
<span class="ui-button-icon-primary ui-icon ui-icon-arrowrefresh-1-e"></span>
<span class="ui-button-text"><?php echo $this->l('list_clear_filtering');?></span>
</a>
</th>
<?php }
?>
</tr>
</tfoot>-->
</table>
<!--<script type="text/javascript" src="<?=base_url()?>assets/Backend/grocery_crud/js/jquery_plugins/jquery.fancybox.pack-2.1.5.js"> </script>-->
<script type="text/javascript">
var editUrl = "<?php echo $row->edit_url?>",
readUrl = "<?php echo $row->read_url?>";
var $ = jQuery.noConflict();
$(document).ready(function () {
$(".fancybox").fancybox();
});
</script>
inside the <script>tag below, I declare the variables of the crud operation links. And I have this js file:
$(".addBtn").click(function () {
$('#addFrame').attr('src', "/InfoTable/add");
});
$(".editBtn").click(function () {
$('#editFrame').attr('src', editUrl);
});
$(".viewBtn").click(function () {
$('#viewFrame').attr('src', readUrl);
});
Now, I can't get the exact link of the crud operation with the data id, it gets the latest inputted/added data id when I click the button of edit and view.