I am not that experienced in web developing, so sorry for rookie mistakes;)
In HTML, I want to create a dynamic popup window(div hidden by CSS). On the click of a button I am performing an AJAX post request. The result of the request is a string, which is stored in a hidden input field on the HTML page.
The popup contains a table with the content submitted by the string. However now I want to retrieve the string via a PHP $_GET or $_POST request.
This is not working at the moment and I don't understand why. Opening the popup window I am getting these errors:
Notice: Undefined index: popupcontenthidden in ...
Warning: Invalid argument supplied for foreach() in
The HTML:
<div class="popupcontent">
<span class="helper"></span>
<div>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<form name='form' action="" method='post'>
<input type='text' name='popupcontenthidden' id='popupcontenthidden'>
</form>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
<?php
$rows = json_decode($_POST['popupcontenthidden']);
foreach ( $rows as $print ) {
?>
<tr>
<td><?php echo $print->Field; ?></td>
<td><?php echo $print->Type; ?></td>
<td><?php echo $print->Null; ?></td>
<td><?php echo $print->Key; ?></td>
<td><?php echo $print->Default; ?></td>
<td><?php echo $print->Extra; ?></td>
</tr>
<?php } ?>
</table>
</div>
The JS:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
var rows = response;
//hand data to html hidden input
document.getElementById("popupcontenthidden").value = rows;
//open popup on click
$(".popupcontent").show();
}
});
I understand that the second error is happening because $rows is empty. But how can I fix the issue and retrieve the string from the input field? I can confirm that the string is correctly stored in the input field so all the AJAX stuff works.
Thank you so much!
A kind of solution here:
<div class="popupcontent">
<span class="helper"></span>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
</thead>
<tbody id="myPopupContentTableBody"></tbody>
</table>
</div>
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
$('#myPopupContentTableBody').html(response);
//open popup on click
$(".popupcontent").show();
}
});
<?php
...
$rows = myPHPCalculation;
foreach ($rows as $print){
echo '
<tr>
<td>'.$print['Field'].'</td>
<td>'.$print['Type'].'</td>
<td>'.$print['Null'].'</td>
<td>'.$print['Key'].'</td>
<td>'.$print['Default'].'</td>
<td>'.$print['Extra'].'</td>
</tr>
';
}
...