Develop Reference

JS function not found when calling PHP function on server but works on local server

As stated in the title my code works in local but not on server.
More precisely, when i call whatever PHP function it doesn't find my JS function.
To sum it up : The goal here is to generate an excel (.XLS) file from an HTML table which is created by retrieving data from a database. Everything works flawlessly in local with my Wamp server but when I move it to server I get this error when calling the JS function getDashboardResumeJ ():
DashboardResume.php:124 Uncaught ReferenceError: getDashboardResumeJ is not defined
If I remove all the PHP in the main file everything works when on server.
PHP in main file :
<button id="buttonXLS" href="#" onclick="exportTableToExcel('tableRecap', 'Rapport Mensuel <?php echo $year . '/' . $month?>')">Export to Excel</button>
<table style="display:none" id="tableRecap" >
<tr>
<td style="font-weight: bold">Nom et prénom</td>
<?php $arrayId = array(selectTableEmploye('nom', 'prenom')); ?>
</tr>
<tr>
<td style="font-weight: bold">Date d'entrée</td>
<?php selectTableEmploye('date_embauche'); ?>
</tr>
<tr>
<td style="font-weight: bold">Date de sortie</td>
<?php selectTableEmploye('date_depart'); ?>
</tr>
<tr>
<td style="font-weight: bold">Remarque 1</td>
<?php selectTableTimesheet('commentaire1',$arrayId,$month,$year); ?>
</tr>
<tr>
<td style="font-weight: bold">Remarque 2</td>
<?php selectTableTimesheet('commentaire2',$arrayId,$month,$year); ?>
</tr>
<tr>
<td style="font-weight: bold">Remarque 3</td>
<?php selectTableTimesheet('commentaire3',$arrayId,$month,$year); ?>
</tr>
<tr>
<td style="font-weight: bold">Remarque 4</td>
<?php selectTableTimesheet('commentaire4',$arrayId,$month,$year); ?>
</tr>
<?php
generateDays($dateMonth, $dateYear);
?>
</table>
JS in main file :
<script>
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
}
$(document).ready(function(){
$('.month_dropdown').on('change',function(){
getDashboardResumeJ('dashboard_div', $('.year_dropdown').val(), $('.month_dropdown').val());
});
$('.year_dropdown').on('change',function(){
getDashboardResumeJ('dashboard_div', $('.year_dropdown').val(), $('.month_dropdown').val());
});
getCommJ();
});
function getDashboardResumeJ(target_div, year, month){
$.ajax({
type:'POST',
url:'functionsDashboardResume.php',
data:'func=getDashboardResumeP&year='+year+'&month='+month,
success:function(html){
$('#'+target_div).html(html);
}
});
}
PHP functions called by main file PHP :
<?php
function selectTableEmploye($attribute, $optAttribute = '')
{
include "dbConfig.php";
$query = 'SELECT * FROM employe ORDER BY id_employe ASC';
if ($stmt = $db->prepare($query)) {
/* execute query */
$stmt->execute();
/* Get the result */
$result = $stmt->get_result();
$arrayId = [];
if ($optAttribute != '') {
while ($row = $result->fetch_assoc()) {
echo '<td> ' . $row[$attribute] . ' ';
echo $row[$optAttribute] . '</td>';
array_push($arrayId, $row['id_employe']);
}
} else {
while ($row = $result->fetch_assoc()) {
echo '<td> ' . $row[$attribute] . '</td>';
}
}
/* free results */
$stmt->free_result();
}
return $arrayId;
}
function selectTableTimesheet($attribute, $arrayId, $month, $year)
{
include "dbConfig.php";
if (!empty($arrayId)) {
foreach ($arrayId[0] as $value) {
$query =
'SELECT DISTINCT commentaire1,commentaire2,commentaire3,commentaire4 FROM timesheet,employe WHERE timesheet.id_employe =' .
$value. ' AND timesheet.annee = ' . $year . ' AND timesheet.mois = ' . $month;
if ($stmt = $db->prepare($query)) {
/* execute query */
$stmt->execute();
/* Get the result */
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
echo '<td> ' . $row[$attribute] . '</td>';
}
}
}
}
else{
$query =
'SELECT * FROM timesheet';
if ($stmt = $db->prepare($query)) {
/* execute query */
$stmt->execute();
/* Get the result */
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
echo '<td> ' . $row[$attribute] . '</td>';
}
}
}}
function generateDays($month, $year)
{
$daysInMonth = cal_days_in_month(CAL_GREGORIAN, $month, $year);
for ($i = 1; $i <= $daysInMonth; $i++) {
if($month != 10){
$monthFunc = trim($month,0);
}
else{
$monthFunc = 10;
}
$data = getActivity($i,$monthFunc,$year);
$flag_half_day = 0;
$flag_row_number = 1;
$secondRowContent = array();
$numItems = mysqli_num_rows($data);
$checkIndex = 0;
echo "<tr>" . "<td style='text-align: right;font-weight: bold;'>" . $i . "</td>" ;
while ($row = $data->fetch_assoc()) {
if($flag_row_number == 1){
//cas 2b
if ($flag_half_day == 1){
array_push($secondRowContent,'<td>' . $row['code_fiduciaire'] . $row['nombre_heure'] . '</td>');
$flag_half_day = 0;
}
else{
//cas 1
if($row['nombre_heure'] == 8){
echo '<td>' . $row['code_fiduciaire'] . $row['nombre_heure'] . '</td>';
array_push($secondRowContent,'<td></td>');
$flag_half_day = 0;
}
//cas 2a
else if(is_null($row['nombre_heure'])){
echo '<td></td>';
}
else{
echo '<td>' . $row['code_fiduciaire'] . $row['nombre_heure'] . '</td>';
$flag_half_day = 1;
}
}
if($checkIndex++ == ($numItems - 1)){
$flag_row_number = 2;
echo "</tr>";
}
}
}
if($flag_row_number == 2){
echo '<tr> <td style="text-align: right;font-weight: bold;">' . $i . '</td>';
foreach($secondRowContent as $content){
echo $content;
}
echo '</tr>';
}
else{
echo '<tr> <td style="text-align: right;font-weight: bold;">' . $i . '</td> </tr>';
}
}
}
function getActivity($day, $month, $year){
include "dbConfig.php";
$query =
'select time_dimension.db_date, time_dimension.holiday_flag, employe.id_employe, employe.nom, timesheet.nombre_heure, timesheet.date, taches.code_fiduciaire FROM time_dimension left outer join employe on time_dimension.db_date >= employe.date_embauche left outer join timesheet on timesheet.date = time_dimension.db_date AND timesheet.id_employe = employe.id_employe left outer join taches on timesheet.id_tache = taches.id_tache where time_dimension.year = ' . $year . ' and time_dimension.month = ' . $month . ' and time_dimension.day = ' . $day . ' AND COALESCE (timesheet.nombre_heure,1) != 0 ORDER BY employe.id_employe, time_dimension.db_date' ;
if ($stmt = $db->prepare($query)) {
/* execute query */
$stmt->execute();
/* Get the result */
$result = $stmt->get_result();
return $result;
}
}
?>
If you need more snippets or informations don't hesitate.
Thanks for your help,
Have a great day

