We Keep Coding

JavaScript variables passed into new variable object POSTing as undefined to another page

I have a page called SQLFailover.php that shows a table with two rows. Each row will have a toggle button. The toggle button on the first row will be set to primary and the server name on that row will be determined by a SQL query done earlier in the code. The second row’s toggle will be set to secondary and will get the server name from the same SQL query. When either button is toggled, I need the button to trigger a post to SQLAction.php. That page will call a powershell script that will update server names in a table then be redirected back to SQLFailover.php by using a header() cmd. When the SQLFailover.php is reloaded, the section with the comment “get current primary server and secondary server from SQL Table” will do a query which retrieves the primary and secondary servers to display, which at this point, will have been changed from the powershell that will be added to the SQLAction.php page at a later time. The trouble I am having is that when my current script POSTs to the action page the key => value pairs are undefined. Please help me to understand how this is happening and correct my code. Thank you.
SQLFailover.php
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="portlet-body">
<div class="table-scrollable">
<table class="table table-hover">
<thead>
<tr>
<th class="all"> Location </th>
<th class="all"> Status </th>
</tr>
</thead>
<tbody>
<?php $UserSession = $_SESSION['jigowatt']['username'];?>
<script> var UserSession = '<?=$UserSession?>';</script>
<?php
$env = "CERT";
if (isset($env)) {
if ($env === 'CERT') {
$stageEnvironmentType = "CERT";
$SQLFileName = "AGL_C_ 01\C01,10995";
$serverName = $SQLFileName;
}elseif($env === 'PROD') {
$stageEnvironmentType = "PROD";
$SQLFileName = "AGL_P_ 01\P01,11111";
$serverName = $SQLFileName;
}
//SQLServer Connection
$connectionInfo = array( "Database"=>"master");
$conn = sqlsrv_connect( $serverName, $connectionInfo );
if( $conn === false ) {
die( print_r( sqlsrv_errors(), true));
}else{
//get current primary server and secondary server from SQL Table
$sql = file_get_contents('SQLSelect.sql');
$stmt = sqlsrv_query( $conn, $sql);
if( $stmt === false ) {
die( print_r( sqlsrv_errors(), true));
}
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$conn_current_PrimaryReplica = $row['conn_current_PrimaryReplica'];
$conn_new_PrimaryReplica = $row['conn_new_PrimaryReplica'];
?>
<tr>
<td> <?php echo $conn_current_PrimaryReplica;?> </td>
<td>
<input data-server-name="<?php echo "$conn_new_PrimaryReplica";?>" class="toggle-event" checked type="checkbox" data-toggle="toggle" data-on="Primary" data-onstyle="success" data-off="Secondary" data-offstyle="danger" data-size="small" />
</td>
</tr>
<tr>
<td> <?php echo $conn_new_PrimaryReplica; ?> </td>
<td>
<input data-server-name="<?php echo "$conn_current_PrimaryReplica";?>" class="toggle-event" type="checkbox" data-toggle="toggle" data-on="Primary" data-onstyle="success" data-off="Secondary" data-offstyle="danger" data-size="small" />
</td>
</tr>
<?php
}
sqlsrv_free_stmt($stmt);
}
}
?>
</tbody>
</table>
</div>
</div>
<script>
$(function() {
$('.toggle-event').change(function() {
var serverName = $(this).data('server-name');
var mode = $(this).prop('checked');
var username = '<?=$UserSession?>';
var payload = {
server: serverName,
username: username
};
var form = document.createElement('form');
form.style.visibility = 'hidden';
form.method = 'POST';
form.action = '/SQLAction.php';
for (key in Object.keys(payload)) {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input);
}
document.body.appendChild(form);
form.submit();
})
})
</script>
Below is the SQLAction.php page.
<?php
echo "<b>begin POST values</b><br><br>";
foreach ($_POST as $key => $value) {
echo "<tr>";
echo "<td>";
echo $key;
echo "</td>";
echo " : ";
echo "<td>";
echo $value;
echo "</td>";
echo "</tr>";
echo "<br>";
}
echo "<b>end of POST values</b><br><br>";
header('refresh:5; / SQLFailover.php ');
?>

