We Keep Coding

run php function using ajax to update phpBB template variable

NOTE: There are a lot of details here, so if anyone needs a condensed version of this, I'm happy to summarize.
I am trying to run a function in my php file, that will in turn, update a template variable. As an example, here is one such function:
function get_vehicle_makes()
{
$sql = 'SELECT DISTINCT make FROM phpbb_vehicles
WHERE year = ' . $select_vehicle_year;
$result = $db->sql_query($sql);
while($row = $db->sql_fetchrow($result))
{
$template->assign_block_vars('vehicle_makes', array(
'MAKE' => $row['make'],
));
}
$db->sql_freeresult($result);
}
I know that this function works. I am trying to access this function in my Javascript with:
function updateMakes(pageLoaded) {
var yearSelect = document.getElementById("vehicle_year");
var makeSelect = document.getElementById("vehicle_make");
var modelSelect = document.getElementById("vehicle_model");
$('#vehicle_make').html('');
$.ajax({ url: '/posting.php',
data: {action: 'get_vehicle_makes'},
type: 'post',
success:function(result)//we got the response
{
alert(result);
},
error:function(exception){alert('Exception:'+exception);}
});
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
if(pageLoaded){
makeSelect.value='{VEHICLE_MAKE}{DRAFT_VEHICLE_MAKE}';
updateModels(true);
}else{
makeSelect.selectedIndex = -1;
updateModels(false);
}
}
The section in my javascript...
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
... is a block loop and will loop through the block variable, vehicle_makes, set in the PHP function. This works upon loading the page because the page that loads, is the new.php that I'm trying to do an Ajax call to, and all of the PHP runs in that file upon loading. However, I need the function to run again, to update that block variable, since it will change based on a selection change in the HTML. I don't know if this type of block loop is common. I'm learning about them since they are used with a forum I've installed on my site, phpBB. (I've looked in their support forums for help on this.). I think another possible solution would be to return an array, but I would like to stick to the block variable if possible for the sake of consistency.
This is the bit of code in the php that reads the $_POST, and call the php function:
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
//Get vehicle vars - $select_vehicle_model is used right now, but what the heck.
$select_vehicle_year = utf8_normalize_nfc(request_var('vehicle_year', '', true));
$select_vehicle_make = utf8_normalize_nfc(request_var('vehicle_make', '', true));
$select_vehicle_model = utf8_normalize_nfc(request_var('vehicle_model', '', true));
switch($action) {
case 'get_vehicle_makes' :
get_vehicle_makes();
break;
case 'get_vehicle_models' :
get_vehicle_models();
break;
// ...etc...
}
}
And this is the javascript to run the Ajax:
function updateMakes(pageLoaded) {
var yearSelect = document.getElementById("vehicle_year");
var makeSelect = document.getElementById("vehicle_make");
var modelSelect = document.getElementById("vehicle_model");
$('#vehicle_make').html('');
$.ajax({ url: '/posting.php',
data: {action: 'get_vehicle_makes'},
type: 'post',
success:function(result)//we got the response
{
alert(result);
},
error:function(exception){alert('Exception:'+exception);}
});
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
if(pageLoaded){
makeSelect.value='{VEHICLE_MAKE}{DRAFT_VEHICLE_MAKE}';
updateModels(true);
}else{
makeSelect.selectedIndex = -1;
updateModels(false);
}
}
The javascript will run, and the ajax will be successful. I've checked the network tab and console tab, and have done multiple tests to confirm that. It appears that the block variable is not being set. Is what I'm trying to do even possible? I have a feeling that to get this answer, we'll need to know more about phpBB's template engine, and how it works with these template variable. Also, just to clarify, I think the term 'template variable' is specific to phpBB. It's the term they use for variables set in PHP, to be accessed by the HTML, and javascript files. This works through a phpBB class called 'template', and a function called 'assign_block_vars'. I don't know exactly how that work.
If anyone has done this for phpBB, or has any ideas, I would appreciate it.