For those who have the same kind of problem, the server I was working on didn't have the same PHP version as the one I was working in local.
Try phpinfo() both in local and on your server to check your PHP version is the same.

how to export html table to excel, with pagination

I have a form which displays mysql data in the form of an HTML table, using pagination of 5 records per page. I'm trying to export my table to excel, but it's only exporting data of the rows that are currently show, meaning if there are 20 rows, it only shows the first 5 as those get displayed. How can I make it export the one's that are not being displayed but still part of the search? I saw a few other people with a similar question but none have answers( How to export all HTML table rows to Excel file from a paginated table?). Hopefully I can get one!
<?php
if(isset($_GET['submit']) || isset($_GET['page'])){
// Setting up the Pagination below
echo '<center>';
$page_query = "SELECT * FROM tbl_call_log_detail ";
$page_query .= "WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='') ";
$page_result = mysqli_query($conn, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
$start_loop = $page;
$difference = $total_pages - $page;
if($difference <= $total_pages){
$start_loop = $total_pages - $difference;
}
$end_loop = $start_loop + 2;
if($end_loop > $total_pages){
$end_loop = $total_pages;
}
if($difference > $total_pages){
$end_loop = $total_pages;
}
echo '<div class = "center">';
echo '<div class = "pagination">';
if($page > 1){
echo "<a href= 'dealer_call_log.php?page=1".$urlparameter."'>First</a>";
echo "<a href= 'dealer_call_log.php?page=".($page - 1).$urlparameter."'> << </a>";
}
for ($i = $start_loop; $i <= $end_loop; $i++){
echo "<a href= 'dealer_call_log.php?page=".$i.$urlparameter."'>".$i."</a>";
}
if($page < $end_loop){
echo "<a href= 'dealer_call_log.php?page=".($page + 1).$urlparameter."'> >> </a>";
echo "<a href= 'dealer_call_log.php?page=".$total_pages.$urlparameter."'>Last</a>";
}
if($page < 1){
$page = 1;
}
echo '</div>';
echo '</div>';
echo '<br>';
$sql = "SELECT Name, SFID, Comment, Time FROM tbl_call_log_detail
WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='')
ORDER BY Time DESC LIMIT $start_from, $record_per_page ";
$result = mysqli_query($conn, $sql);
$row = mysqli_num_rows($result);
$all_property = array();
echo "<table class = 'data-table' border = '1' cellpadding = '9' bgcolor = '#CCCCCC' id = 'data-table'>
<tr class = 'data-heading'>";
while($property = mysqli_fetch_field($result)){
echo '<td><b> '. $property ->name. ' </b></td>';
array_push($all_property, $property ->name);
}
echo '</tr>';
while ($row = mysqli_fetch_array($result)){
echo '<tr>';
foreach($all_property as $item){
echo '<td> '. $row[$item] . ' </td>';
}
echo '</tr>';
echo '</center>';
}
echo '</table>';
echo '<br>';
?>
// This is what is getting the current rows, but not all
<input type = "submit" onclick = "window.open('data:application/vnd.ms-excel, '+encodeURIComponent(document.getElementById('data-table').outerHTML));" value = "Export into excel" />
<?php
}
?>
UPDATE: Found the answer I was looking for I simply ran a new sql query without the LIMIT clause and stored it in a hidden table. I then use the hidden table to export data
// SQL and hidden table for exporting to excel
$page_query2 = "SELECT * FROM tbl_call_log_detail ";
$page_query2 .= "WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='') ORDER BY TIME DESC ";
$page_result2 = mysqli_query($conn, $page_query2);
$row2 = mysqli_num_rows($page_result2);
$all_property2 = array();
echo "<table class = 'data-table2' border = '1' cellpadding = '9' bgcolor = '#CCCCCC' id = 'data-table2' hidden>
<tr class = 'data-heading2'>";
while($property = mysqli_fetch_field($page_result2)){
echo '<td><b> '. $property ->name. ' </b></td>';
array_push($all_property2, $property ->name);
}
echo '</tr>';
while ($row2 = mysqli_fetch_array($page_result2)){
echo '<tr>';
foreach($all_property2 as $item){
echo '<td> '. $row2[$item] . ' </td>';
}
echo '</tr>';
echo '</center>';
}
echo '</table>';
?>
<input type = "submit" onclick = "window.open('data:application/vnd.ms-excel, '+encodeURIComponent(document.getElementById('data-table2').outerHTML));" value = "Export into excel" />
<?php
}
?>