The object key iteration of your code seems not correct (at least it appears to be non-standard) and the values extracted are found to be undefined. (I have tested your code and it generates undefined values)
Please iteration your Object keys thru the Object.keys(obj).forEach construct, with the following syntax:
Object.keys(obj).forEach(key => {
// console.log(key, obj[key]);
});
Hence, for your case , please change the block
for (key in Object.keys(payload)) {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input);
}
to
Object.keys(payload).forEach(key => {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input);
});

The page is now working with a change to the for line in the function.
<script>
$(function() {
$('.toggle-event').change(function() {
var serverName = $(this).data('server-name');
var mode = $(this).prop('checked');
var username = '<?=$UserSession?>';
var payload = {
server: serverName,
mode: mode,
username: username
};
var form = document.createElement('form');
form.style.visibility = 'hidden';
form.method = 'POST';
form.action = 'SNFailover/SQLAction.php';
$.each(Object.keys(payload), function(index, key) {
var input = document.createElement('input');
input.name = key;
input.value = payload[key];
form.appendChild(input)
});
document.body.appendChild(form);
form.submit();
});
})

Ajax Datatable How to display data from a function?

I have an Ajax which get data from php file and display in Datatable,it works but when I added function to the php file then my Ajax cannot get data from the file anymore, what should I modify to my Ajax file.
Also, what if I want to change the ajax function to be called depends on the value I post.For example, I have 2 function, A & B, and I will post data called db from the select in my html, if the data is A then Ajax A will be executed.
Can I do this: $(document ).on('_GET','#db==A',function() {
Ajax.js
$(document ).on('click','#showData',function() {
$.ajax({
type: 'GET',
url: 'table_backend.php',
mimeType: 'json',
success: function(data2) {
var aaData=data2['aaData'];
$.each(aaData, function(i, data) {
var body = "<tr>";
body += "<td>" + data.id+ "</td>";
body += "<td>" + data.show_activity_id + "</td>";
body += "<td>" + data.nasa_id + "</td>";
body += "<td>" + data.game_show_id + "</td>";
body += "<td>" + data.account_id + "</td>";
body += "</tr>";
$( "#showTable" ).append(body);
});
$( "#showTable" ).DataTable();
},
error: function() {
alert('Fail!');
}
});
});
table_backend.php
(My file is too big so I didn't post code about my db)
I added class and function:
$t = new table;
if(isset($_POST['db'])){
if ($_POST['db'] == "show") { $t -> tableShow($connData); }
if ($_POST['db'] == "show_activity") { $t -> tableShowAc($connData);}
}
class table{
function tableShowAc($connData){
My Ajax works before I add function:
## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = mysqli_real_escape_string($connData['conn'],$_POST['search']['value']); // Search value
## Search
$searchQuery = " ";
if($searchValue != ''){
$searchQuery = " and (id like '%".$searchValue."%' or
show_activity_id like '%".$searchValue."%' or
game_show_id like'%".$searchValue."%' ) ";
}
## Total number of records without filtering
$sel = mysqli_query($connData['conn'],"select count(*) as allcount from analysis_data.show_activity");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];
## Total number of record with filtering
$sel = mysqli_query($connData['conn'],"select count(*) as allcount from analysis_data.show_activity WHERE 1 ".$searchQuery);
$records = mysqli_fetch_assoc($sel);
$totalRecordwithFilter = $records['allcount'];
## Fetch records
$empQuery = "SELECT * from analysis_data.show_activity";
$empRecords = mysqli_query($connData['conn'], $empQuery);
$data = array();
while ($row = mysqli_fetch_assoc($empRecords)) {
$data[] = array(
"id"=>$row['id'],
"show_activity_id"=>$row['show_activity_id'],
"nasa_id"=>$row['nasa_id'],
"game_show_id"=>$row['game_show_id'],
"account_id"=>$row['account_id']
);
}
## Response
$response = array(
"draw" => intval($draw),
"iTotalRecords" => $totalRecords,
"iTotalDisplayRecords" => $totalRecordwithFilter,
"aaData" => $data
);
echo json_encode($response);
return json_encode($response);
Html
<label >Select a table:</label>
<select name="db" id="db">
<option value="">Please select a table</option>
<option value="show">show</option>
<option value="show_activity">show_activity</option>
<option value="show_incentive">show_incentive</option>
<option value="show_mulp_detail">show_mulp_detail</option>
</select>
<button id="showData" type="submit">Select</button>
</form>
<table id="showTable" class="display dataTable">
<thead>
<tr>
<td>ID</td>
<td>show_activity_id</td>
<td>nasa_id</td>
<td>game_show_id</td>
<td>account_id</td>
</tr>
</thead>
</body>
</html>

What I could understand from your question is, you want to grab data {table data} from php, and you have mentioned you want to grab 2 different data (as you have mentioned A&B)
What I would suggest is to use post in ajax and send the parameters to the file, and then handle the request according to the parameters given.
but when I added function to the php file then my Ajax cannot get data from the file anymore, I don't see any function in php but I think you meant something like this..?
<?php
function something(){
//data query and search
echo //the JSON result
}
?>
Here is something you can do with Ajax to get 2 different data.
<!-- A simple select in HTML -->
<select name="dbdata" onchange="ajaxCall(this.value)">
<option > Choose a value </option>
<option value='a' > A </option>
<option value='b' > B </option>
</select>
<!-- Script for AJAX call -->
<script>
//function ajaxCall
function ajaxCall(val){
//If you wanna use GET
$.get("table_backend.php",
{ type : "tabledata", db : val },
function(data, status){
if(status == "success"){
console.log(data);//for debugging purpose
//Now do your stuff here and fill data in HTML table
}
else console.log("Error while getting data from server..!");
}
);
//If you wanna use POST
//Just use $.post instead of $.get
}
</script>
Now the php { table_backend.php }
<?php
//Grab the parameters from request.
//$_GET or $_POST according to request made from Ajax.
if(isset($_GET['type'])){
$type = $_GET['type'];
$db = $_GET['db'];
}
else echo "no parameters..!";
if($type == "tabledata"){//Just to ensure everything works fine nothing much
if( $db == 'a' ){
//Gonna call a function to get data for db=a
//As you have mentioned you have function in php so call that function here
getDBdata_A();//function to get DB data for db=a
}
else if($db == 'b'){
getDBdata_B();//function to get DB data for db=b
}
}
//Here are function definitions
getDBdata_A(){
//Do your stuff here
//Querying and searching whatever
echo echo json_encode($response);//The result
}
getDBdata_B(){
//Do your stuff here
//Querying and searching whatever
echo echo json_encode($response);//The result
}
?>
Hope this helps in someway...
Feel free to comment down for any queries.

dynamicly added row cannot run autofill ajax script

i am new to programming. so i want to make a table that user can add new rows by clicking a button.
and in that rows, user can input one fields (ID) with some registered series of numbers and then the other fields (parts name) shows the part's name according my other table.
I managed to create a code that works on adding new rows and autofill via ajax.
but unfortunately, the autofill only works on top/first row. but when i input ID on second or third row, the parts name's field did not show up.
what am i missing? this is my add row code:
<script>
var no = 0;
function addItem() {
no++;
var html = "<tr>";
html += "<td>" + no + "</td>";
html += "<td><input type='text' name='id_sap[]' onkeyup='autofills()' id='sappart' required></td>";
html += "<td><input type='text' name='material_name[]' id='namapart' required></td>";
html += "<td><input type='number' name='outcoming_qty[]' required /></td>";
html += "<td><button type='button' onclick='deleteRow(this);'>Delete</button></td>"
html += "</tr>";
var row = document.getElementById("tbody").insertRow();
row.innerHTML = html;
}
function deleteRow(button) {
button.parentElement.parentElement.remove();
// first parentElement will be td and second will be tr.
</script>
and this is my autofill code:
<script type="text/javascript">
function autofills(){
var parts = $('input[name="id_sap[]"]').val();
var sloc = $('input[name="tarea"]').val();
$.ajax({
url: 'ajax1.php',
data: {"id_sap":parts,"storage_location":sloc},
}).success(function (data) {
var json = data,
obj = JSON.parse(json);
$('input[name="material_name[]"]').val(obj.material_name);
});
}
</script>
and this is my ajax page:
<?php
//membuat koneksi ke database
$koneksi = mysqli_connect("localhost", "shaun", "godbless19", "dboptima");
//variabel nim yang dikirimkan form.php
$nomorsap = $_GET['id_sap'];
$areas = $_GET['storage_location'];
//mengambil data
$query = mysqli_query($koneksi, "SELECT * FROM material_card where id_sap = '$nomorsap' and storage_location = '$areas'");
$spare = mysqli_fetch_array($query);
$data = array(
'material_name' => $spare['material_name']);
//tampil data
echo json_encode($data);
?>
please help me , i have been wasting too much effort and time to solve this
so far i keep looking similar issues on stack overflow, none of them seems to work.
thank you very much
best regards

Try the following:
$(document).on('keyup', "#sappart input[type='text']", function() {
var parts = $('input[name="id_sap[]"]').val();
var sloc = $('input[name="tarea"]').val();
$.ajax({
url: 'ajax1.php',
data: {
"id_sap": parts,
"storage_location": sloc
},
}).success(function(data) {
var json = data,
obj = JSON.parse(json);
$('input[name="material_name[]"]').val(obj.material_name);
});
});

How to get post values of <td></td> tags

I need to post these values of my td tags as this an editable table using jquery. I'm not sure if the issue here is with the script or the td tags? Currently my var_dump($_POST) is returning no values.
See below code, the td tags are about 10 lines down:
<h2><u>Edit</u></h2>
<form action="ajax/name.php" name="edit_template_form" id="edit_template_form" method="post">
<?php print "<table border=\"1\" class=\"editableTable\">
<tr>
<th>Template Name</th>
<th>Template Description</th>
</tr>";
foreach($res as $row){
$temp_description = $row['template_description'];
echo "<tr>";
echo "<td id=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td id=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
echo "<tr/>";
}
print "</table>"; ?>
</form>
<div id="template_edit"></div>
name.php
var_dump($_POST);
if (isset($_POST['edit_template'])) {
$template_edit = $db->escape($_POST['edit_template']);
$user = $db->escape($user);
$db->update('templates', array('template_description' => $template_edit), 'AND userID="'.$user.'"');
echo $_POST['edit_template'];
}
if (isset($_POST['edit_name'])) {
$template_name = $db->escape($_POST['edit_name']);
$user = $db->escape($user);
$db->update('templates', array('template_name' => $template_name), 'AND userID="'.$user.'"');
echo $_POST['edit_name'];
}
script.js
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
//POST values
var edit_template = $('#edit_template').val();
var edit_name = $('#edit_name').val();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('div#template_edit').text(data);
});
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});