Think I found the problem. At the beginning of my PHP, I have an include statement to include the PHP file containing the class for connecting to the database. In the statement $result = $db->sql_query($sql);, $db is set in this other PHP file. I don't entirely understand, but because of that, $db was outside of the scope of my function get_vehicle_makes(). I had to create a class inside my PHP file, and pass $db as a parameter to the function using:
class vehicle {
public function __construct($db)
{
$this->db = $db;
}
function get_vehicle_makes()
{
$sql = 'SELECT make FROM phpbb_vehicles
WHERE year = ' . $select_vehicle_year;
$result = $this->db->sql_query($sql);
Hope this helps.

Refresh PHP Page when data in Database Updated

I want my client side web to auto-refresh when data in my Database updated, when adding or deleting data I have succeeded however when the data changed, it still fails.
This is my code for checking data from database:
<script>
var row1 = "<?php echo $variable; ?>";
var processUpdate = function( response ) {
var x = response;
//console.log(x);
if (row1 != x) {
window.location.reload();
}
}
var checkUpdates = function() {
serverPoll = setInterval(function() {
$.get('check.php', { lastupdate: 1 }, processUpdate, 'html');
}, 1000)
};
$(document).ready(checkUpdates);
</script>
check.php:
$query = mysqli_query($koneksi, "SELECT * FROM table");
$number = mysqli_num_rows($query);
echo $number;
What should I change to be automatically refreshed if every data in the table is changed?

You can use trigger that will insert some info about each table update in another table, and then just query the num rows on 'changes' table in a similar way you check for new ones here:
DELIMITER //
CREATE TRIGGER table_update_trigger AFTER UPDATE ON table
FOR EACH ROW BEGIN
INSERT INTO table_history
(
change
)
(
NEW.some_value,
);
END
//
The advantage of this solution is you don't need to introduce/rely on/maintain any other db system like Redis and the checking code is not responsible for keeping and updating any counters and queries for updates, inserts and deletes in a similar fashion. Also you might extend the table_history table to log all the fields you are interested in in terms of tracking changes and end up having useful changelog for the purpose of the application.

Turning a Javascript Object Value into a Global Variable

I have an object from FullCalender
events: [
<?
$sql = "Query removed";
if ($result=mysqli_query($link,$sql))
{
// Fetch one and one row
while ($row=mysqli_fetch_assoc($result))
{
echo " {
title: '".$row['eName']."',
backgroundColor: 'green',
start: '".$row['scheduledDate']."',
eventID: '".$row['eID']."'
}, " ;
}
// Free result set
mysqli_free_result($result);
}
?>
],
eventClick: function(event) {
$('#modifydialog').dialog('open');
$("#notes").val(event.eventID);
var eID = event.eventID;
}
I am trying desperately to make an object (the event.eventID into a global variable so I can use it here:
var eID = '';
// handles the click event for link 1, sends the query
function getOutput() {
getRequest(
'checkDelete.php?sID=<?echo $sID;?>&eID='+eID, // URL for the PHP file
drawOutput, // handle successful request
drawError // handle error
);
Basically, I'm trying to take the value, and pop it into the ajax url for the get statement - I am open to suggestions if there are better ways. Thank you for any advice.

I think you can use:
'checkDelete.php?sID=<?echo $sID;?>&eID='+$("#notes").val()
that is if the value of this element won't be changed in the meantime. You can also declare eID in the global scope and use eID = event.eventID; to set it.
var eID;
events: [
....
],
eventClick: function(event) {
.....
eID = event.eventID;
}
you can even do this:
window.eID = event.eventID;

Export All from DataTables with Server Side processing?

I have tables which use DataTables Server Side processing to show on my website. I want to be able to 'Export All' and have all rows be exported, not just those rows being displayed. There are 60000+ rows and 65+ columns, so it must be done with server side processing.
I have tried a few things, but so far nothing has worked.
I have tried this:
{ extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
}
Which only exported the rows that were showing on the page.
I've tried this:
{
text: 'Export All to Excel',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('draw', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
}).draw();
}
}
This sends the whole table's data to the screen instead of using the pagination and sending the whole data set to an excel file.
I've searched around on Google and here in SO, but have not found a solution that works.
I should also mention that I want to Export All based on the current filters set on the table. So that the end user will get an Export of only those rows that they are searching for. They typically limit it to 30k - 40k rows, still with the 65+ columns. I don't (yet) allow to remove/hide columns.
EDIT/UPDATE
Here's a secondary consideration: If I can't Export All from a response from the server, can I build the Excel file on the server? My servers don't have Excel installed and I will still want my end user to get the file. I'm sure that I'd have to find a way to get Excel onto my servers, but how would I transfer any created files to the end user and would that even be any faster than just sending a response with the whole dataset and creating the Excel file on the user's computer?
EDIT
It was recommended that I try jquery's $.ajax() to get this to work. If someone could give me an idea of how to do that I'll try that for a third button.
I can already pull all the data, with the same filters and sorting that are added by the user, and do that with a button. The second attempt above does that but sends it to the screen. I have PHPExcel and a file that can create an Excel sheet. How would I take what I get in that second button and send it to the other file to create the Excel sheet? I thought that using jquery's $.ajax() might work, I just don't know how to get it to. I do know that I'll have to use $_POST since the data could be too big to use $_GET to send the data to the PHPExcel file.
I can already export to a CSV, but I need to export with some formatting, which CSV does not have. That's why I'm going to the trouble of use PHPExcel.
EDIT III
I am trying this, though it's not yet working:
{
text: 'Export all to Excel II',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('export', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
})
}
}
EDIT 4
Hopefully the last edit.
I know that I have to do three things to make this work:
Get current Sorting and Filtering
Get dataset with length set to -1
Send this to PHPExcel file for processing and creation of Excel file
I can create a button like this:
{
text: 'Export all Data to Excel',
action:
}
I just don't know what the action needs to be.
My second attempt above pulls the whole dataset that I need, but sends it to the screen instead of to my PHPExcel file (ExportAllToExcel.php).
I have been trying to figure this out and haven't gotten very far. I've been told that I need to use $.ajax() to do this, I've been told that I don't need to use that. I have tried with and without and have not been able to get anywhere.
I have also tried using this to no effect:
$.fn.dataTable.ext.buttons.export =
{
className: 'buttons-alert',
"text": "Export All Test",
action: function (e, dt, node, config)
{
var SearchData = dt.search();
var OrderData = dt.order();
alert("Test Data for Searching: " + SearchData);
alert("Test Data for Ordering: " + OrderData);
}
};

