My jQuery datatable is taking a little too long to display some data.
The query is simple. In the database, running the same query returns the same results in microseconds, regardless of size.
Here is how the query looks in my PHP script:
<?php
$searchCommodity = $_POST['commodity'];
$select = "SELECT COMM_CODE, KEY_COMM, MOD_DATE, MOD_USER FROM keyTable WHERE KEY_COMM = '$searchCommodity'";
$query = mysqli_query($dbc, $select);
$out = array();
while($row = $query->fetch_assoc())
{
$out[] = $row;
}
echo json_encode($out);
?>
Most of the data returned is less than 1000 records. But there are a few that return more than 10K to 20K records.
This causes a delay in which if the user is using Firefox, they will receive the "A web page is slowing down your browser. What would you like to do?" error message where they have to select 'Stop' or 'Wait'.
Back in my jQuery, here is how I'm sending the parameter to the PHP script:
$('#commoditySelect').on('change', function()
{
var commodity = $('#commoditySelect').val();
$.post('api/searchKeyComms.php', {commodity:commodity}, function(data)
{
var table = $('#example1').DataTable();
table.clear();
table.search('').draw();
var obj = JSON.parse(data);
obj.forEach(function(item)
{
table.row.add([item.COMM_CODE, item.KEY_COMM, item.MOD_DATE, item.MOD_USER]);
});
table.draw();
});
});
On the main HTML page, near the bottom, I set the datatable like this:
$('#example1').DataTable({
"dataType": "json",
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 550,
"scrollX": true,
"bDestroy": true,
"stateSave": true
});
Is there anything that I can add/change to any of the code above that will improve the performance of the rendering of the datatable?
I found this page: https://datatables.net/forums/discussion/2651/alternative-server-side-php-script
But I am not doing any concatenations. As stated above, it's a simple query that I'm using, and in the database, the data is returned quickly.
I even found this page: rendering large server-side datasets in jquery datatables
But the only thing I got from that page is that datatables are not made for large datasets. 20K doesn't seem too large.
Why loop on your $out array since your $row is already an associative array.. No need to loop.. ^_^
<?php
$searchCommodity = $_POST['commodity'];
$select = "SELECT COMM_CODE, KEY_COMM, MOD_DATE, MOD_USER FROM keyTable WHERE KEY_COMM = '$searchCommodity'";
$query = mysqli_query($dbc, $select);
$row = $query->fetch_assoc()
echo json_encode($row);
?>
Related
I would like to know how to execute a PHP code periodically (for example every 5 seconds) using AJAX. This is the PHP code that I want to execute periodically:
<?php
$result = mysqli_query($con,"SELECT * FROM jqcalendar ORDER BY id DESC LIMIT 0, 1");
while($row = mysqli_fetch_array($result)){
echo "a new event was added";
}
?>
In fact, I am started in AJAX so is there anyone who can provide me a simple example about how to do that?
Do you know what exactly is AJAX?
It looks like you will be using a library for this, so take a read here: http://api.jquery.com/jquery.ajax/
If you are not planning to use jQuery, you could check this XMLHttpRequest project that is cross-browser: https://github.com/ilinsky/xmlhttprequest
Make use of AJAX periodically using a setInterval of 5 seconds where you would make a call to a PHP file you have in your server that would run the code you specified.
Take the following example:
index.html
setInterval(function() {
$.get("file.php", function (data) {
console.log('Good to go, data was loaded');
console.log(data);
});
}, 5000);
file.php
<?php
$result = mysqli_query($con,"SELECT * FROM jqcalendar ORDER BY id DESC LIMIT 0, 1");
while($row = mysqli_fetch_array($result)){
echo "a new event was added";
}
?>
You can use an interval and jQuery get() function:
var myInterval = setInterval(function() {
$.get( "(YOUR URL)", function( data ) {
alert( "Load was performed." );
});
}, 5000);
I have a table called 'items' which has 10 rows. This 'items' table contain 2 columns(id, item_name). item_name is where I store the images' names such as item_fdsj43.jpg, item_bdf34.jpg, and so on...
If I want to displayed all these images, I do something like this:
fetching.php:
$query = "SELECT item_name FROM items";
$mysql_query = mysql_query($query);
while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query)){
$mysql_fetch_assoc_item_name = $mysql_fetch_assoc['item_name'];
echo 'img/'.$mysql_fetch_assoc_item_name;
}
JAVASCRIPT
$('fetching.php', function(data)){
$('#inner_container').append(data);
});
This will display all the data simultaneously and append it on '#inner_container' once the fetching is done. However, this callbacks takes a while and slower compare to search engine of this website (http://www.bedbathstore.com/). Is there any way to boost its speed?
Here i can suggest to you JSON instead of output data using echo below are the sample code
you can modify it for your needs
PHP code
ob_start();
imagepng($my_img);
$imageData = ob_get_contents();
ob_clean();
$results = array(
'price' => $_GET['priceX'],
'image' => base64_encode($imageData)
);
$json = json_encode($results);
echo $json;
Javascript code:
$.getJSON("/ajax-script.php", function(data) {
$("#element").append($("<img />").attr('src', 'data:image/png;charset=utf8;base64,' + data.image));
});
You can use json to retrieve the image paths at once from the server asynchronously and then you can append these images to image container like this,
//fetching.php:
$query = "SELECT item_name FROM items";
$mysql_query = mysql_query($query);
$file_names = array();
while($mysql_fetch_assoc = mysql_fetch_assoc($mysql_query)){
$mysql_fetch_assoc_item_name = $mysql_fetch_assoc['item_name'];
array_push($file_names, 'img/'.$mysql_fetch_assoc_item_name);
}
echo json_encode($file_names);
//JAVASCRIPT
$.getJSON("fetching.php", function(data) {
$.each(data, function() {
$('#inner_container').append($("<img />").attr('src', this);
});
});
Im trying to use a dojo ajax function to call a PHP file that then returns the contents of a DB table in JSON format.
My function:
var _getWeatherInfo = function(){
dojo.xhrget({
url: "PHP/weather.php?ntown=" + _ntown,
handleAs: "json",
timeout: 5000,
load: function(responce, details) {
_updateWeathertData
},
error: function(error_msg, details) {
_handleError(error_msg);
}
});
}
My PHP:
<?php include('configHome.php'); ?>
<?php
$ntown = $_GET['ntown'];
$weather = array();
$query="SELECT * FROM `weather` WHERE `town` = '$ntown'";
$result=mysql_query($query);
while($row = mysql_fetch_row($result)) {
$weather[] = $row[0];
}
echo json_encode($weather);
mysql_close();
?>
When using this code I am getting an error message saying that "$ntown = $_GET['ntown'];" is an undefined index. I have tried removing the index all together and using an actual value in the select statement (i.e. SELECT * FROM weather WHERE town = 'Auckland') but all I get back is the value i enter ["Auckland"], and not the 3 other values that are meant to be returned, ["Auckland", "Sunny", "8", "14"].
Any ideas? I can try add more info if needed. Thanks!
There are some other issues with your code, but to get to the one you are asking the question about. You have this:
while($row = mysql_fetch_row($result)) {
$weather[] = $row[0];
}
What you are doing is just taking the first value of the row (of which there is probably only one, and just sending that back. This is what you need:
$weather = mysql_fetch_row($result);
The basic syntax for adding a RadioButton to the AddRecord option is as follows
active: {
title: 'Activo',
width: '5%',
type: 'radiobutton',
options: { '0': 'No', '1': 'Si' }
},
Ive been trying to make the "options" come from the db but haven't figured a way yet (PHP).
The plugin works by using a $_REQUEST to "dbactions.php?action=", and returns a JSON Array
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['TotalRecordCount'] = $recordCount;
$jTableResult['Records'] = $rows;
print json_encode($jTableResult);
which i presume goes to the "./js/jtable/jquery.jtable.min.js" script.
As far AFAIK/have read i cannot insert php code inside a js script so i'm pretty lost as to how i could make it dynamic. All relevant examples i've found are for asap.net instead of php.
I actually wanted to use a combobox instead of a radiobutton.
So far i've been using a view to show the data, but when i insert new data i insert directly to the table (which has 3 fields instead of the 4 shown), so i need to show the name field as an option but insert the id (plus 2 dates) into one of the tables that conform the view.
Anyone have any ideas on how to accomplish this?
In main file
<?php include 'file.php'; ?>
<script type="text/javascript">
active: {
title: 'Activo',
width: '5%',
type: 'radiobutton',
options: <?php echo $options ; ?>
</script>
In php file.php
<?php
//Open database connection
include 'Connections/localhost.php';
$result = mysql_query("SELECT
id,
option
FROM
options;");
//Add all records to an array
$rows = array();
while($row = mysql_fetch_array($result))
{
$rows[$row['id']] = $row['option'];
}
//Return result to jTable
$options = json_encode( $rows);
//Close database connection
mysql_close($localhost);
?>
I currently have code which will pull the first element from a database record and print it in an output box.
What is the easiest way to print the rest of the elements of that record to the other relevant output boxes?
My PHP file takes an 'id' specified by the user.
$id = $_POST['id'];
$query = "SELECT * FROM Customers WHERE ID = $id";
$result= mysql_query($query);
if (mysql_num_rows($result) > 0) {
while($row = mysql_fetch_row($result)) {
echo $row[1];
}
}
And this is the code in the HTML file
jQuery(document).ready(function(){
jQuery("input.myid").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
var search_val=jQuery("input.myid").val();
jQuery.post("find.php", {id : search_val}, function(data){
if (data.length>0){
jQuery("input.fname").val(data);
}
});
}
The code takes the id ('myid') and prints to a text box named 'fname'.
I find it easier to json_encode the whole thing (record I mean) and use something like jquery.populate which basically takes an object and fills a form with it (all fields it can find which names' match properties from the object).
I hope this makes sense.