First issue: unique ids
You cannot have multiples of the same id in your HTML - this is invalid code and will provide inconsistent and/or incorrect results in your code.
To fix this change the id on the <td> elements into a class:
echo "<td class=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td class=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
Second issue: no value being posted
You are creating an <input> in the <td>, then grabbing the <td>'s value, then replacing the content of the <td> with the value of the <input>.
There are three issues here:
a <td> element doesn't have a value - you should be using .text() to grab its content instead of .val().
You are doing this out of order - at the time you grab the content of the <td> it contains an <input>, but no text.
Once you replace the content of the <td> the element that this refers to in your keydown event handler (the <input>) no longer has any relation to the DOM so you have to store a reference to another element (eg. the parent element) to perform DOM manipulation.
So in script.js make the following changes:
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
var $parent = $(this).parent();
$parent.text(newContent);
$parent.removeClass("cellEditing");
//POST values
var edit_template = $parent.closest("tr").find(".edit_template").text();
var edit_name = $parent.closest("tr").find(".edit_name").text();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('#template_edit').text(data);
});
}
});
Note I also removed div from the selector in the $.post callback - #id as a selector is quicker in jQuery than element#id, and ids should be unique within the DOM.

change the order of the code...
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
var edit_template = $('#edit_template').text(); //here is not val, is text...
var edit_name = $('#edit_name').text(); //here is not val, is text...
//POST values
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('div#template_edit').text(data);
});