You can use JQuery table2excel plugin following is the link
http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
Try following code pen to only JavaScript
https://codepen.io/kostas-krevatas/pen/mJyBwp

Replace div contents with jQuery on form submit within PHP loop

I have this jQuery form being outputted in a PHP while loop if the button has not previously been clicked and just an image with the value if it has, the function is like facebooks like button where when the user clicks the button the icon changes so its not clickable any longer and the value increments by 1. The form submission works but I cannot seem to update the icon image and value count in the feed without effecting all the other buttons and values in the feed… I tried jQuery replaceWith() but it replaces all the #bumpCont divs in the feed…
index.php
<div class="images">
<?php
while($row = $result2->fetch_assoc()){
$path = $row['path'];
$user = $row['user'];
$id = $row['id'];
$desc = $row['desc'];
$update = $row['update_date'];
$bump = $row['bump'];
$timeFirst = strtotime($date);
$timeSecond = strtotime($update);
$timeSecond = $timeSecond + 86400;
$timer = $timeSecond - $timeFirst;
?>
<?php if(empty($desc)){}else{?><div id="desc"><?php echo $desc;?></div><?php }?>
<img id="pic" src="uploads/<?php echo $path;?>"/>
<div id="userCont">
<div id="user"><a rel="external" href="user_profile.php?user='.$user.'"><?php echo $user;?></a></div>
<div id="timer"><?php echo $timer;?></div>
<?php
if(in_array($path, $mypath)) {
echo '<div id="bumpCont"><img id="bump" style="height:55px;right:8px;top: 2px;position: relative;" src="../img/bumpg.png"/><span id="bumpCount">'.$bump.'</span></div>';
}else{
echo '<form method="post" id="bumpF" data-ajax="false">';
echo '<input name="id" data-ajax="false" id="field_'.$id.'" type="hidden" value="'.$id.'" />';
echo '<div id="bumpCont"><input type="image" style="height:55px;right:8px;top: 2px;position: relative; " id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm('.$id.');" value="Send" /><span id="bumpCount">'.$bump.'</span></div>';
echo ' </form>';
}
?>
</div>
<?php
}
?>
//Submit Form
function SubmitForm(id) {
event.preventDefault();
var name = $('#field_'+id).val();
console.log(name);
$.post("bump.php", {name: name},
function(data) {
$( "#bumpCont" ).replaceWith( '<div id="bumpCont"><img id="bump" style="height:55px;right:8px;top: 2px;position: relative;" src="../img/bumpg.png"/><span id="bumpCount">' + data + '</span></div>' );
}
Bump.php -
$id = $_POST['name'];
$sessionUser = $_SESSION['userSession'];
// GET USERNAME
$sql = "SELECT * FROM userbase WHERE user_id='$sessionUser'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$myname = $row['username'];
}
}
$bump = 1;
$sql = "SELECT * FROM images WHERE id=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$bump = $row['bump'];
$path = $row['path'];
$desc = $row['desc'];
$post_user = $row['user'];
$bump++;
}
}
$bumpC = 0;
$sql = "SELECT * FROM bumped WHERE path='$path' AND myname ='$myname'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$bumpC++;
}
}
echo $bump;
if($bumpC >= 1){
}else{
$sql = "INSERT INTO `bumped` ( `myname`,`path`, `description`, `post_user`) VALUES ( '$myname','$path', '$desc', '$post_user')";
if ($conn->query($sql) === TRUE) {
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$sql = "UPDATE images SET update_date='$date' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
} else {
echo "Error updating record: " . $conn->error;
}
$sql = "UPDATE images SET bump=$bump WHERE id=$id";
if ($conn->query($sql) === TRUE) {
} else {
echo "Error updating record: " . $conn->error;
}
}