First add the follwoing code in DataTable
"dom": 'Blfrtip',
"buttons": [
{
"extend": 'excel',
"text": '<button class="btn"><i class="fa fa-file-excel-o" style="color: green;"></i> Excel</button>',
"titleAttr": 'Excel',
"action": newexportaction
},
],
Then add this function inside $(document).ready() function
function newexportaction(e, dt, button, config) {
var self = this;
var oldStart = dt.settings()[0]._iDisplayStart;
dt.one('preXhr', function (e, s, data) {
// Just this once, load all data from the server...
data.start = 0;
data.length = 2147483647;
dt.one('preDraw', function (e, settings) {
// Call the original action function
if (button[0].className.indexOf('buttons-copy') >= 0) {
$.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-excel') >= 0) {
$.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
$.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
$.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-csv') >= 0) {
$.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
$.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
$.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-pdf') >= 0) {
$.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
$.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-print') >= 0) {
$.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
}
dt.one('preXhr', function (e, s, data) {
// DataTables thinks the first item displayed is index 0, but we're not drawing that.
// Set the property to what it was before exporting.
settings._iDisplayStart = oldStart;
data.start = oldStart;
});
// Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
setTimeout(dt.ajax.reload, 0);
// Prevent rendering of the full data to the DOM
return false;
});
});
// Requery the server with the new one-time export settings
dt.ajax.reload();
}

