can't transfer php ajax to mysql amchart chart

can't transfer php ajax to mysql amchart chart - php

php ajax and mssql amchart graphic design I'm using. I only want to get out of the graphics when I do the graphics when the page is opened only when I open it, but loading data is coming where the chart is located
I'm pulling my data from range.php
amchart does not come to my garage alone, I am using ajax method
please help me as my code below
index.php page
<?php
$conn = odbc_connect("Driver={SQL Server Native Client 11.0};Server=DESKTOP-G2FDO11;Database=Mapa;Trusted_Connection=Yes", "", "");
$query = "SELECT TOP (1000) [id]
,[firin_adi]
,[Akim]
,[voltaj]
,[Guc]
,[zaman]
FROM [Mapa].[dbo].[test]";
$sql = odbc_exec($conn, $query);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL | softAOX Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
</head>
<body>
<br/>
<div class="container">
<h2 align="center">Date Range Search with jQuery DatePicker using Ajax, PHP & MySQL</h2>
<br/>
<br/>
<div class="col-md-2">
<input type="text" name="From" id="From" class="form-control" placeholder="From Date"/>
</div>
<div class="col-md-2">
<input type="text" name="to" id="to" class="form-control" placeholder="To Date"/>
</div>
<div class="col-md-8">
<input type="button" name="range" id="range" value="Range" class="btn btn-success"/>
</div>
<div class="clearfix"></div>
<br/>
<div id="purchase_order">
<table class="table table-bordered">
<tr>
<th width="10%">id</th>
<th width="35%">firin_adi</th>
<th width="40%">Akim</th>
<th width="10%">Voltaj</th>
<th width="5%">zaman</th>
</tr>
<?php
while($row= odbc_fetch_array($sql))
{
?>
<tr>
<td><?php echo $row["id"]; ?></td>
<td><?php echo $row["firin_adi"]; ?></td>
<td><?php echo $row["Akim"]; ?></td>
<td><?php echo $row["voltaj"]; ?></td>
<td>$ <?php echo $row["zaman"]; ?></td>
</tr>
<?php
}
?>
<tr>
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"titles":[{"text":"Step Line Chart"}],
"theme": "none",
"autoMarginOffset":0,
"dataLoader": {
"url": "http://localhost/filter/range.php"
},
"valueAxes": [{
"axisAlpha": 0,
"position": "right"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[zaman]]<br><b>[[Akim]] C</b>",
"type": "step",
"lineThickness": 2,
"bullet":"square",
"bulletAlpha":0,
"bulletSize":4,
"bulletBorderAlpha":0,
"valueField": "Akim"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#882525",
"scrollbarHeight":100,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":1,
"graphLineColor":"#c2c253",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"fullWidth":true,
"categoryBalloonDateFormat": "JJ:NN:SS, DD MMMM",
"cursorAlpha": 0.01,
"graphBulletAlpha": 10
},
"categoryField": "zaman",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
}
});
chart.addListener("dataUpdated", zoomChart);
function zoomChart(){
chart.zoomToDates(new Date(2018, 0), new Date(2020, 0));
}
</script>
<!-- HTML -->
<div id="chartdiv"></div>
</tr>
<?php
?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<!-- Script -->
<script>
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$(function(){
$("#From").datepicker();
$("#to").datepicker();
});
$('#range').click(function(){
var From = $('#From').val();
var to = $('#to').val();
if(From != '' && to != '')
{
$.ajax({
url:"range.php",
method:"POST",
data:{From:From, to:to},
success:function(data)
{
$('#purchase_order').html(data);
}
});
}
else
{
alert("Please Select the Date");
}
});
});
</script>
</body>
</html>
//////////////
range.php page
<!doctype html>
<html>
<head><script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script></head>
<?php
// Range.php
if(isset($_POST["From"], $_POST["to"]))
{
$conn = odbc_connect("Driver={SQL Server Native Client 11.0};Server=DESKTOP-G2FDO11;Database=Mapa;Trusted_Connection=Yes", "", "");
$result = '';
$query = "SELECT TOP (1000) [id]
,[firin_adi]
,[Akim]
,[voltaj]
,[Guc]
,[zaman]
FROM [Mapa].[dbo].[test] WHERE [zaman] BETWEEN '".$_POST["From"]."' AND '".$_POST["to"]."'";
$sql = odbc_exec($conn, $query);
$result .='
<table class="table table-bordered">
<tr>
<th width="10%">id</th>
<th width="35%">Cfirin_adi</th>
<th width="40%">Akim/th>
<th width="10%">guc</th>
<th width="5%">zaman</th>
</tr>
';
if(odbc_num_rows($sql) > 0)
{
while($row = odbc_fetch_array($sql))
{
$result .='
<tr>
<td>'.$row["id"].'</td>
<td>'.$row["firin_adi"].'</td>
<td>'.$row["Akim"].'</td>
<td>'.$row["voltaj"].'</td>
<td>'.$row["zaman"].'</td>
</tr>';
}
$result .='<tr>
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"titles":[{"text":"Step Line Chart"}],
"theme": "none",
"autoMarginOffset":0,
"dataLoader": {
"url": "http://localhost/filter/range.php"
},
"valueAxes": [{
"axisAlpha": 0,
"position": "right"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[zaman]]<br><b>[[Akim]] C</b>",
"type": "step",
"lineThickness": 2,
"bullet":"square",
"bulletAlpha":0,
"bulletSize":4,
"bulletBorderAlpha":0,
"valueField": "Akim"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#882525",
"scrollbarHeight":100,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":1,
"graphLineColor":"#c2c253",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"fullWidth":true,
"categoryBalloonDateFormat": "JJ:NN:SS, DD MMMM",
"cursorAlpha": 0.01,
"graphBulletAlpha": 10
},
"categoryField": "zaman",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
}
});
chart.addListener("dataUpdated", zoomChart);
function zoomChart(){
chart.zoomToDates(new Date(2018, 0), new Date(2020, 0));
}
</script>
<!-- HTML -->
<div id="chartdiv"></div>
</tr>';
}
else
{
$result .='
<tr>
<td colspan="5">No Purchased Item Found</td>
</tr>';
}
$result .='</table>';
echo $result;
}
?>
<body>
</body>
</html>

