I've looked extensively and still haven't found the answer to my question. I've gotten close, but I think that's as far as I can get on my own.
I have a database that has tables for different years, like so:
year_2016
, year_2017
, year_2018
, etc...
I'm using PHP and MySQL to query these tables and using AngularJS to display them in HTML.
Here is my HTML:
<div id="main" ng-controller="MyController">
<input type="text" placeholder="Search" autofocus ng-model="query" />
<input type="text" placeholder="Year" ng-model="year" ng-blur="sendData()" />
<div id="db-results" ng-show="query">
<p><span>Searching for: "{{ query }}"</span></p>
<p>{{ filtered.length }} results</p>
<div class="container table">
<div class="row" ng-repeat="item in items | limitTo : 100 | filter : query as filtered">
<div class="col bg-info text-light rounded-left">{{ item.dir }}</div>
<div class="col bg-warning text-dark">{{ item.index }}</div>
<div class="col-lg-6 bg-light text-dark">{{ item.text }}</div>
</div><!-- row -->
</div><!-- table -->
</div><!-- db-results -->
</div><!-- main -->
And my Angular:
var myControllers = angular.module('myControllers', []);
myControllers.controller('MyController',
function MyController($scope, $http) {
$scope.year = 2018;
$scope.sendData = (function () {
var data = $.param({
year: $scope.year
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8;'
}
};
var postURL = 'mysql_conn.php';
$http.post(postURL, data, config)
.then(
function(response){
console.log(data);
console.log('post_year=' + response.data.year);
$scope.items = response.data.records;
},
function(response){
console.log('failure ' + response);
});
})();
});
And finally, the PHP:
<?php
header("Access-Control-Allow-Origin: *");
$request = json_decode(file_get_contents('php://input', true));
$year = $request->year;
// $year = 2018;
$conn = new mysqli("SERVER", "USER", "PASSWORD", "DATABASE");
$result = $conn->query("SELECT * FROM year_" . $year . " LIMIT 100;");
$output = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($output != "") {$output .= ",";}
$output .= '{"dir":"' . $rs["dir_index"] . '",';
$output .= '"index":"' . $rs["sub_index"] . '",';
$output .= '"text":"' . $rs["text"] . '"}';
}
$output ='{"records":[' . $output . '], "year": ' . $year . '}';
$conn->close();
echo($output);
?>
I can set the $year
variable in PHP statically and it queries everything from the table corresponding to that year, and then on my actual web page, I can type in a search and it will filter the records accordingly. That much works.
What I want to be able to, that I can't do already, is type in the year in the year input box and have the PHP re-query the appropriate table and display the results. In other words, I want the year input box to be responsive. PHP is not dynamic, so I thought Angular/AJAX might be able to help me out here.
In the Angular code, I am using http.post
to send the value of $scope.year
to PHP to then query the corresponding table. At least, that's what I'm trying to do. It's not working. In PHP, part of the output JSON is the $year
variable that should be identical to the $scope.year
model, but when I print it to the console in Angular, it returns undefined
. I'm also using the same POST request to get the data that PHP queries from the database (this works).
I had also tried using separate GET and POST requests but this didn't work.
Thanks!