I have this working, mostly. It is now timing out, but that's a separate issue due to data size not to this working. For small datasets, it works perfectly.
This is how I create the button (it's the export button that I'm using here):
"buttons": [{
extend: 'collection',
text: 'Selection',
buttons: ['selectAll', 'selectNone']
}, {
extend: 'collection',
text: 'Export',
buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
}]
}
]
This is the initialization of the button created above:
$.fn.dataTable.ext.buttons.export =
{
className: 'buttons-alert',
id: 'ExportButton',
text: "Export All Test III",
action: function (e, dt, node, config)
{
var SearchData = dt.rows({ filter: 'applied' }).data();
var SearchData1 = dt.search();
console.log(SearchData);
var OrderData = dt.order();
console.log(SearchData1);
var NumCol = SearchData[0].length;
var NumRow = SearchData.length;
var SearchData2 = [];
for (j = 0; j < NumRow; j++)
{
var NewSearchData = SearchData[j];
for (i = 0; i < NewSearchData.length; i++)
{
NewSearchData[i] = NewSearchData[i].replace("<div class='Scrollable'>", "");
NewSearchData[i] = NewSearchData[i].replace("</div>", "");
}
SearchData2.push([NewSearchData]);
}
for (i = 0; i < SearchData2.length; i++)
{
for (j = 0; j < SearchData2[i].length; j++)
{
SearchData2[i][j] = SearchData2[i][j].join('::');
}
}
SearchData2 = SearchData2.join("%%");
window.location.href = './ServerSide.php?ExportToExcel=Yes';
}
};
And here is the part of the ServerSide.php file that gets the data and sends it to the server for processing:
require('FilterSort.class.php');
if (isset($_GET['ExportToExcel']) && $_GET['ExportToExcel'] == 'Yes')
{
$request = #unserialize($_COOKIE['KeepPost']);
$DataReturn = json_encode(FilterSort::complex($request,$sqlConnect,$table,$primaryKey,$ColumnHeader));
require './ExportAllToExcel.php';
}
else
{
echo json_encode(FilterSort::complex($request,$sqlConnect,$table,$primaryKey,$ColumnHeader));
}
This is how I set the cookie that I use to keep the search and sort criteria:
if(isset($_POST['draw']))
{
$KeepPost = $_POST;
$KeepPost['length'] = -1;
$PostKept = serialize($KeepPost);
setcookie("KeepPost",$PostKept,time() + (60*60*24*7));
}
All this combined sends the correct criteria to FilterSort.class.php which should process the criteria and return the dataset to ExportAllToExcell.php which then creates the Excel file. Right now I'm sending it huge reports and it times out, though.
UPDATE
I have slightly changed the way that I do this:
Here is the new set of buttons:
"buttons": [{
extend: 'collection',
text: 'Export',
buttons: ['export', { extend: 'csv',
text: 'Export All To CSV', //Export all to CSV file
action: function (e, dt, node, config)
{
window.location.href = './ServerSide.php?ExportToCSV=Yes';
}
}, 'csv', 'pdf', { extend: 'excel',
text: 'Export Current Page', //Export to Excel only the current page and highlight the first row as headers
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
}]
}
]
Here is how I create the Export All to Excel button:
$.fn.dataTable.ext.buttons.export =
{
className: 'buttons-alert', //Adds the "Export all to Excel" button
id: 'ExportButton',
text: "Export All To Excel",
action: function (e, dt, node, config)
{
window.location.href = './ServerSide.php?ExportToExcel=Yes';
}
};
These now send the data to the same ServerSide.php file that I was using before:
require('FilterSort.class.php');
if (isset($_GET['ExportToExcel']) && $_GET['ExportToExcel'] == 'Yes')
{
include 'Helper/LogReport.php';
$GetSQL = "Select Value from PostKept where UserName = '" .$_COOKIE['UserName']. "'";
$KeepResult = $conn->query($GetSQL);
$KeepResults = $KeepResult->fetchALL(PDO::FETCH_ASSOC);
$request = unserialize($KeepResults[0]['Value']);
$DataReturn = json_encode(FilterSort::complex($request,$sqlConnect,$table,$primaryKey,$ColumnHeader,1));
require './ExportAllToExcel.php';
I have also changed the way that I keep the query, I have it now also keeping the Table Name and UserName like this:
include 'DBConn.php';
$KeepPost = $_POST; //POST holds all the data for the search
$KeepPost['length'] = -1; //-1 means pulling the whole table
$PostKept = serialize($KeepPost); //This takes the array of data and turns it into a string for storage in SQL
$SQLCheck = "select distinct UserName from PostKept"; //Gets all the distinct Usernames of users that have used the Report Dashboard.
$sth = $conn->query($SQLCheck);
$CheckedUser = $sth->fetchALL(PDO::FETCH_ASSOC);
foreach($CheckedUser as $User)
{
foreach($User as $Index => $Who)
{
$FoundUsers[] = $Who; //Taking all the found users and placing them into a simpler array for searching later
}
}
if(isset($_COOKIE['UserName']) && in_array($_COOKIE['UserName'],$FoundUsers)) //If the user already has an entry update it with new information
{
$TSQL = "UPDATE PostKept set Value = '" .$PostKept. "', TableName = '" .$TableName. "' where UserName = '" .$_COOKIE['UserName']. "'";
}
else
{
if(isset($_COOKIE['UserName'])) //If this is a new user
{
$TSQL = "INSERT into PostKept(Value, TableName, UserName) select '" .$PostKept. "','" .$TableName. "','" .$_COOKIE['UserName']. "'";
}
else //If this is on the Prod site and the User info is not yet kept
{
$TSQL = "INSERT into PostKept(Value, TableName) select '" .$PostKept. "','" .$TableName. "'";
}
}
$sth = $conn->prepare($TSQL);
$sth->execute();
This is now what all combines to send the data to the ExportAllToExcel.php file that I have and then it in turn creates the file.

I just ran into this and came up with an alternate solution.
In the DataTable options, add this:
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
This will allow user to select all rows and will send -1 to server in 'length' query string parameter. At server side, you need to handle negative number and allow to return all rows when -1 is received.
This would display all rows in table and will export all of them.
I understand that this may not be suitable for 50-60K rows but for a smaller dataset, this can work without implementing any additional code at server and client side both.

in buttons:
action: function (e, dt, node, config) {
var formData = 'yourfilters';
formData.begin = '0';
formData.length = 'yourTotalSize';
$http({
url: 'yourURL',
method: 'POST',
data: JSON.stringify(formData)
}).then(function (ajaxReturnedData) {
dt.rows.add(ajaxReturnedData.data).draw();
$.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
});}

Problems passing parmaters in Javascript

I am trying to pass several variables from a php page into a java script. However only the first parameter is being passed.
The php page calls the script like this:
<?
$sdate = 0;
$edate = 2;
?>
<script type="text/javascript">
window.onload = function() {
datagrid = new DatabaseGrid('<? echo $sdate; ?>', '<? echo $edate; ?>');
};
</script><BR>
The Java Script being called is:
function DatabaseGrid(sdate, edate)
{
this.editableGrid = new EditableGrid("demo", {
enableSort: true,
tableLoaded: function() { datagrid.initializeGrid(this); },
modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
}
});
this.fetchGrid(sdate);
this.fetchGrid(edate);
}
DatabaseGrid.prototype.fetchGrid = function(sdate, edate) {
// call a PHP script to get the data
alert("loaddata_dailyotp.php?o=" + sdate + "&e=" + edate + "");
this.editableGrid.loadXML("loaddata_dailyotp.php?o=" + sdate + "&e=" + edate + "");
};
DatabaseGrid.prototype.initializeGrid = function(grid) {
grid.renderGrid("tablecontent", "testgrid");
};
I added the alert window to show the exactly what was being requested. I was expecting this:
loaddata_dailyotp.php?o=0&e=2
However what I am getting is:
loaddata_dailyotp.php?o=0&e=undefined
Why is my second parameter not going through?

You are not passing the "edate" parameter to your fetchGrid() call. That's why it's displayed as "undefined". For some reason you're calling fetchGrid() two times instead.

You could do it the following way:
<script type="application/json">
var payload = <?= json_encode(array('sdate' => $sDate, 'edate' => $eDate)); ?>
</script>
and then call your script:
<script type="text/javascript">
window.onload = function() {
datagrid = new DatabaseGrid(payload.sdate, payload.edate);
};
</script>

Call fetchGrid like this
function DatabaseGrid(sdate, edate)
{
this.editableGrid = new EditableGrid("demo", {
enableSort: true,
tableLoaded: function() { datagrid.initializeGrid(this); },
modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
}
});
this.fetchGrid(sdate, edate);
}
You missed to pass the second parameter.

I am sharepoint developer. I faced the same issue in one my application where i was passing two values and only first value was reaching the other end. even alert box was showing two values.
Issue was only last values was not reaching other end so CRAZY SOLUTION was to pass 3 parameters, 3rd being test param so my two params were reaching other end and 3rd param which was anyways useless was getting neglected automatically.
Suggestion in your case :
Please check with THREE parameters whether you are still getting only 1 param or
params ;)