I think your problem is here:
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}
edit_name and edit_template are being used as both a local variable and data key.
I would try:
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
$.post('ajax/name.php', {edit_name: $('#edit_name').val(), edit_template: $('#edit_template').val(), function(data) {
$('div#template_edit').text(data);
});
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
Note: this is a stab in the dark and is completely untested!!
You will also have problems if element IDs in your html are not unique.
I would also be looking at associating an ID from your database in here somewhere.

Pass the td value to php page using Javascript

I have a HTML table the displays record from database.
Below is a screenshot of my table
There is a button in a TD (i.e column 5,7,9), when I click the button I want to perform function to display a popup box with html table.
Before that I want to pass the value of mcc and mnc and also want to pass the column name (i.e if i clicked the button near 5xx i want pass 5xx if 6xx I want to pass 6xx) to the page where there is a query to display the table. And have separate php code to retrieve th and td from database.
I tried but I don't know how to pass this value to javascript then to php page that contains query to display the table. Thanks
This is my HTML markup:
<table>
<th style="text-align:center;width:92px">MCC</th>
<th style="text-align:center;width:92px">MNC</th>
<th style="text-align:center;width:92px">MNP</th>
<?
$ColumnNames = mysql_query("SELECT column_name FROM information_schema.COLUMNS WHERE table_name = 'supplierprice' AND column_name NOT
IN ('supp_price_id','region', 'country', 'networkname', 'mcc', 'mnc', 'mnp'
)") or die("mysql error");
$columnArray=array();
$i = 0;
while($rows = mysql_fetch_array($ColumnNames))
{
$columnArray[]=$rows[0];
echo "<th>" . $columnArray[$i] . " <span> <img id='logo' src='/image/Picture2.png' style='margin:-62px -21px -9px 32px'></span></th>";
echo "<th style= 'width:20px;'></th>";
$i++;
}
?>
<?php
$sql = mysql_query("SELECT * FROM supplierprice ");
while($rows=mysql_fetch_array($sql))
{
if($alt == 1)
{
echo '<tr class="alt">';
$alt = 0;
}
else
{
echo '<tr>';
$alt = 1;
}
echo ' <td class="edit region '.$rows["supp_price_id"].'">'.$rows["region"].'</td>
<td class="edit country '.$rows["supp_price_id"].'">'.$rows["country"].'</td>
<td class="edit networkname '.$rows["supp_price_id"].'">'.$rows["networkname"].'</td>
<td id="mcc" class="edit mcc '.$rows["supp_price_id"].'">'.$rows["mcc"].'</td>
<td id="mnc" class="edit mnc '.$rows["supp_price_id"].'">'.$rows["mnc"].'</td>
<td class="edit mnp '.$rows["supp_price_id"].'">'.$rows["mnp"].'</td>';
$ColumnNames = mysql_query("SELECT column_name FROM information_schema.COLUMNS WHERE table_name = 'supplierprice' AND column_name NOT
IN ('supp_price_id','region', 'country', 'networkname', 'mcc', 'mnc', 'mnp'
)") or die("mysql error");
$columnArray=array();
$i=0;
while($rows1=mysql_fetch_array($ColumnNames))
{
$columnArray[]=$rows1[0];
echo '<td width="0px;" class="edit '.$columnArray[$i].' '.$rows["supp_price_id"].'">'.$rows[$columnArray[$i]].'</td>';
echo '<td><input type="button" onclick="myFunction()" value="" /></td>';
$i++;
}
echo '</tr>';
} ?>
</table>
Javascript
<script>
function myFunction() {
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "testpage2/config.php";
var mcc = document.getElementById("mcc").value;
var mnc = document.getElementById("mnc").value;
var vars = "mcc="+mcc+"&mnc="+mnc;
hr.open("POST", url, true);
hr.send(vars);
}
</script>
but it not passing the value of mcc and mnc also the column

First of all assign Id to table:
<table>
like:
<table id="contentTable">
Now use below code of jQuery:
$(document).ready(function ()
{
$('#tableId').find('th').each(function ()
{
$(this).click(function ()
{
var thValue = $(this).html();
alert(thValue) // here is value of th on you have click
});
});
});
Cheers!!!

You could try to use something like "generic javascript":
<?php //some stuff
$mcc = "some value";
?>
<script type="text/javascript">
var myVariable = <?php echo $mss; ?>
</script>