Related

Why html loads completely before loading datatable?

For downloading button I had refer page:
https://www.datatables.net/extensions/buttons/examples/initialisation/export.html
For server side I had refer page:
https://datatables.net/examples/data_sources/server_side.html
I had refer above page for making datatable to get data from database and download in different format. But the main problem is it first load the html table. after completely loading html table it shows the datatable which is noticeable for large no of rows. I have to get large no of rows to show in datatable and export the file in excel. Can anyone help me how can i load datatable without loading html table.
Here is my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- for button -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
<!-- for button -->
</head>
<body>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th style="text-align: center;">Model No</th>
<th style="text-align: center;">BIll NO</th>
<th style="text-align: center;">Name Of Party</th>
<th style="text-align: center;">Bill Miti</th>
<th style="text-align: center;">Invoice Date</th>
<th style="text-align: center;">IMEI No</th>
<th style="text-align: center;">Price</th>
<th style="text-align: center;"><div id="section_notTo_Print"> Edit </div></th>
</tr>
</thead>
<tbody>
<?php
include 'dbconnect.php';
//get records from database
$query = $con->query("SELECT * FROM salesreport ORDER BY id DESC");
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){ ?>
<tr>
<td style="text-align: center;"><?php echo $row['modelno']; ?></td>
<td style="text-align: center;"><?php echo $row['billno']; ?></td>
<td style="text-align: center;"><?php echo $row['nameOfParty']; ?></td>
<td style="text-align: center;"><?php echo $row['billMiti']; ?></td>
<td style="text-align: center;"><?php echo $row['invoiceDate']; ?></td>
<td style="text-align: center;"><?php echo $row['IMEINo']; ?></td>
<td style="text-align: center;"><?php echo $row['price']; ?></td>
<td style="text-align: center;"><div id="section_notTo_Print"> Edit </div></td>
<!-- <td><?php //echo $row['Quantity']; ?></td> -->
<!-- <td><?php //echo ($row['status'] == '1')?'Active':'Inactive'; ?></td> -->
</tr>
<?php } }else{ ?>
<tr><td colspan="5">No distributor found.....</td></tr>
<?php } ?>
</tbody>
</table>
<!-- for exporting -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js">
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
// "serverSide": true,
// "ajax": "datatable2.php",
dom: 'lBfrtip',
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
} );
} );
</script>
<!-- for exporting -->
</body>
</html>

