We Keep Coding

How to print using iframe? ID does not get when print button is click

I want to print information that depends on the $stud_no using iframe. When I show the iframe in the table, it generates a correct $stud_no. But when I click the print button it only shows the First $stud_no. It's like the button didn't GET the id in admin_print-app-form-view.php
admin_print-app-form.php
<table id="dataTable2" class="text-center">
<thead class="text-capitalize">
<tr>
<th>NO.</th>
<th>LAST NAME</th>
<th>FIRST NAME</th>
<th>MIDDLE NAME</th>
<th>SEX</th>
<th>CONTACT NO.</th>
<th>ENTRY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM stud_acc";
$result = $con->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$iframeId = 'studframe' . $row['stud_no'];
$stud_no = $row['stud_no'];
$lastname = $row['lastname'];
$firstname = $row['firstname'];
$middlename = $row['middlename'];
$sex = $row['sex'];
$contact = $row['contact'];
$entry = $row['entry'];?>
<tr>
<td><?php echo $stud_no ?></td>
<td><?php echo $lastname ?></td>
<td><?php echo $firstname ?></td>
<td><?php echo $middlename ?></td>
<td><?php echo $sex ?></td>
<td><?php echo $contact ?></td>
<td><?php echo $entry ?></td>
<td>
<iframe src="admin_print-app-form-view.php?id=<?php echo "$stud_no"?>" name="frame" id="<?= $iframeId ?>" style="visibility:hidden;height:0px;width:0px"></iframe>
<button type="button" class="btn btn-roundedtb btn-info" onclick="document.getElementById('<?= $iframeId ?>').print();"><i class="fa fa-print"></i><span class="icon-name"> Print</span></button>
</td>
</tr>
} }?>
</tbody>
</table>
admin_print-app-form-view.php
<?php
session_start();
include("connection.php");
$stud_no = $_GET['id'];
?>
This is the print preview.The number in the Red circle should be the $stud_no that I clicked, but it always gives me first stud_no

