Change chart data based on Ajax Selection Call - javascript

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();

Related

How do I Add Button In AJAX Datatables

I have one file PHP for show datatable
My index
<script type="text/javascript">
document.getElementById('cari').
addEventListener('click', jalankan);
function jalankan(){
const unit = document.getElementById('unitcari').value;
const nosam = document.getElementById('nosam').value;
const tahun = document.getElementById('tahun').value;
$.ajax({
url: 'get/rek_cari.php',
data: {'unitcari': unit, 'nosam': nosam, 'tahun': tahun},
cache: false,
success: function(show){
$('#tampilkan').html(show);
}
});
}
</script>
And this is my code show datatable
<?php
require '../../konfigurasi.php';
$unit = $_REQUEST['unitcari'];
$nosam = trim($_REQUEST['nosam']);
$tahun = $_REQUEST['tahun'];
?>
<div>
<table class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Bulan</th>
<th>Tahun</th>
<th>Awal</th>
<th>Akhir</th>
<th>Rupiah</th>
<th>Aksi</th>
</tr>
</thead>
<?php
$select = mysqli_query($conn, "SELECT * FROM datatran WHERE no_unit = '$unit' AND no_samb = '$nosam' AND tahun = '$tahun' ORDER BY bulan ASC");
$a = 1;
foreach ($select as $tr) :
?>
<tbody>
<tr>
<td><?= $a++ ?></td>
<td><?= $tr['nama']; ?></td>
<td><?= $tr['alamat']; ?></td>
<td><?= $tr['bulan']; ?></td>
<td><?= $tr['tahun']; ?></td>
<td><?= $tr['awal']; ?></td>
<td><?= $tr['akhir']; ?></td>
<td><?= $tr['rupiah']; ?></td>
<td>
<button type="button" id="hapus" class="btn btn-primary"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
<?php endforeach; ?>
</table>
</div>
I want to add button in my table but, I don't know what to do
because that table different files, I can make if that PHP, but I want to make not reload

Generate excel report of specific row using check box in CodeIgniter