This code for your reference it`s sample code how to load table record from database in datatable
Viewfile
<table id="placeTable" class="table table-striped table-bordered responsive nowrap">
<thead class="">
<tr>
<th>Name</th>
<th>Location</th>
<th>Status</th>
<th>Action</th>
<th></th>
</tr>
</thead>
</table>
</div><!--table-responsive-->
<script>
jQuery(document).ready(function () {
jQuery('#placeTable').DataTable({
"oLanguage": {
"sProcessing": '<img alt src="<?php echo base_url('assets/images/loaders/CustomLoader.gif'); ?>" style="opacity: 1.0;filter: alpha(opacity=100);">'
},
"processing": true,
"serverSide": true,
"responsive": true,
"order": [[4, "DESC"]],
"ajax": {
url: "<?php echo site_url('admin/place/getPlace'); ?>",
},
"columns": [
{"taregts": 0, "data": "name"},
{"taregts": 1, "data": "location"},
{"taregts": 2,
"searchable": false,
"orderable": false,
"sClass": "text-center",
"render": function (data, type, row) {
var id = row.id;
if (row.is_active === '1') {
var out = ' <a class="btn btn-success statusenable" href="#" \n\ \n\
title="Click to Change status" data-href="<?php echo site_url('admin/place/change_status') ?>/' + id + '" data-toggle="modal" data-target="#confirm-status" title="Confirm">\n\
Enable</i></a> ';
return out;
} else if (row.is_active === '0') {
var out = ' <a class="btn btn-danger statusenable" href="#" \n\ \n\
title="Click to Change status" data-href="<?php echo site_url('admin/place/change_status') ?>/' + id + '" data-toggle="modal" data-target="#confirm-status" title="Confirm">\n\
Disable</i></a> ';
return out;
}
}
},
{"taregts": 3, "searchable": false,
"orderable": false,
"sClass": "text-center",
"render": function (data, type, row) {
var id = row.id;
return '<a class="actioncol cursor view" href=\'<?php echo site_url('admin/place/view'); ?>/' + id + '\'\n\
title="View"><i class="glyphicon glyphicon-eye-open"></i></a>\n\<a class="actioncol cursor view" href=\'<?php echo site_url('admin/place/edit'); ?>/' + id + '\'\n\
title="Edit"><i class="glyphicon glyphicon-edit"></i></a>';
}
},
{"taregts": 4, "visible": false,
render: function (data, type, row) {
return row.id;
}
}
]
});
});
</script>
Controller Place.php file
//get all place
public function getPlace() {
$columns = array('name', 'location','is_active','id','id');
$request = $this->input->get();
$condition = array();
$getfiled = "name,is_active,location,id";
echo $this->db_common->getDataTableSource('place', $columns, $condition, $getfiled, $request);
die();
}
model for database query common.php
/*
* This function is to create the data source of the Jquery Datatable
*
* #param $tablename Name of the Table in database
* #param $datatable_fields Fields in datatable that avalable for filtering
* #param $condition_array conditions for Query
* #param $data The field set tobe return to datatables
* #param $request The Get or Post Request Sent from Datatable
* #param $join_str Join array for Query
* #return JSON data for datatable
*/
function getDataTableSource($tablename, $datatable_fields = array(), $conditions_array = array(), $data = '*', $request, $join_str = array()) {
$output = array();
//Fields tobe display in datatable
$this->db->select($data);
//Making Join with tables if provided
if (!empty($join_str)) {
foreach ($join_str as $join) {
if (!isset($join['join_type'])) {
$this->db->join($join['table'], $join['join_table_id'] . '=' . $join['from_table_id']);
} else {
$this->db->join($join['table'], $join['join_table_id'] . '=' . $join['from_table_id'], $join['join_type']);
}
}
}
//COnditions for Query
if (!empty($conditions_array)) {
$this->db->where($conditions_array);
}
//Total record in query tobe return
$output['recordsTotal'] = $this->db->count_all_results($tablename, FALSE);
//Filtering based on the datatable_fileds
if ($request['search']['value'] != '') {
$this->db->group_start();
for ($i = 0; $i < count($datatable_fields); $i++) {
if ($request['columns'][$i]['searchable'] == true) {
$this->db->or_like($datatable_fields[$i], $request['search']['value']);
}
}
$this->db->group_end();
}
//Total number of records return after filtering not no of record display on page.
//It must be counted before limiting the resultset.
$output['recordsFiltered'] = $this->db->count_all_results(NULL, FALSE);
//Setting Limit for Paging
$this->db->limit($request['length'], $request['start']);
//ordering the query
if (isset($request['order']) && count($request['order'])) {
for ($i = 0; $i < count($request['order']); $i++) {
if ($request['columns'][$request['order'][$i]['column']]['orderable'] == true) {
$this->db->order_by($datatable_fields[$request['order'][$i]['column']] . ' ' . $request['order'][$i]['dir']);
}
}
}
$query = $this->db->get();
$output['draw'] = $request['draw'];
$output['data'] = $query->result_array();
return json_encode($output);
}`enter code here`

bootstrap editable - how to transfer dropdown value to SQL table?

I am currently working on a project that shows data from an SQL table using bootstrap editable for live editing.
It works fine - changes are transferred to the SQL table. What is already working?:
Showing current value from SQL table
Providing a drop-down for selection
Transferring changed values to SQL table
-> BUT Part 3 (transferring changed value) is only working for free-text input (class xedit).
What I am looking for is the code for: transferring chosen value of drop-down-list to SQL-Table
Here is the HTML-code:
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">EDIT YOUR CHARACTERS</div>
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">NAME</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">ROLE</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">SECOND ROLE</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("SELECT * FROM characters");
$i=0;
while($fetch = mysql_fetch_array($query))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td class="xedit" id="'.$fetch['id'].'" key="name">'.$fetch['name'].'</td>
<td class="xedit" id="'.$fetch['id'].'" key="role">'.$fetch['role'].'</td>
<td class="xedit2" id="'.$fetch['id'].'" key="secondrole">'.$fetch['secondrole'].' </td>
</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script>
$(function(){
$('.rolestatus').editable({
source: [
{value: 1, text: 'DD'},
{value: 2, text: 'HEAL'},
{value: 3, text: 'TANK'}
]
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
Here is the process.php code
<?php
include("connect.php");
if($_GET['id'] and $_GET['data'])
{
$id = $_GET['id'];
$data = $_GET['data'];
$key = $_GET['key'];
if(mysql_query("update characters set $key='$data' where id='$id'"))
echo 'success';
}
?>
So does anybody know how I can transfer the chosen dropdown-value (class -> xedit2) to SQL table?
Hope you can help!

Not sure exacly how x-editable works
But in first look i think that the type of your ajax should be "POST" if you want to update some data. And in my opinion you have syntax error in your sql query near "$key"

HighCharts data defined in a HTML Table using PHP MySQL

I'm using HighCharts to display a chart that is pulling data on HTML Table and my table is populated by PHP. Somehow it displaying the Title of the Chart which is Announcement Likes Chart but the Bar Chart is not included in it. Any answer with or without explanation is highly appreciated :)
<table class="table table-striped table-hover ">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">Announcement Table</h1>
</div>
<div id="tablecon" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable" class="table table-striped table-hover ">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Likes</th>
</tr>
</thead>
<tbody class="table table-bordered table-hover ">
<?php
//set up mysql connection
mysql_connect("localhost", "brmhelpd_root", "siopao04") or die(mysql_error());
//select database
mysql_select_db("brmhelpd_brm") or die(mysql_error());
//select all records form tblmember table
$query = 'SELECT type,title,likes FROM newsfeed ORDER BY created_at ASC';
//execute the query using mysql_query
$result = mysql_query($query);
if($result === FALSE) {
die(mysql_error()); // TODO: better error handling
}
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($result)) {
echo ' <tr> ';
echo ' <td> ';
echo $row['type'];
echo ' </td> ';
echo ' <td> ';
echo $row['title'];
echo ' </td> ';
echo ' <td> ';
echo $row['likes'];
echo ' </td> ';
echo ' </tr> ';
}
?>
</tbody>
</table>
</div>
</div>
</table>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="login-folder/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="login-folder/assets/js/custom.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#datatable').DataTable( {
"lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]]
});
} );
</script>
<script>
$(function () {
$('#tablecon').highcharts({
data: {
table: 'datatable'
},
chart: {
type: 'column'
},
title: {
text: 'Announcement Likes Chart'
},
yAxis: {
allowDecimals: true,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
});
</script>

I'm giving up to this problem. I'll populate my table with ajax better thanks for Sebastian Bochan suggestion.

Properly updates in database not in datatables server side

When we update the records in database its updated perfectly and not reflected in datatables. When we refresh the page datatables are updated.I need with out refresh the page datatables are updated.please help me.
<?php
define('DB_SERVER', 'localhost'); // Your Database host
define('DB_USERNAME', 'root'); // Your Database user name
define('DB_PASSWORD', 'root'); // Your Database password
define('DB_DATABASE', 'qwer'); // Your Database Name
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE); // Connection
$sql = "SELECT nickname, email ,created_date_time,real_chips FROM users ";
$rs = mysqli_query($connection,$sql);
$str ="";
$data = array();
while ($row = mysqli_fetch_assoc($rs))
{
$str .= '<tr id="dialog-confirm">';
$str .= '<td>'.$row["nickname"].' </td> <td>'. $row["email"].'</td><td>'. $row["created_date_time"].'</td><td>'. $row["real_chips"].'</td>';
$str .= '</tr>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Admin demo</title>
<style type="text/css" title="currentStyle">
#import "demo_page.css";
#import "demo_table.css";
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!--<link rel="stylesheet" type="text/css" href="/css/result-light.css"> -->
<script type='text/javascript' src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type='text/javascript' src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
$.datepicker.regional[""].dateFormat = 'yy-mm-dd';
$.datepicker.setDefaults($.datepicker.regional['']);
drawDataTable = function()
{
$('#example').dataTable({
"aoColumns": [{
"sWidth": "200px"
},
null,
null,
null]
})
.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [{
type: "text"
}, {
type: "text"
}, {
type: "date-range"
},{
type: "text"
}]
});
}
// call datatable for the first time when page loads
drawDataTable();
$('#example').on("click", "tr#dialog-confirm", function () {
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
//' + $.trim(tableData[0]) + '
var dynamicDialog = $('<div id="MyDialog" > <div><div style="width:150px;float:left;">Amount</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="text" name="amount" id="amount" style="width:150px;"/><input type="text" name="nickname" id="nickname" value="'+$.trim(tableData[0])+'" style="display:none;"/></div></div><div><div style="width:150px;float:left;">Password</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="password" name="password" id="password" style="width:150px;"/></div></div></div>');
dynamicDialog.dialog({
title: "Admin chips adding",
modal: true,
height: 250,
width: 400,
buttons: [{
text: "Yes",
click: function ()
{
$.ajax({
type: "POST",
dataType: "html",
url: "Chips_AddedByAdmin.php",
cache: false,
data: {
username: $.trim(tableData[0]),
amount: $('#amount').val(),
password: $('#password').val()
},
beforeSend: function () {
$('#MyDialog').html('loading please wait...');
},
success: function (htmldata) {
//destroy existing datatable
$('#example').dataTable().fnDestroy();
//call datatable
drawDataTable();
$('#MyDialog').html("You have successfully updated the database");
dynamicDialog.dialog("close");
}
});
}
}, {
text: "No",
click: function (e) {
$(this).dialog("close");
}
}]
});
});
});
});//]]>
</script>
</head>
<body>
<table id="example" class="display">
<thead>
<tr>
<th style="width: 150px;">UserName</th>
<th style="width: 150px;">Email</th>
<th style="width: 180px;">Created Date</th>
<th style="width: 180px;">Real Chips</th>
</tr>
<tr>
<th style="width: 150px;">UserName</th>
<th style="width: 150px;">Email</th>
<th style="width: 180px;">Created Date</th>
<th style="width: 180px;">Real Chips</th>
</tr>
</thead>
<tbody>
<?php
echo $str;
?>
</tbody>
</table>
</body>
</html>
And this ajaxphp code
<?php
require_once("configure.php");
echo $nickname = $_POST['username'];
echo $amount = $_POST['amount'];
echo $password = $_POST['password'];
echo $sql = "SELECT * FROM users WHERE nickname ='admin' and password='$password';";
$rs = mysqli_query($connection,$sql);
$numrows=mysqli_num_rows($rs);
if($numrows > 0)
{
echo $sql = "update users set real_chips=real_chips+'$amount' where nickname='$nickname';";
$rs = mysqli_query($connection,$sql);
}
?>

Please could you name your files ?
What did you receive after calling the Chips_AddedByAdmin.php (if it's the second file) ?
May be you can re-run your research in order to repopulate your datatable.
Or you can do another ajax request in case of success of your first request to reload just the datatable
Best regards,
Morony

Not Update datatables properly but in database updated

When we update the records in database its updated perfectly and not reflected in datatables. When we refresh the page datatables are updated.I need with out refresh the page datatables are updated.please help me.
<?php
define('DB_SERVER', 'localhost'); // Your Database host
define('DB_USERNAME', 'root'); // Your Database user name
define('DB_PASSWORD', 'root'); // Your Database password
define('DB_DATABASE', 'qwer'); // Your Database Name
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE); // Connection
$sql = "SELECT nickname, email ,created_date_time,real_chips FROM users ";
$rs = mysqli_query($connection,$sql);
$str ="";
$data = array();
while ($row = mysqli_fetch_assoc($rs))
{
$str .= '<tr id="dialog-confirm">';
$str .= '<td>'.$row["nickname"].' </td> <td>'. $row["email"].'</td><td>'. $row["created_date_time"].'</td><td>'. $row["real_chips"].'</td>';
$str .= '</tr>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Admin demo</title>
<style type="text/css" title="currentStyle">
#import "demo_page.css";
#import "demo_table.css";
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<!--<link rel="stylesheet" type="text/css" href="/css/result-light.css"> -->
<script type='text/javascript' src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type='text/javascript' src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
$.datepicker.regional[""].dateFormat = 'yy-mm-dd';
$.datepicker.setDefaults($.datepicker.regional['']);
drawDataTable = function()
{
$('#example').dataTable({
"aoColumns": [{
"sWidth": "200px"
},
null,
null,
null]
})
.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [{
type: "text"
}, {
type: "text"
}, {
type: "date-range"
},{
type: "text"
}]
});
}
// call datatable for the first time when page loads
drawDataTable();
$('#example').on("click", "tr#dialog-confirm", function () {
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
//' + $.trim(tableData[0]) + '
var dynamicDialog = $('<div id="MyDialog" > <div><div style="width:150px;float:left;">Amount</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="text" name="amount" id="amount" style="width:150px;"/><input type="text" name="nickname" id="nickname" value="'+$.trim(tableData[0])+'" style="display:none;"/></div></div><div><div style="width:150px;float:left;">Password</div><div style="float:left;">:</div><div style="width:150px;float:left;"><input type="password" name="password" id="password" style="width:150px;"/></div></div></div>');
dynamicDialog.dialog({
title: "Admin chips adding",
modal: true,
height: 250,
width: 400,
buttons: [{
text: "Yes",
click: function ()
{
$.ajax({
type: "POST",
dataType: "html",
url: "Chips_AddedByAdmin.php",
cache: false,
data: {
username: $.trim(tableData[0]),
amount: $('#amount').val(),
password: $('#password').val()
},
beforeSend: function () {
$('#MyDialog').html('loading please wait...');
},
success: function (htmldata) {
//destroy existing datatable
$('#example').dataTable().fnDestroy();
//call datatable
drawDataTable();
$('#MyDialog').html("You have successfully updated the database");
dynamicDialog.dialog("close");
}
});
}
}, {
text: "No",
click: function (e) {
$(this).dialog("close");
}
}]
});
});
});
});//]]>
</script>
</head>
<body>
<table id="example" class="display">
<thead>
<tr>
<th style="width: 150px;">UserName</th>
<th style="width: 150px;">Email</th>
<th style="width: 180px;">Created Date</th>
<th style="width: 180px;">Real Chips</th>
</tr>
<tr>
<th style="width: 150px;">UserName</th>
<th style="width: 150px;">Email</th>
<th style="width: 180px;">Created Date</th>
<th style="width: 180px;">Real Chips</th>
</tr>
</thead>
<tbody>
<?php
echo $str;
?>
</tbody>
</table>
</body>
</html>
And ajax dataupdate php is here
<?php
require_once("configure.php");
echo $nickname = $_POST['username'];
echo $amount = $_POST['amount'];
echo $password = $_POST['password'];
echo $sql = "SELECT * FROM users WHERE nickname ='admin' and password='$password';";
$rs = mysqli_query($connection,$sql);
$numrows=mysqli_num_rows($rs);
if($numrows > 0)
{
echo $sql = "update users set real_chips=real_chips+'$amount' where nickname='$nickname';";
$rs = mysqli_query($connection,$sql);
}
?>

Not sure what you have going on here, but this is completely different than how I would do it.
Lets say I had a datatable defined like this:
oTable = $("table").dataTable({ ... settings ... });
If I ever wanted to refresh that datatable, all I would ever have to call is:
oTable.fnDraw();
That's it.
Destroying, building extra functions, etc. is not needed like in your code. It's all right there for you when you open the doc's up.

We Keep Coding

PHP, A popular general-purpose scripting language that is especially suited to web development.

can't transfer php ajax to mysql amchart chart - php

Related

Why html loads completely before loading datatable?

bootstrap editable - how to transfer dropdown value to SQL table?

HighCharts data defined in a HTML Table using PHP MySQL

Properly updates in database not in datatables server side

Not Update datatables properly but in database updated

Categories

Resources