The issue is that when you give the same name and id to every iframe, javascript will only give you the first match it finds, returning the same iframe for all buttons.
We need to give them unique id's (we can skip the name altogether).
Note: This code assumes that stud_no is a unique value, like the tables primary key.
In your while-loop, create a unique id:
while($row = $result->fetch_assoc()) {
// Create a unique id using the stud_no
$iframeId = 'studframe' . $row['stud_no'];
Now give the iframe that id:
<iframe ... id="<?= $iframeId ?>" ... ></iframe>
And make sure the button refers to that id:
<button ... onclick="document.title=''; document.getElementById('<?= $iframeId ?>').print();">...</button>
In the above code, I've created unique id's by prefixing them with studframe and then added the stud_no so it becomes id="studframe1", id="studframe2" and so on.
Then when referring to that specific iframe, we're fetching the iframe based on that unique id.

Change chart data based on Ajax Selection Call

I have a Chart with an select option for the Year, by the default the selection option will choose the newest Year, but the user can choose to see another data from another Year through this select option
<script type="text/javascript">
$(document).ready(function() {
$('table.highchart').highchartTable();
$('.btnTahun').click(function() {
$coba = $('#Year').val();
$.ajax({
type: 'POST',
url: "<?php echo site_url('dashboard/list_data/')?>",
data: {'tahun':$coba},
success: function(data) {
$("#tableChart").html(data);
}
});
});
});
</script>
The problem is when I choose another Year the previously selected year still exist in my view, i want to make it that only the selected year will be show in my view, take a look at my picture below, as u can see i choose year 2016, but the data chart from 2017 is still showed in my view, and i don't want that, what is wrong with my Ajax? or Perhaps is it possible because my controller or Model?
Structure of My Html to show the chart can be seen below
<table id="tableChart" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead style="display: none">
<tr>
<th>Month</th>
<th>Category Project</th>
</tr>
</thead>
<tbody style="display: none">
<tr>
<td>Jan</td>
<td><?php echo $januari ?></td>
</tr>
<tr>
<td>Feb</td>
<td><?php echo $februari ?></td>
</tr>
<tr>
<td>Mar</td>
<td><?php echo $maret ?></td>
</tr>
<tr>
<td>Apr</td>
<td><?php echo $april ?></td>
</tr>
<tr>
<td>May</td>
<td><?php echo $mei ?></td>
</tr>
<tr>
<td>June</td>
<td><?php echo $juni ?></td>
</tr>
<tr>
<td>July</td>
<td><?php echo $juli ?></td>
</tr>
<tr>
<td>Aug</td>
<td><?php echo $agustus ?></td>
</tr>
<tr>
<td>Sep</td>
<td><?php echo $september ?></td>
</tr>
<tr>
<td>Oct</td>
<td><?php echo $oktober ?></td>
</tr>
<tr>
<td>Nov</td>
<td><?php echo $november ?></td>
</tr>
<tr>
<td>Dec</td>
<td><?php echo $desember ?></td>
</tr>
</tbody>

You can use form submit rather than ajax since your controller function creates another view when you call it. heres a link for form helper https://www.codeigniter.com/userguide3/helpers/form_helper.html
CONTROLLER
public function list_data(){
$this->load->helper('form');
$thn = $this->input->post('tahun');
$data['januari'] = $this->dashboard_m->get_kategori_totals('01',$thn)->num_rows();
$data['februari'] = $this->dashboard_m->get_kategori_totals('02',$thn)->num_rows();
$data['maret'] = $this->dashboard_m->get_kategori_totals('03',$thn)->num_rows();
//And the code above will be the same until december, the differences only in the parameter
$data['title'] = 'Aplikasi Saranabudi';
$data['aktif'] = 'Jumlah Kategori Project';
$data['judul_hal']= 'Dashboard Kategori Project';
$this->load->view('dashboard/kategori_project/list_data',$data);
}
VIEW
$attributes = array('id' => 'myID', 'name' => 'myName', 'class' => 'myClass', 'method' => 'post');
echo form_open('', $attributes);
$options = array(
'2015' => '2015',
'2016' => '2016',
'2017' => '2017',
'2018' => '2018',
);
echo form_dropdown('tahun', $options);
// THE CHART
echo form_submit(array('id' => 'filter_button', 'name' => 'filter_button'), 'Filter');
echo form_close();

2nd data table don't show "no data available" message

I have 2 data tables:
Table 1
<table id="properties_list" class="table">
<thead>
<tr class="backend_tab_header">
<th>Status</th>
<th>Photo</th>
<th>Property ID</th>
<th>Address</th>
<th>Date Created</th>
<th>Owner</th>
</tr>
</thead>
<tbody>
<?php
foreach ($properties as $property)
{
?>
<tr>
<td><?php print $property["status"]; ?></td>
<td class="pic_prop_table"><img class="img-responsive" src="<?php print $property["url"]; ?>" ></td>
<td><?php print $property["prop_id"]; ?></td>
<td><?php print $property["address"]; ?></td>
<td><?php print $property["date_created"]; ?></td>
<td><?php print $property["first_name"]; ?> <?php print $property["last_name"]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Table 2
<table id="messages_list" class="table">
<thead>
<tr class="backend_tab_header">
<th>Property ID</th>
<th>Subject</th>
<th>Message</th>
<th>Received</th>
</tr>
</thead>
<tbody>
<?php
foreach ($properties as $property)
{
?>
<tr>
<td><?php print $messages["from_user"]; ?></td>
<td><?php print $messages["subject"]; ?></td>
<td><?php print $messages["message"]; ?></td>
<td><?php print $messages["date_sent"]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
and to fill the arrays call my php functions on top of the page:
$properties = $auth_user->getPropertiesByUser($_SESSION['user_session']);
$messages = $auth_user->getMessages($_SESSION['user_session']);
The data tables are create with JS
jQuery(document).ready(function() {
jQuery('table#properties_list').DataTable( {
//ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
jQuery('table#messages_list').DataTable( {
//ajax: '../ajax/data/arrays.txt',
scrollY: 200,
scrollCollapse: true,
paging: false
} );
});
My problem is that when the first array($properties) return empty the first table show the message "No data available in table" and also when both arrays($properties and $messages) return empty both tables show the message "No data available in table", but when $properties array return with info and $messages array return empty the 2nd table(messages)don't show the "No data available in table" and also creates as much <td> elements as <td> elements in the firs table(properties). Can anyone tell me what could be the cause of this behaviour?
Thanks in advance

probably it's because both of the for each in pop use the $properties. On second loop, it gets the $prperties of the first.
Try to set $properties = array() before getting the values or use another variable name.

Delete data from database using PHP & JavaScript

I am working on a PHP file. I am trying to make a table that shows the list of products from database. There will be also a button for deleting any product. I have used javascript for deleting products from database. I have written the code and could not find anything wrong. When I click delete button, it shows me the confirmation box, but does not delete the product. Here is the code:
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("grocery_shop",$con);
error_reporting(E_ALL^E_NOTICE);
session_start();
$sql = mysql_query("select * from products");
if($_GET['did']){
mysql_query("delete from products where product_id='$_GET[did]'");
header("Location: product.php");
}
?>
<table border="1px" style="width:100%">
<tr>
<th>Serial No</th>
<th>Product Name</th>
<th>Product Type</th>
<th>Quantity</th>
<th>Price</th>
<th>Delete Product</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php
$i=1;
while ($u = mysql_fetch_array($sql)) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $u['product_name'];?></td>
<td><?php echo $u['product_type'];?></td>
<td><?php echo $u['quantity'];?></td>
<td><?php echo $u['price'];?></td>
<td><?php echo "Delete";?></td>
</tr>
<?php
$i++;
}
?>
<script>
function delproduct(id){
var msg = confirm("Are you sure you want to delete this product?");
if (msg) {
window.location = "product.php?did="+product_id;
}
}
</script>
</table>

The problem is in your javascript, the product_id doesn't exist
if (msg) {
window.location = "product.php?did="+id;
}
For debugging purposes try to replace this with your code and let us know the error message you get.
if($_GET['did']){
mysql_query("delete from products where product_id='".$_GET['did']."'");
echo "delete from products where product_id='".$_GET['did']."'";
echo mysql_errno() . ": " . mysql_error() ;
die();
//header("Location: product.php");
}
additionally also try to run the query without the single quotes, i am assuming product_id is an integer.
so mysql_query("delete from products where product_id=".$_GET['did']);

You forgot the '' around did in $_GET[did]:
mysql_query("delete from products where product_id='{$_GET['did']}'");
Also, as #chris85 noted, is not a good idea to use $_GET or $_POST directly, remember to sanitize these values before using it in a query.
$did = filter_input(INPUT_GET, 'did', FILTER_SANITIZE_NUMBER_INT);
mysql_query("delete from products where product_id={$did}");

<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("grocery_shop",$con);
error_reporting(E_ALL^E_NOTICE);
session_start();
$sql = mysql_query("select * from products");
if($_GET['did']){
mysql_query("delete from products where product_id='$_GET[did]'");
header("Location: product.php");
}
?>
<table border="1px" style="width:100%">
<tr>
<th>Serial No</th>
<th>Product Name</th>
<th>Product Type</th>
<th>Quantity</th>
<th>Price</th>
<th>Delete Product</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php
$i=1;
while ($u = mysql_fetch_array($sql)) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $u['product_name'];?></td>
<td><?php echo $u['product_type'];?></td>
<td><?php echo $u['quantity'];?></td>
<td><?php echo $u['price'];?></td>
<td><?php echo "Delete";?></td>
</tr>
<?php
$i++;
}
?>
<script>
function delproduct(id){
var product_id = id;
var msg = confirm("Are you sure you want to delete this product?");
if (msg) {
window.location = "product.php?did="+product_id;
}
}
</script>
</table>

You should try: delproduct($u[product_id]) instead of delproduct(id=$u[product_id])
mysql_query("delete from products where product_id='".$_GET['did']."'");
while ($u = mysql_fetch_array($sql)) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $u['product_name'];?></td>
<td><?php echo $u['product_type'];?></td>
<td><?php echo $u['quantity'];?></td>
<td><?php echo $u['price'];?></td>
<td><?php echo "Delete";?></td>
</tr>
<?php
$i++;
}

HTML, JQuery seporation of loading divs

I currently have a page that loads slow and would like to make the user experience more enjoyable. I would like to load each div so when a div is read() fade in using jQuery. Currently my code works but it loads everything at the same time and fades in. I would like it to load in order of div placement. Below is an example code of loading 2 divs with large tables in them. I would like each table to show up as soon as it's ready. The first one should be ready before the second one and it should render first. I have tried to separate the js so that each has their own ready() but that didn't work.
Also: I am more looking for a consent on how to do this rather than the specific code. What if I have a lot of divs with a lot of different tables. Not every div will have a table in it. some might have pictures or just text. There should be a way to load each div whenever it's ready to be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<title>Animated jQuery Fade | Script tutorial</title>
</head>
<script>
$(document).ready(function(){
$('.myTable').DataTable();
});
$(document).ready(function(){$(".content").hide().fadeIn(1000);});
</script>
<body>
<div id="header">
<h1>Welcome to test page</h1>
</div>
<div class="content" style="display: none;">
<table class="myTable">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<?php for($i =0; $i <10000; $i++){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="content" style="display: none;">
<table class="myTable">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<?php for($i =0; $i <20000; $i++){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>

I think what you need here is to provide you DataTables with an AJAX source, which will retrieve your data. Then set a callback that will fire when the data has been loaded to fadeIn your tables.
It might look something like this:
$(document).ready(function() {
$('#myTable1').dataTable( {
"ajax"{
"url": 'path/to/datasource.php',
"success" : function(){
$('#myTable1').parent().fadeIn(1000);
}
}
} );
} );
This is untested code and the syntax may be wrong, but it should give you an idea of how this is done. Also, the returned data from your php datasource must return json in the correct format DataTables is expecting (this is very important, and is often where people make mistakes).
Please see the DataTables ajax docs here.

the problem is not about what type of data it need to display, but rather you should limit amount of data display each time, and separate the server side, from client side, so it will reduce load on browser, the code below is untested, prob lot of syntax error #_#
PHP
<?php
// you can manual hard code the data, or use database, it really didn't matter what the data are it can be path of image, text, etc...
var $textData = array(); // eg ('text1','text2')
var $imgData = array(); // eg ('path/img.jpg', 'path/img.jpg')
var $divData = array(); // eg ('<div class="parent"><div class="child"></div></div>')
// see what data set you want to get
if($_POST['type']==='text') {
// now encode the data into json for ajax
echo json_encode($textData);
} else if($_POST['type']==='img') {
echo json_encode($imgData);
}
?>
JQUERY AJAX
<script>
if(some condition are made) {
$.ajax({
url: "text.php",
type: "POST",
data: {
type: 'text' // it can be anything
},
dataType: "JSON",
success: function (dataSet) {
// jquery to append dataSet, use if() to append to different place depend on type
// this set you can hide as default with css
// after data loaded fade in with jquery.
}
});
}
</script>