as of now in my code i am able to generate excel report of entire table. I want to generate report of specific row using checkbox. i am not able to do this pls help me out.
From view function i get the table results from which i have to generate excel report of particular row using checkbox. I'm at the final stage of my project please help me out with this.
Thanks in Advance
Controller:
public function exportExcelData($records)
{
$heading = false;
if (!empty($records))
foreach ($records as $row)
{
if (!$heading)
{
echo implode("\t", array_keys($row)) . "\n";
$heading = true;
}
echo implode("\t", ($row)) . "\n";
}
}
public function fetchDataFromTable()
{
$query =$this->db->get('jc_meeting_expense'); // fetch Data from table
$allData = $query->result_array(); // this will return all data into array
$dataToExports = [];
//Export To Excel
foreach ($allData as $data)
{
$arrangeData['Name'] = $data['name'];
$arrangeData['Employee ID'] = $data['employee_id'];
$arrangeData['Category'] = $data['category'];
$arrangeData['Placename'] = $data['place_name'];
$arrangeData['No of Employees'] = $data['no_of_employees'];
$arrangeData['Claimed Amount'] = $data['claimed_amount'];
$arrangeData['Amount per head'] = $data['amount_per_head'];
$arrangeData['Meeting Date'] = $data['meeting_date'];
$arrangeData['Expense Bill'] = $data['expense_bill'];
$arrangeData['Other Expense'] = $data['other_expense'];
$arrangeData['Other Expense Amount'] = $data['amount'];
$dataToExports[] = $arrangeData;
}
$today = date("d.m.y");
// set header
$filename = "Employee Name ".$today.".xls";
header("Content-Type: application/vnd.ms-excel");
header("Content-Disposition: attachment; filename=\"$filename\"");
$this->exportExcelData($dataToExports);
}
View
<table class="viewjcexpense">
<thead>
<tr>
<th>Select</th><th>Name</th><th>Employee ID</th>
<th>Category</th><th>Place Name</th><th>No Of Employees</th>
<th>Claimed Amount</th><th>Amount Per Head</th>
<th>Meeting Date</th><th>Expense Bill</th><th>Other Expense</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<div class="scroll1">
<?php foreach($query as $row): ?>
<tr>
<td><input type="checkbox" id="checkbox" name="checkbox[]" value="<?php echo $row->name ?>"></td>
<td><?php echo $row->name; ?></td>
<td><?php echo $row->employee_id; ?></td>
<td><?php echo $row->category; ?></td>
<td><?php echo $row->place_name; ?></td>
<td><?php echo $row->no_of_employees; ?></td>
<td><?php echo $row->claimed_amount; ?></td>
<td><?php echo $row->amount_per_head; ?></td>
<td><?php echo $row->meeting_date; ?></td>
<td><?php echo $row->expense_bill; ?></td>
<td><?php echo $row->other_expense; ?></td>
<td><?php echo $row->amount; ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td colspan="12" align="center">
<p>
<input type="submit" value="Generate Report" name="generatereport" formaction="<?php echo site_url('JcMeetingExpense/fetchDataFromTable'); ?>">
</p>
</td>
</tr>
</div>
</tbody>
</table>
Just check your data in the function fetchDataFromTable
something like
public function fetchDataFromTable()
{
$arrRows = $this->input->post('checkbox[]');
if (!empty($arrRows)) $this->db->where_in('id', $arrRows);
$query =$this->db->get('jc_meeting_expense');
...
}
and in your view just put in your id as value in your checkbox element
<td><input type="checkbox" id="checkbox" name="checkbox[]" value="<?php echo $row->id; ?>"></td>
That should pretty much do the job - assuming you did wrap your entire table in a form.
Please check the below code.
Controllers (welcome.php)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index(){
$query[] = array(
'name' => 'empl_1',
'employee_id' => 'empl_1',
'category' => 'empl_1',
'place_name' => 'empl_1',
'no_of_employees' => 'empl_1',
'claimed_amount' => 'empl_1',
'amount_per_head' => 'empl_1',
'meeting_date' => 'empl_1',
'expense_bill' => 'empl_1',
'other_expense' => 'empl_1',
'amount' => 'empl_1',
);
$query[] = array(
'name' => 'empl_2',
'employee_id' => 'empl_2',
'category' => 'empl_2',
'place_name' => 'empl_2',
'no_of_employees' => 'empl_2',
'claimed_amount' => 'empl_2',
'amount_per_head' => 'empl_2',
'meeting_date' => 'empl_2',
'expense_bill' => 'empl_2',
'other_expense' => 'empl_2',
'amount' => 'empl_2',
);
$query[] = array(
'name' => 'empl_3',
'employee_id' => 'empl_3',
'category' => 'empl_3',
'place_name' => 'empl_3',
'no_of_employees' => 'empl_3',
'claimed_amount' => 'empl_3',
'amount_per_head' => 'empl_3',
'meeting_date' => 'empl_3',
'expense_bill' => 'empl_3',
'other_expense' => 'empl_3',
'amount' => 'empl_3',
);
$data['query'] = $query;
$this->load->view('welcome',$data);
}
public function fetchDataFromTable(){
// Here you will get the id of employee and on basis of you need to fetch data from DB.
// var_dump($this->input->post('checkbox'));
$data['selected_emp'] = $this->input->post('checkbox');
$this->load->view('report_view',$data);
}
}
Views (welcome.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple CodeIgniter App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="<?php echo base_url('index.php/Welcome/fetchDataFromTable'); ?>" method="post">
<table class="viewjcexpense" border>
<thead>
<tr>
<th>Select</th><th>Name</th><th>Employee ID</th>
<th>Category</th><th>Place Name</th><th>No Of Employees</th>
<th>Claimed Amount</th><th>Amount Per Head</th>
<th>Meeting Date</th><th>Expense Bill</th><th>Other Expense</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<div class="scroll1">
<?php foreach($query as $row): ?>
<tr>
<td><input type="checkbox" id="checkbox" name="checkbox[]" value="<?php echo $row['employee_id']; ?>"></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['employee_id']; ?></td>
<td><?php echo $row['category']; ?></td>
<td><?php echo $row['place_name']; ?></td>
<td><?php echo $row['no_of_employees']; ?></td>
<td><?php echo $row['claimed_amount']; ?></td>
<td><?php echo $row['amount_per_head']; ?></td>
<td><?php echo $row['meeting_date']; ?></td>
<td><?php echo $row['expense_bill']; ?></td>
<td><?php echo $row['other_expense']; ?></td>
<td><?php echo $row['amount']; ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td colspan="12" align="center">
<p> <input type="submit" value="Generate Report" name="generatereport"> </p>
</td>
</tr>
</div>
</tbody>
</table>
</form>
</body>
</html>
Views (report_view.php)
<?php
header("Content-type: application/octet-stream");
header("Content-type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet charset=utf-8");
header("Content-Disposition: attachment; filename=Emp_List.xls");
header("Pragma: no-cache");
header("Expires: 0");
?>
<table class="display" id="userListTbl">
<thead>
<tr>
<td>Emp_ID</td>
</tr>
</thead>
<tbody>
<?php foreach($selected_emp as $v){ ?>
<tr>
<td><?php echo $v; ?></td>
</tr>
<?php } ?>
</tbody>
</table>

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++;
}