First look shows me a problem of Elements with same ID in loop.
You could have same class to multiple elements.
<div class="bumpCont"><span class="bumpCount">1</span></div>
<div class="bumpCont"><span class="bumpCount">2</span></div>
Use $(this)
Based on the click on particular element, you can change contents.
$('.bumpCount').click(function(){
$(this).html(parseInt($(this).html) + 1);
});
Hope this helps you.
$('.bumpCount').click(function(){
$(this).html(parseInt($(this).html()) + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bumpCont"><span class="bumpCount">1</span></div>
<div class="bumpCont"><span class="bumpCount">2</span></div>

ReferenceError: Function Not Defined. What am I missing?

Can't seem to figure out why I keep getting this ReferenceError: OnLoad is not defined error.
Since the time of my previous commit, I have changed lines 28-30 and that is all.
How can this cause my javascript to not be loaded properly? I have only changed these three lines. I'm certain these lines shouldn't really be related. The Javascript file is identical to the one in the previous commit.
What am I missing?
UserInterface.php - Current Commit
class UserInterface {
var $ParentAppInstance;
function __construct($AppInstance){
$this->ParentAppInstance = $AppInstance;
$this->DrawPageHTML();
$this->DrawDBSetDropdown();
$this->DrawQueryForm();
}
//Override thjis function to change the HTML and PHP of the UI page.
protected function DrawPageHTML(){
$CurrDB_Obj = $this->ParentAppInstance->CurrentDBObj; //Line 28
$EncodedFields = json_encode($CurrDB_Obj->GetFields()); //Line 29
echo "<body onload='OnLoad($EncodedFields);'>"; // Line 30
echo '
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./CSS/UserInterface.css">
<div id="DebugOutput"></div>
</body>
';
}
protected function DrawDBSetDropdown(){
echo '<div align="right">';
echo '<select onchange="SwitchDatabaseSet();" name="DBSetList" form="DBSetSelector" id="DBSetSelector">';
$i = 0;
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){/* DO NOTHING. IE. IGNORE IT*/}
else if ($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
else{
//Add the DBSet to the dropdown list.
$i++;
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
echo '</select>';
echo '</div>';
}
protected function DrawQueryForm(){
echo '<form action="DatabaseSearch.php" method="post" accept-charset="UTF-8">';
echo '<div id="QFormBody">';
$NumActiveQBoxes = $this->ParentAppInstance->Config['ApplicationSettings']['NumberDefaultQueryOptions'];
for ($i = 1; $i <= $NumActiveQBoxes; $i++){
echo '<div class="QueryBox" name="QBox_' . $i . '">';
echo '<select name=Field_' . $i . '">';
$DBSet_Num = filter_var($this->ParentAppInstance->CurrDBSetStr, FILTER_SANITIZE_NUMBER_INT);
$CurrDBSet_Obj = $this->ParentAppInstance->DBSetsArr[$DBSet_Num];
foreach($CurrDBSet_Obj->GetDBSetFields() as $Field){
//echo $Field;
echo '<option>' . $Field . '</option>';
}
echo '</select>';
echo '<input type="text" name="Query_' . $i . '"></input>';
echo '<button class= "RMButton" type="button">-</button>';
echo '</div>';
}
echo '<button type="button" id="add" onclick="AddQueryBox();">+</button>';
echo '<button type="submit" id="submit">SEARCH</button>';
echo '</Form>';
echo '<script src=/GLS_DBSearchProject/JavaScript/UserInterface.js></script>';
}
UserInterface.php - Previous Commit
class UserInterface {
var $ParentAppInstance;
function __construct($AppInstance){
$this->ParentAppInstance = $AppInstance;
$this->DrawPageHTML();
$this->DrawDBSetDropdown();
$this->DrawQueryForm();
}
//Override thjis function to change the HTML and PHP of the UI page.
protected function DrawPageHTML(){
$DBSet_Num = filter_var($this->ParentAppInstance->CurrDBSetStr, FILTER_SANITIZE_NUMBER_INT); //Line 28
$CurrDBSet_Obj = $this->ParentAppInstance->DBSetsArr[$DBSet_Num]; //Line 29
$EncodedFields = json_encode($CurrDBSet_Obj->GetDBSetFields()); //Line 30
echo "<body onload='OnLoad($EncodedFields);'>";
echo '
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./CSS/UserInterface.css">
<div id="DebugOutput"></div>
</body>
';
}
protected function DrawDBSetDropdown(){
echo '<div align="right">';
echo '<select onchange="SwitchDatabaseSet();" name="DBSetList" form="DBSetSelector" id="DBSetSelector">';
$i = 0;
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
foreach ($this->ParentAppInstance->DBSetsArr as $DBSet){
if ($DBSet->DBSetName == $this->ParentAppInstance->CurrDBSetStr){/* DO NOTHING. IE. IGNORE IT*/}
else if ($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
else{
//Add the DBSet to the dropdown list.
$i++;
echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
}
}
echo '</select>';
echo '</div>';
}
protected function DrawQueryForm(){
echo '<form action="DatabaseSearch.php" method="post" accept-charset="UTF-8">';
echo '<div id="QFormBody">';
$NumActiveQBoxes = $this->ParentAppInstance->Config['ApplicationSettings']['NumberDefaultQueryOptions'];
for ($i = 1; $i <= $NumActiveQBoxes; $i++){
echo '<div class="QueryBox" name="QBox_' . $i . '">';
echo '<select name=Field_' . $i . '">';
$DBSet_Num = filter_var($this->ParentAppInstance->CurrDBSetStr, FILTER_SANITIZE_NUMBER_INT);
$CurrDBSet_Obj = $this->ParentAppInstance->DBSetsArr[$DBSet_Num];
foreach($CurrDBSet_Obj->GetDBSetFields() as $Field){
//echo $Field;
echo '<option>' . $Field . '</option>';
}
echo '</select>';
echo '<input type="text" name="Query_' . $i . '"></input>';
echo '<button class= "RMButton" type="button">-</button>';
echo '</div>';
}
echo '<button type="button" id="add" onclick="AddQueryBox();">+</button>';
echo '<button type="submit" id="submit">SEARCH</button>';
echo '</Form>';
echo '<script src=/GLS_DBSearchProject/JavaScript/UserInterface.js></script>';
}
UserInterface.js
var DBSetFields = [];
var NumQBoxes = 3;
//window.onload = OnLoad();
function OnLoad(Fields){
console.log("OnLoad called");
CloneDBSetFields(Fields);
var RMNodeList = document.getElementsByClassName('RMButton');
for (var i = 0; i < RMNodeList.length; ++i) {
console.log(RMNodeList[i]);
RMNodeList[i].onclick = RemoveQBox; // Calling myNodeList.item(i) isn't necessary in JavaScript
}
}
function JSTEST(){
window.alert("JS Called Successfully!!");
}
function CloneDBSetFields(Fields){
console.log("CloneDBSetFields");
DBSetFields = Fields;
}
function SwitchDatabaseSet(MainPageDoc){
document.getElementById("DebugOutput").innerHTML = "Test";
window.location.replace('/GLS_DBSearchProject/index.php?DBSet=' + document.getElementById("DBSetSelector").value);
console.log(document.getElementById("DBSetSelector").value);
//console.log(document.)
}
function Fields_FOREACH(ELEMENT, INDEX, ARRAY){
console.log("TEST");
var FieldOption = document.createElement('option');
FieldOption.setAttribute('value', ARRAY[INDEX]);
FieldOption.innerHTML = ARRAY[INDEX];
this.appendChild(FieldOption);
}
function AddQueryBox(){
NumQBoxes += 1;
var NewQBox = document.createElement('div');
NewQBox.setAttribute('class', 'QueryBox');
//Create and fill Field Selector dropdown "select" element
var FieldSelector = document.createElement('select');
FieldSelector.setAttribute('name', 'Field_' + NumQBoxes);
//foreach element in Fields
console.log(DBSetFields);
DBSetFields.forEach(Fields_FOREACH, FieldSelector);
//Create and fill
var QueryText = document.createElement('input');
QueryText.setAttribute('type', 'text');
QueryText.setAttribute('name', 'Query_' + NumQBoxes);
//Create "-" Remove button for removing query lines.
var RemoveButton = document.createElement('button');
RemoveButton.innerHTML = "-";
RemoveButton.setAttribute('type', 'button');
RemoveButton.setAttribute('class', 'RMButton');
RemoveButton.addEventListener("click", RemoveQBox);
//Combine the individual elements into a new query box and insert the new query box into the HTML Document
NewQBox.appendChild(FieldSelector);
NewQBox.appendChild(QueryText);
NewQBox.appendChild(RemoveButton);
document.getElementById("QFormBody").insertBefore(NewQBox, document.getElementById("add"));
}
function RemoveQBox(e){
console.log("Remove");
var RemoveButton = this; //this == e.currentTarget
console.log(RemoveButton);
var QBox = RemoveButton.parentNode;
QBox.remove();
NumQBoxes -= 1;
}
EDIT: My Javascript file is not being loaded on the client side (ie. it doesn't show up under "Sources", so I'm not really not sure: Why wouldn't my javascript be loading on the client side?

Why php code inside the javascript cannot change the value of innerHTML? [duplicate]

This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 8 years ago.
This page include two web page, insert6.php is using iframe.
This full code of the web site of the page.
form6.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>CCC</title>
<style>
#tlist tr:last-child td {
background-color:#CCCCCC;
}
table{
table-layout: fixed;
}
th, td {
overflow: hidden;
}
#container
{
margin-left:auto;
margin-right:auto;
width:600px;
}
</style>
</head>
<body>
<h3>New Record</h3>
<script language="JavaScript" type="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var che = document.createElement('input');
che.type = 'checkbox';
che.id = 'op'+ iteration;
che.name= 'checkbox';
cellLeft.appendChild(che);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow[]';
el.id = 'txtRow' + iteration;
el.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// select cell
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
//sel.type = 'text';
sel.name = 'selRow[]';
sel.id = 'selRow' + iteration;
sel.options[0]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="FF")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
sel.options[1]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="DD")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
sel.options[2]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="TT")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
sel.options[3]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="GG")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
sel.options[4]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="RR")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
sel.options[5]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="AA")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
cellRightSel.appendChild(sel);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRowNewWindow';
// submit
frm.submit();
}
function validateRow(frm)
{
var chkb = document.getElementById('chkValidate');
if (chkb.checked) {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length - 1;
var i;
for (i=1; i<=lastRow; i++) {
var aRow = document.getElementById('txtRow' + i);
if (aRow.value.length <= 0) {
alert('Row ' + i + ' is empty');
return;
}
}
}
openInNewWindow(frm);
}
function deleteAll(obj){
var checked = document.getElementsByName(obj);
debugger
for(var i = 0; i < checked.length; i ++){
if(checked[i].checked){
var tr=checked[i].parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild(tr);
i--;
}
}
}
</script>
<!--Input Data-->
<form action="insert6.php" method="post" target="myframe">
Series:
<?php
function series(){
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT Series_NAME FROM series;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
echo("<option>".$row[$i]."</option>");
}
}
mysql_free_result($result);
}
?>
<select name="choose series">
<?php series(); ?>
</select><br>
<?php
function height(){
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT height FROM width_height GROUP BY height;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
echo("<option>".$row[$i]."</option>");
}
}
mysql_free_result($result);
}
?>
<p>Height(MM):
<select name="height" id="height0">
<?php height(); ?>
</select></p>
<?php
function width(){
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT width FROM width_height GROUP BY width;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
echo("<option>".$row[$i]."</option>");
}
}
mysql_free_result($result);
}
?>
<p>Width (MM):
<select name="width" id="width0">
<option><?php width(); ?></option>
</select><br>
<table border="1" id="tblSample">
<tr>
<td><input type="checkbox" id="op0" name="checkbox">
</td>
<td><input type="text" name="txtRow[]"
id="txtRow0" size="40"/></td>
<td>
<select name="selRow[]" id="selRow0">
<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
echo("<option>".$row[$i]."</option>");
}
}
mysql_free_result($result);
?>
</select>
</td>
</tr>
</table>
<input type="button" value="Add" onClick="addRowToTable();" />
<input type="button" name="delete_button" value="Delete" onClick="deleteAll('checkbox');" />
<input type="submit" name="submit" value="Submit" onclick="test();"/>
</form>
<script src="https://dl.dropboxusercontent.com/u/19096175/blog/selectDate/selectDate.js" type="text/javascript"></script>
Choose Date：<input onfocus="HS_setDate(this)" readonly="" type="text" value="Check" />
<br />
<hr/>
<iframe src="insert6.php" name="myframe" id="myframe" width="650" height="400" scrolling="no" frameborder="0">
</iframe>
</body>
</html>
This full code of the web site of the page.
insert6.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DDD</title>
<style>
#tlist tr:last-child td {
background-color:#CCCCCC;
}
table{
table-layout: fixed;
}
th, td {
overflow: hidden;
}
#container
{
margin-left:auto;
margin-right:auto;
width:600px;
}
</style>
</head>
<body>
<?php
/*
$name = $_POST['selRow'];
$qty = $_POST['txtRow'];
foreach( $qty as $v ) {
print $v."<br>";
}
foreach( $name as $v ) {
print $v."<br>";
}
*/
?>
<script>
function delrecord(obj)
{
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
var delbutton=document.getElementsByName("del");
var newzum=0;
for(var j=1;j <document.getElementsByName("del").length+1;j++)
{
newzum+=parseFloat(document.getElementById('total'+j).innerHTML);
}
znum.innerHTML =newzum;
}
function caltotal(e){
var fqty=document.getElementById('qty' +iteration);
var fprice=document.getElementById('price' + iteration);
var ftotal=document.getElementById('total'+ iteration);
var delbutton=document.getElementsByName("del");
ftotal.innerHTML= fqty.innerHTML * fprice.innerHTML;
newzum =0;
for(var j=1;j <=document.getElementsByName("del").length;j++)
{
newzum += parseFloat(document.getElementById('total'+j).innerHTML);
}
znum.innerHTML = newzum;
}
</script>
<div class="container">
<table width="450" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">
<tr class="tit2">
<td>QTY </td>
<td>TILE </td>
<td>HEIGHT </td>
<td>WIDTH </td>
<td>PRICE </td>
<td>TOTAL </td>
<td>Action </td>
</tr>
<tr class="tit3">
<?php
if(isset($_POST["submit"])){
$t=count($_POST['selRow']);
$w=count($_POST['txtRow']);
for($i=0;$i<$t;$i++)
{
$qty[$i]= $_POST['txtRow'][$i];
$tile[$i]= $_POST['selRow'][$i];
$height = $_POST['height'];
$width = $_POST['width'];
echo "<tr class='tit3'><td>";
echo "".$qty[$i]."<br>";
echo "</td>";
echo "<td>";
echo "".$tile[$i]."<br>";
echo "</td>";
echo "<td>";
echo "".$height."<br>";
echo "</td>";
echo "<td>";
echo "".$width."<br>";
echo "</td>";
echo "<td>";
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
//foreach($_POST['selRow'] as $tile){
$query = "SELECT `Price` FROM `actualpanelmaterialsize` WHERE `Material ID` IN (SELECT `Material_ID` FROM `material` WHERE `Tile` = '".$tile[$i]."') AND `Width_Height ID` IN (SELECT `Width_Height ID` FROM `width_height` WHERE `Width` =".$_POST['width']." AND `Height` =".$_POST['height'].");";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
$price = $row[0];
echo $price."<br>";
}
//}
echo "</td>";
echo "<td id='total[$i]'>";
echo $total[$i]=$price*$qty[$i];
echo "</td>";
echo "<td>";
echo "<input type='button' value='Delete' name='del' onclick='delrecord(this);'>";
echo "</td>";
echo "</tr>";
}
echo "<script>";
echo "newzum =0;";
echo "for(var j=0;j <=document.getElementsByName('del').length+1;j++) {" ;
echo "for (var i=0;i<=document.getElementById('total['+i+']').innerHTML.length;i++){";
echo "newzum += parseFloat(document.getElementById('total['+i+']').innerHTML);";
echo "}";
echo "}";
echo "document.getElementById('znum').innerHTML = newzum;";
echo "</script>";
}
?>
</tr>
<tr class="tit3"> <td>Total </td> <td colspan=3> </td> <td colspan=2 align='right'> <b id="znum">0</b> </td> <td colspan=1> </td> </tr>
</table>
<script>
/*
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(document.getElementById("total["+i+"]").innerHTML);
}
*/
function Check(){
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(newzum);
}
}
</script>
<input type="button" value="Check" onClick="Check();"/>
</div>
</body>
</html>
Last, I was ask you guys about why znum.innerHTML cannot change the value.
Now, I put the javascript code inside the php language, the result still wrong...
My expected result:
Now I see the result:
After click the Check button to see newznum is correct but znum.innerHTML could not change this value
When pass the form to insert6.php, the total should be change the value.
Now, I cannot do it.
Anyone see the problem here?
Please you help me, I dun know where i get a mistake.
Thank you for reading my question!
I hope i will received the answer to help me to solve the problem

