This is driving me crazy.
I have three pages in this equation: nightmare.php, semi.php, and update.php.
Pieces of Code
nightmare.php
<a class="pull-right">
<select class="navbar-inverse" onchange="showPage(this.value)">
<option value="" disabled selected>Select Business Unit</option>
<option value="/Nightmare/imes.php">IMES</option>
<option value="/Nightmare/semi.php">SEMI</option>
</select></a>
<div id="txtHint"><b></b>
showPage() function
function showPage(str) {
console.log(str);
if (str !==".PM") {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
}
if (str!=="/metrics.php") {
$("#txtHint").load(str, function () {
});
}}
The user begins by loading nightmare.php, which consists of a header bar with a dropdown (shown above). When they select SEMI, semi.php is called into the #txtHint div (also shown above)
semi.php
semi.php consists mostly of an HTML table populated with PHP and SQL. There are fields that the user can update. There is a submit button. When the user presses this submit button, those changes should be sent to the server and the user's view should be refreshed with the updated info.
The important piece is this line:
<form method="POST" action="update.php">
Problem
If load semi.php into the address bar, the table is displayed and I type in comments and hit the "update" button. Update.php launches and echos out the correct SQL code.
If I load nightmare.php instead, then select semi from the dropdown and populate semi.php into the DIV on nightmare.php, then click the update button, it loads update.php but update.php is blank and no code is executed to the server. I have looked through other projects I've written where I've done this same exact process and I can't see any discernible difference in the code that would allow me to understand why this doesn't work. I'm very confused!
Let me know if you need to see any other snippets of code to help me make sense of this.
Update 11/14/2014
Here is semi.php, with a few changes for brevity:
<?php session_start(); ?>
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="/bootstrapstyle.css">
<link rel="stylesheet" href="/toastr.css">
<script type="text/javascript" src="/toastr.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/tablesorter/jquery.tablesorter.js"></script>
<style type="text/css"> body { padding-top: 50px; padding-bottom: 20px; }
</style>
<style>
.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: none; }
.fitler-table .quick:hover { text-decoration: underline; }
td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
</style>
</head>
<body>
<script>
$(document).ready(function()
{
$("#box-table-a")
.tablesorter({textExtraction: 'complex'});
}
);
</script>
<?php
include('./nightmaredb.php');
$sqlQuery = "SELECT * FROM report";
$result = mysqli_query($con, $sqlQuery);
?>
<div class="jumbotron">
<div class="container">
<h1 class="pull-left">Nightmare</h1>
</div>
<div id="form-messages">
<div class="container2">
<div class="row">
<div class="col-xs-6 col-sm-4 col-lg-12">
<form id="updateNightmare" method="POST" action="update.php">
<div class="container pull-left">
<h2 class="pull-left">
<input class="button" class="btn btn-default btn-lg" name="update"<?= $lineID ?>" type="submit" id="update" value="UPDATE">
</h2>
</div>
</div>
</div>
<div id="tableRefresh">
<table id="box-table-a" class="tablesorter">
<thead>
<th>SOLI</th>
<th>Branch</th>
<th>*... a few others...*</th>
</tr></thead>
<?php
while ($row = mysqli_fetch_array($result)) {
$lineID = $row['lineID'];
$soli = $row['soli'];
$branch = $row['branch'];
$warehouse = $row['warehouse'];
$acctNumber = $row['acctNumber'];
$customer = $row['customer'];
$resolutionComments = $row['resolutionComments'];
?>
<tr>
<td><?= $lineID ?><input name="lineID[]" value="<?= $lineID ?>"></td>
<td><?= $soli ?><input name="soli" value="<?= $soli ?>"></td>
<td><?= $branch ?><input name="branch" value="<?= $branch ?>"></td>
<td> *... a few others ...* </td>
<?php
}
?>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
</footer>
<!-- /CONTAINER -->
<script src="update.js"></script>
<script src="/filter/jquery.filtertable.min.js"></script>
<script>
$(document).ready(function() {
$('table').filterTable();
});
</script>
</body>
</html>