Bootstrap popover not working in while loop

I'm trying to use the popover element from bootstrap's framework for Javascript/jQuery and it only works with the first one in the while loop. How can I make it work for all of them?
Why is this? Been trying to figure this out for a bit...
<?php
require 'include.php';
session_start();
$selectBets = $dbc->query("SELECT * FROM `bets` ORDER BY `bid` DESC LIMIT 10");
?>
<style type="text/css">
#hash_text {
font-size: 3.8px;
}
</style>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Bet Number</th>
<th>Amount</th>
<th>Send Address</th>
<th>Time Created</th>
<th>Time Expires</th>
<th>Chance to Win</th>
<th>Payout Multiplier</th>
<th>Final Profit</th>
<th>Server Hash</th>
</tr>
</thead>
<tbody>
<?php while($BetsArray = $selectBets->fetch()) { ?>
<tr>
<td><?php echo $BetsArray['bid']; ?></td>
<td><?php echo $BetsArray['amount']; ?></td>
<td><?php echo $BetsArray['deposit_address']; ?></td>
<td><?php echo date('m/d/Y - H:i:s', $BetsArray['time_created']); ?></td>
<td><?php echo date('m/d/Y - H:i:s', $BetsArray['time_expires']); ?></td>
<td><?php echo $BetsArray['win_chance']; ?></td>
<td><?php echo $BetsArray['multiplier']; ?></td>
<td><?php echo $BetsArray['profit']; ?></td>
<td><a id="hash" data-container="body" data-toggle="popover" data-placement="right">Click here for Server Hash</a></td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('#hash').popover({
html: true,
placement: 'right',
content: '<?php echo '<span id="hash_text">' . hash('sha512', $BetsArray['number'] . '-' . $_SESSION['client_seed']) . '</span>'; ?>'
});
});
</script>
You are creating the popover element by duplicating the ids. Change it to class and see it working.
<a id="hash" data-container="body" data-toggle="popover" data-placement="right">Click here for Server Hash</a>
When you bind to the popover using the id selector $('#hash') it will select only the first element with id that appears in DOM and hence the behavior that you are seeing.
If you want to place a quick fix then you can use attribute selector to select the id like this.
$('[id=hash]').popover({
html: true,
placement: 'right',
content: '<?php echo '<span id="hash_text">' . hash('sha512', $BetsArray['number'] . '-' . $_SESSION['client_seed']) . '</span>'; ?>'
});
But never ever do that

Categories