At first, Separation of logic is very important and what i see frmo your code is you are making DB calls from your view itself. Which shows poor way of coding. It will make it difficult to manager your code.
sel.options[0]= new Option("<?php
mysql_connect("localhost", "root", "root") or
die("Could not connect: " . mysql_error());
mysql_select_db("partition");
$query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
$result = mysql_query($query);
$row = mysql_fetch_row($result);
mysql_data_seek($result,0);
while ($row=mysql_fetch_row($result))
{
for ($i=0;$i<mysql_num_fields($result);$i++)
{
if ($row[$i]=="FF")
echo($row[$i]);
}
}
mysql_free_result($result);
?>");
Now answer to your question:
echo "newzum =0;";
echo "for(var j=0;j <=document.getElementsByName('del').length+1;j++) {" ;
echo "for (var i=0;i<=document.getElementById('total['+i+']').innerHTML.length;i++){";
echo "newzum += parseFloat(document.getElementById('total['+i+']').innerHTML);";
echo "}";
echo "}";
echo "document.getElementById('znum').innerHTML = newzum;";
echo "</script>";
This lines of code will be executed before the page is loaded as its php.
as a result, when the page is rendered the script will not find document.getElementsByName('del') so it will throw undefined error.
To overcome this, Do those actions in onload function.
window.onload = function() {
// Inside this method put those lines. It will work.
}

Your code is too long, but I will try to answer from your title.
You must understand how php and javascript work. php is a server-side language, while javascript is a client side language. You can NOT execute php inside javascript. php does the processing on the server and then returns the results to the client. After this, the server is not aware of the client state.
In order to change the value of innerHTML, you can just use javascript. If you need to somehow interact with php, you should send AJAX calls to the server, where the php script can process and return new data.

The PHP will just echo the Javascript code, which is fine, but needlessly complex. You can just enter the Javascript code in the page.
The actual problem right now is this line:
document.getElementById('znum').innerHTML = newzum;
It is a line of Javascript in the global scope, and it will be executed as soon as the browser encounters it during the loading of the page.
But the element is should modify ('znum') is a couple of lines lower on the page:
<b id="znum">0</b>
That basically means that the element is not ready yet when the script is executed, so it cannot be found.
The solution is relatively simple: Execute the Javascript later (at the bottom) of the page, so it will execute when all relevant elements are already loaded.
Script errors like this result in an error or a warning which should be visible in the Console tab in the developer tools (F12) of your browser. So make sure you always look at that when debugging Javascript. It's really a tool you should master as a web developer. :)